今天小编给大家分享一下css新浪首页顶部栏怎么实现的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
创新互联是一家专业从事成都网站制作、做网站、外贸营销网站建设的网络公司。作为专业的建站公司,创新互联依托的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、全网整合营销推广及网站设计开发服务!
html代码
css代码:
body,div{ margin: 0; padding: 0; font-family:"Microsoft YaHei","微软雅黑","SimSun","宋体"; } ul,li{ list-style: none; margin: 0; padding: 0; } a{ text-decoration: none; color: #4c4c4c; } .border-01{ width: 100%; border-top: 4px solid #ff8400; border-bottom: 1px solid #edeef0; /* 文字居中对齐 height=line-height */ height: 42px; line-height: 42px; } .border-001{ width: 982px; margin: 0 auto; font-size: 12px; } .weibo-left{ float: left; } .weibo-right{ float: right; } /* 使用float来实现横排,而不是父组件设置display为flex */ .weibo-left>li,.weibo-right>li{ float: left; padding:0px 14px; } .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: 0 14px; */ } /* 父元素hover实现子元素显示 */ .weibo:hover >ul{ display: block; width: 113px; /* margin-left: -14px; */ /* padding: 0 14px; */ } .weibo:hover >ul>li{ border: 1px solid #ff8400; border-top: none; padding: 0 14px; 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; */ }实现效果:
知识点总结:
1.uli li横向排列可使用float,之前经常使用diplay:flex;这个可能会导致一些问题,后面遇到再添上
2.父元素:hover >子元素{ dispay:block/none}:通过父元素hover属性控制子元素显示与隐藏
3.position:absolute 可使元素脱离文档流,配合z-index使用,不影响文档流中元素布局显示,可实现元素层叠显示
以上就是“css新浪首页顶部栏怎么实现”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。
本文标题:css新浪首页顶部栏怎么实现
转载来于:http://cdxtjz.cn/article/pjijjd.html