css新浪首页顶部栏怎么实现

魁首哥

作者

css新浪首页顶部栏怎么实现

今天小编给大家分享一下css新浪首页顶部栏怎么实现的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

html代码

<divclass="border-01"><divclass="border-001"><ulclass="weibo-left"><li><ahref="#">设置为首页</a></li><li><ahref="#">手机新浪网</a></li><li><ahref="#">移动客户端</a></li></ul><ulclass="weibo-right"><li><ahref="#">登录</a></li><liclass="weibo"><ahref="#">微博</a><ul><li><ahref="#">私信</a></li><li><ahref="#">评论</a></li><li><ahref="#">@我</a></li></ul></li><li><ahref="#">博客</a></li><li><ahref="#">邮箱</a></li><li><ahref="#">网站导航</a></li></ul></div>

css代码：

body,div{margin:0;padding:0;font-family:"MicrosoftYaHei","微软雅黑","SimSun","宋体";}ul,li{list-style:none;margin:0;padding:0;}a{text-decoration:none;color:#4c4c4c;}.border-01{width:100%;border-top:4pxsolid#ff8400;border-bottom:1pxsolid#edeef0;/*文字居中对齐height=line-height*/height:42px;line-height:42px;}.border-001{width:982px;margin:0auto;font-size:12px;}.weibo-left{float:left;}.weibo-right{float:right;}/*使用float来实现横排，而不是父组件设置display为flex*/.weibo-left>li,.weibo-right>li{float:left;padding:0px14px;}.weibo-left>li:hover,.weibo-right>li:hover{/*color:#ebbe7a;*/background-color:#edeef0;}.weibo-left>li>a:hover,.weibo-right>li>a:hover{color:#ff8400;}.weibo>ul{position:absolute;display:none;/*margin-left:-14px;*//*left:-14px;*//*padding:014px;*/}/*父元素hover实现子元素显示*/.weibo:hover>ul{display:block;width:113px;/*margin-left:-14px;*//*padding:014px;*/}.weibo:hover>ul>li{border:1pxsolid#ff8400;border-top:none;padding:014px;margin-left:-14px;}.weibo:hover>ul>li>a:hover{background-color:#edeef0;color:#ff8400;display:block;}.weibo:hover>ul>li:hover{background-color:#edeef0;/*color:#ff8400;*/}

实现效果：