发布网友 发布时间:2022-04-22 06:43
共3个回答
热心网友 时间:2022-04-20 18:51
<!DOCTYPE>
<html>
<head>
<style>
* {margin:0; padding:0;}
ul::after, ul::before {
content: "";
clear: both;
display: block;
}
ul {margin:auto; width:900px;}
ul li{
font-family:"微软雅黑";
list-style:none;
background-color:#0a0717;
float:left;
padding:0 30px;
border-right:1px solid #1e1a2a;
color:white;
line-height:30px;
border-bottom:1px solid #1e1a2a;
}
.phone {
border: 1px solid #FFFFFF;
display: inline-block;
vertical-align: middle;
width: 11px;
height: 17px;
border-radius: 1px;
margin-right: 4px;
position: relative;
border-bottom: 6px solid white;
box-sizing: border-box;
}
span.phone::after {
content: "";
display: block;
box-sizing: border-box;
width: 100%;
background-color: white;
height: 3px;
position: absolute;
bottom: -5px;
border-left: 4px solid #0A0717;
border-right: 4px solid #0A0717;
}
</style>
</head>
<body>
<ul>
<li>阿里云首页</li>
<li>大会回顾</li>
<li>云栖社区</li>
<li><span class="phone"></span>阿里云app</li>
</ul>
</body>
</html>
热心网友 时间:2022-04-20 20:09
用li加上浮动效果就可以
热心网友 时间:2022-04-20 21:43
右键检查 就知道了