做悬赏的网站,网站建设论文要求,施工企业岗位说明书,高端网站设计企业目录
实现效果 代码及其解释
html部分
CSS部分 hello#xff0c;hello好久不见#xff01;
今天我们来写二级导航栏#xff0c;所谓二级导航栏#xff0c;简单来说就是鼠标放上去就有菜单拉出#xff1a;
实现效果 代码及其解释
html部分
!DOCTYPE html
hello好久不见
今天我们来写二级导航栏所谓二级导航栏简单来说就是鼠标放上去就有菜单拉出
实现效果 代码及其解释
html部分
!DOCTYPE html
htmlheadlink rel shortcut icon typeimage/x-icon href./img/图标1.jpglink relstylesheet typetext/css href./css/首页.css/meta charsetutf-8 /title数博会官网/title/headbodydiv classnavbardiv classnavulli/lili/lili/lilia href#首页/aollia href#数博会介绍/a/lilia href#往届回顾/a/lilia href#精彩瞬间/a/li/ol/lilia href#新闻中心/aollia href#头条新闻/a/lilia href#展会新闻/a/lilia href#行业新闻/a/lilia href#展商新闻/a/li/ol/lilia href#峰会论坛/aollia href#大会日程/a/lilia href#高端对话/a/lilia href#专业论坛/a/li/ol/lilia href#展览会/aol lia href#展会介绍/a/lilia href#展商名录/a/lilia href#展品列表/a/lilia href#展区分布/a/li/ol/lilia href#数博发布/a/lilia href#大赛/a/lilia href#观摩活动/aol lia href#观摩活动介绍/a/li/ol/lili classaaaa href#数博电讯/aol lia href#【数博2023】第十二期/a/lilia href#【数博2023】第十一期/a/lilia href#【数博2023】第十期/a/lilia href#【数博2023】第九期/a/lilia href#【数博2023】第八期/a/lilia href#【数博2023】第七期/a/lilia href#【数博2023】第六期/a/lilia href#【数博2023】第五期/a/lilia href#【数博2023】第四期/a/lilia href#【数博2023】第三期/a/lilia href#【数博2023】第二期/a/lilia href#【数博2023】第一期/a/li/ol/lilia href#资料下载/a/lilia href#联系我们/aol lia href#联系方式/a/lilia href#组织机构/a/lilia href#隐私保护协议/a/li/ol/lili/lili classunderline!-- 这个元素用来定义滑动的线条 --/li/ul /div/divdiv classbigimgimg srcimg/大作业/首页大一.jpg /div/body
/htmlCSS部分
*{padding: 0;margin: 0;
}
body{width: 100%;}
li{list-style: none;
}
a{
text-decoration: none;color:#FFFFFF;
}
li ol a{color: darkblue;font-size: 12.5px;line-height: 70px;
}
li ol{text-align: center;
}
.aaa ol li a{font-size: 10px;
}
.navbar{float: left;width: 100%;height: 70px;background-color: #0D2654;background-color: rgba(0,0,0,0.3);/* 怎么感觉没用啊 */box-shadow: 0px 0px 5px ;
}
/* 后代选择器 */
.navbar .nav{width: 100%;height: 100%;/* 让元素水平居中 */margin: 0 auto;
}
.navbar .nav ul{/* 相对定位 */position: relative;/* 弹性布局 */display: flex;/* 让子元素平均分配宽度 */justify-content: space-around;width: 100%;height: 100%;
}
/* 只对ul里的li起作用 */
.navbar .nav ulli{background-color: #0D2654;background: rgba(0,0,0,0.3);width: 100%;height: 100%;
}
/* 只对ul里的li里的a起作用 */
.navbar .nav ullia{/* ? */display: block;width: 100%;height: 100%;line-height: 70px;text-align: center;
}
.navbar .nav ulli ol{width: 100%;background-color: #FFFFFF;/* box-shadow: 1px 1px 3px; *//* 让盒子先沿着y轴缩放到0也就是隐藏了 */transform: scaleY(0);/* 我们需要将盒子从上面滑动下来 设置一下缩放中心点即可 */transform-origin: 50% 0;/* 设置过渡 *//* transition: all 0.6s; */
}
.navbar .nav ul li ol li{height: 70px;border-bottom: 1px solid rgb(245,245,245);
}
.navbar .nav ulli ol li:hover{background-color: rgba(0,180,245,0.3);
}
.navbar .nav ulli:hover ol{transform: scaleY(1);
}
.navbar .nav ul .underline{top: 50px;/* 绝对定位 */position: absolute;bottom: 0;/* 第一个条条距离最左边的距离 */left: 315px;width: 100px;/* 条高 */height: 2px;/* 设置圆角 */border-radius: 2px;background-color: white;/* 加上过渡 *//* transition: all 0.5s; *//* 不加了 */pointer-events: none;}.navbar .nav ulli:nth-child(2):hover~ .underline{left: 315px;background-color:white;}.navbar .nav ulli:nth-child(3):hover~ .underline{left: 315px;background-color: white;}.navbar .nav ulli:nth-child(4):hover~ .underline{left: 315px;background-color: white;}.navbar .nav ulli:nth-child(5):hover~ .underline{left: 425px;background-color:white;}.navbar .nav ulli:nth-child(6):hover~ .underline{left: 525px;background-color: white;}.navbar .nav ulli:nth-child(7):hover~ .underline{left: 635px;background-color:white;}.navbar .nav ulli:nth-child(8):hover~ .underline{left: 735px;background-color: white;}.navbar .nav ulli:nth-child(9):hover~ .underline{left: 840px;background-color:white;}.navbar .nav ulli:nth-child(10):hover~ .underline{left: 945px;background-color: white;}.navbar .nav ulli:nth-child(11):hover~ .underline{left: 1045px;background-color: white;}.navbar .nav ulli:nth-child(12):hover~ .underline{left: 1150px;background-color:white;}.navbar .nav ulli:nth-child(13):hover~ .underline{left: 1260px;background-color:white;}.navbar .nav ulli:nth-child(14):hover~ .underline{left: 1260px;background-color:white;}.bigimg{float: left;margin-top: -70px;}img{width: 100%;}
希望能帮到您
我们下次见啦~~
