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

今天小编给大家分享一下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新浪首页顶部栏怎么实现"这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注行业资讯频道。