编译可选择路径的导航栏：
代码
<style>
a{/*美化链接字体*/
font-size: 60px;
color: white;
text-decoration: none;
}
.box1{
color:yellow;
}
.box2{/*更改链接在容器的位置*/
margin-left: 350px;
}
.box{/*容器Css编译*/
width: 2500px;
height: 100px;
margin: auto;/*自适应居中*/
background-color:darkslateblue;
border: 1px solid black;
box-shadow: 10px 10px 10px gray;/*阴影部分*/
border-radius: 20%;
}
li{/*布置导航栏*/
width: 300px;
height: 100px;
display:inline-block;/*改为行标签，但保留块级样式*/
text-align: center;/*对齐方式*/
}
li:hover{
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<li class="box2"><a class="box1" href="https://www.youku.com/">优酷:</a></li>
<li><a href="https://v.youku.com/v_show/id_XNTkzNjcwOTkwOA==.html?s=badbb5792f934ddb82fd&scm=20140719.manual.15366.show_badbb5792f934ddb82fd&spm=a2hja.14919748_WEBHOME_NEW.drawer1.d_zj1_3&s=badbb5792f934ddb82fd">师兄啊师兄</a></li>
<li><a class="box1" href="https://v.qq.com/">腾讯:</a></li>
<li><a href="https://v.qq.com/x/cover/324olz7ilvo2j5f/i00350r6rf4.html?j_vid=i4100bexkss&j_cut_vid=x4100i5c3dx&j_is_win_vid=1&j_start=0">吞噬星空</a></li>
<li><a class="box1" href="https://www.bilibili.com/">哔哩哔哩:</a></li>
<li><a href="https://www.bilibili.com/bangumi/play/ep829106?spm_id_from=333.1007.0.0">怪兽8号</a></li>
</div>
</body>
</html>
运行结果：
css盒子模型：
在CSS中，一个盒子由外到内可以分成四个部分：margin（外边框），border（边框），padding（内边框），content（内容）
盒子模型实际上是一个盒子，可封装html的元素，设计元素与边框的距离
padding：表示盒子内边距填充：
同样：padding-top（上）~padding-bottom（下）添加代码可以用来填充图片或颜色
外边距：margin 内边距：padding
border（边框）：border-width：边界宽度 border-style：边界样式 border-color：边界颜色
>.元素所占用空间为 外边距+边框+内边距+元素本身大小
>.margin:auto 自适应居中
>.*{margin:0px} 取消元素和导航栏的微小间距
449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
