编译可选择路径的导航栏:
代码
<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} 取消元素和导航栏的微小间距