html文件:
- 首页
- 关于蝉壳
- 新闻与媒体
- 产品
- 服务与机构
- 人才招聘
- 联系我们
1.清除浮动
为清除浮动专门设置了一个class,别忘记写after
.clearfixed::after {
content: “”;
display: table;
clear:both;
}
2.想要让菜单在页面中居中,用margin:
.container {
width:1200px;
/* border:1px solid black; */
margin: 20px auto;
}
3.只对nav-list下的子标签li有效,如果里面又嵌套了li,该样式对其无效,用子选择器
.nav-list > li
让菜单中文字有间隔,用margin:
.nav-list > li {
float: left;
margin: 0 20px;
}
4.当鼠标移动到菜单上时,要求加1px边框,会导致鼠标悬浮有抖动的效果:
css文件:
.nav-list > li > a {
color: #fff;
display: block;
height: 42px;
line-height: 42px;
font-size: 18px;
padding: 0 12px;
}
.nav-list > li > a:hover {
color: #bc0303;
background-color: #fff;
border: 1px solid #c9c9c9;
}
效果:
讨论1:可以在a标签没有悬浮时,也添加上border,并且与菜单的背景颜色一致,同时也给a未悬浮时,上下方向上的li多加了2px
css文件:
.nav-list > li > a {
color: #fff;
display: block;
height: 42px;
line-height: 42px;
font-size: 18px;
padding: 0 12px;
border:1px solid #808080;
}
讨论2:将底部的边框设置为none,并加高菜单的高度(从42px加为43px),遮住li边框的下边缘(毛刺)
也将悬浮时的下边框去掉,以符合下拉菜单最终的效果
.nav-list {
background-color: #808080;
height: 43px;
}
.nav-list > li > a {
color: #fff;
display: block;
height: 42px;
line-height: 42px;
font-size: 18px;
padding: 0 12px;
border:1px solid #808080;
border-bottom: none;
}
.nav-list > li > a:hover {
color: #bc0303;
background-color: #fff;
border: 1px solid #c9c9c9;
border-bottom: none;
}
1.快速生成li列表,且带有a标签和内容
ul>li*3>a>{关于蝉壳$}
回车即可
2.二级下拉菜单部分
html文件:
-
- 关于蝉壳1
- 关于蝉壳2
- 关于蝉壳3
为了让鼠标悬浮在’关于蝉壳‘上时,显示出下拉菜单,并且下拉菜单被一级菜单遮住一点点,需要将二级菜单设置成浮起来的样子(使用position和z-index)
css文件:
.nav-list {
background-color: #808080;
height: 43px;
position: relative;
}//以一级菜单做position调整
.nav-list > li > a {
color: #fff;
display: block;
height: 42px;
line-height: 42px;
font-size: 18px;
padding: 0 12px;
border:1px solid #808080;
border-bottom: none;
position:relative;
z-index: 9;
}//要设置z-index,所以a标签也要设置position
.nav-list .item {
width: 160px;
position: absolute;
z-index: 1;
top: 42px;
}
.nav-list .item .item-list {
学习分享,共勉
题外话,毕竟我工作多年,深知技术改革和创新的方向,Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心
font-size: 18px;
padding: 0 12px;
border:1px solid #808080;
border-bottom: none;
position:relative;
z-index: 9;
}//要设置z-index,所以a标签也要设置position
.nav-list .item {
width: 160px;
position: absolute;
z-index: 1;
top: 42px;
}
.nav-list .item .item-list {
学习分享,共勉
题外话,毕竟我工作多年,深知技术改革和创新的方向,Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心