HTML_导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>样式学习</title>
<style>
#navigator{
text-align: center;
}
.item{
text-decoration: none;
color: slategrey;
border-right:solid 1px slategrey;
padding: 0 15px;
}
</style>
</head>
<!--body标签默认会在页面四周有一点点空隙，用margin:0可以去掉-->
<body style="margin:0">
<!--一个空的div默认宽度100%，高度为0，添加内容时，高度才会被撑开-->
<div>
<img src="img/bannner.jpg" alt="" sizes="" srcset="">
</div>
<!--做导航栏右边带一个|
（1）超链接
（2）容器设置为居中
（3）每一个链接a加class，组成一个类
（4）加border-right
（5）最后一个采用行内样式去掉右边的|-->
<div id="navigator">
<a href="#" class="item">导航栏1</a>
<a href="#" class="item">导航栏2</a>
<a href="#" class="item">导航栏3</a>
<a href="#" class="item">导航栏4</a>
<a href="#" class="item">导航栏5</a>
<!--行内样式1000>ID选择器100>类选择器10>标签选择器1div{}>通用选择器0（*{}）
现实使用时，不能单独看，而是要把样式中设置的各种权重进行判断，比如：
#navigator a就比.item的高-->
<a href="#" class="item" style="border:none;">导航栏6</a>
</div>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-11-17 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读