ul做导航栏
Posted apelles
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ul做导航栏相关的知识，希望对你有一定的参考价值。
1.导航栏 编码ul>li
.wrapper {
padding: 0; /*the beginning 开始网页自带16pxmargin*/
margin: 0;
width: 300px; /*父级一开始宽度300px*/
list-style: none; /*清除格式前面的圆点*/
display: flex; /*使子元素横向排列*/
justify-content: space-around; /*flex下带属性 使子元素平均间距*/ /*每个项目两侧的间隔相等*/
}
li {
font-weight: bold; /*字体加粗*/
height: 10px; /*li 高 10px*/
line-height: 10px; /*行高 跟li一样*/
padding: 15px; /*就像电脑屏幕一样 包裹元素的厚度*/
}
li:hover { /*鼠标放上去的时候*/
border-radius: 20px; /*边框圆的弧度*/
background: black; /*字体颜色*/
color: white; /*字体颜色*/
}
2.
div p.test {
width: 300px;
height: 36px;
line-height: 36px;
color: white;
text-align: center;
background: #f46;
border-radius: 6px;
}
.chat>p {
width: 0px;
height: 0px;
border-top: 10px solid transparent;
border-right: 10px solid #f46;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
}
div.chat {
display: flex;
align-items: center;
margin-left: 100px;
}
锚点:
以上是关于ul做导航栏的主要内容，如果未能解决你的问题，请参考以下文章