文档流定位
程序员文章站
2022-04-25 11:37:15
...
display:none 隐藏
display:block 块级
display:inline 内联
display:inline-block 内联-块级
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin:0;
}
#nav{
margin: 0 auto;
width: 300px;
font-size: 0;
}
a{
display: inline-block;
width: 80px;
height: 30px;
border-bottom: 1px solid #ccc;
font-size: 14px;
text-align: center;
line-height: 30px;
text-decoration: none;
}
a:hover{
color: white;
background-color: #ccc;
border: 1px solid;
border-left-color: orange;
border-top-color: orange;
border-right-color: orange;
}
</style>
</head>
<body>
<div id="nav">
<a href="https://www.baidu.com">百度</a>
<a href="https://www.huke88.com">虎课网</a>
<a href="https://www.imooc.com">慕课网</a>
</div>
</body>
</html>
上一篇: CSS Position
下一篇: shell相关内容