css新浪首頁頂部欄怎么實現

今天小編給大家分享一下css新浪首頁頂部欄怎么實現的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

html代碼

 <div class="border-01">
            <div class="border-001">
                <ul class="weibo-left">
                    <li><a href="#">設置為首頁</a></li>
                    <li><a href="#">手機新浪網</a></li>
                    <li><a href="#">移動客戶端</a></li>
                </ul>
                <ul class="weibo-right">
                    <li><a href="#">登錄</a></li>
                    <li class="weibo">
                        <a href="#">微博</a>
                        <ul>
                            <li><a href="#">私信</a></li>
                            <li><a href="#">評論</a></li>
                            <li><a href="#">@我</a></li>
                        </ul>
                    </li>
                    <li><a href="#">博客</a></li>
                    <li><a href="#">郵箱</a></li>
                    <li><a href="#">網站導航</a></li>
                </ul>
            </div>

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新浪首頁頂部欄怎么實現”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。