html和css表格制作

发布网友 发布时间: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

右键检查 就知道了

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com