css图标的写法
发布网友
发布时间：2022-04-22 12:17
共2个回答
热心网友
时间：2022-05-14 07:25
html代码部分
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图标写法</title>
</head>
<body>
<div id="icon">
<span class="price">￥.0</span>
<a href="#" class="btn">去开团 ></a>
</div>
</body>
</html>
下面是css代码部分,处理了浏览器的兼容
<style>
#icon{display:inline-block;}
.price{display:inline-block; background:#E60012; font-size:40px; color:#fff; float:left; padding:0px 60px; height:86px; line-height:86px; -moz-border-radius-topleft:43px; -moz-border-radius-bottomleft: 43px; -webkit-border-top-left-radius:43px; -webkit-border-bottom-left-radius:43px; border-top-left-radius:43px; border-bottom-left-radius:43px;}
.btn{display:inline-block; background:#000; font-size:40px; color:#fff; text-decoration:none; float:left; padding:0px 60px; height:86px; line-height:86px; -moz-border-radius-topright:43px; -moz-border-radius-bottomright: 43px; -webkit-border-top-right-radius:43px; -webkit-border-bottom-right-radius:43px; border-top-right-radius:43px; border-bottom-right-radius:43px;}
</style>
效果图
热心网友
时间：2022-05-14 08:43
<div>
<span class="left">￥.0</span>
<span class="right">去开团></span>
</div>
下面是css样式
div{height:40px;
line-height:40px;
border-radius:20px;
overflow:hidden;
display:inline-block;
}
div span{
padding:10px 20px;
background-color:#000000;
color:#ffffff;
}
div span.left{
background-color:#ff0000;
}
效果如下图
为啥我写出来是这样的
