网站建设资讯

NEWS

网站建设资讯

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;  */
    }

    实现效果:

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

    知识点总结:

    1.uli li横向排列可使用float,之前经常使用diplay:flex;这个可能会导致一些问题,后面遇到再添上

    2.父元素:hover >子元素{ dispay:block/none}:通过父元素hover属性控制子元素显示与隐藏

    3.position:absolute         可使元素脱离文档流,配合z-index使用,不影响文档流中元素布局显示,可实现元素层叠显示

    以上就是“css新浪首页顶部栏怎么实现”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。


    文章题目:css新浪首页顶部栏怎么实现
    本文地址:http://njwzjz.com/article/pjijjd.html

    其他资讯