[CSS3 Practice] Learn Apple Navigator Bar

最新推荐文章于 2024-10-08 11:32:20 发布

LINJY6

最新推荐文章于 2024-10-08 11:32:20 发布

阅读量417

点赞数

分类专栏： CSS3 Practice 文章标签： css3 导航苹果

本文链接：https://blog.csdn.net/linjiayuqazwsx/article/details/50207851

版权

CSS3 Practice 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Reference:

Apple Website- Navigation Bar

Codes:

<nav>
    <ul>
        <li><a href="#"></a></li>
        <li><a href="#">Mac</a></li>
        <li><a href="#">iPad</a></li>
        <li><a href="#">iPhone</a></li>
        <li><a href="#">Watch</a></li>
        <li><a href="#">TV</a></li>
        <li><a href="#">Music</a></li>
        <li><a href="#">Support</a></li>
    </ul>
</nav>

body,html,nav,ul,li,div,a{margin:0; padding:0;}
/*取消li前面的dot*/
li,a{list-style-type: none}
/*取消标签a的自定义模式*/
a{color:rgb(255, 255, 255); text-decoration: none;}
a:hover{
    color:rgba(244, 244, 255, 0.8);
}
nav{ 
    position: relative;
    /*width*/
    min-width:1024px;
    height:44px;  
    background:rgba(0, 0, 0, 0.8);
    color: rgb(255, 255, 255);  
    font-family: "Myriad Set Pro","Lucida Grande","Helvetica Neue","Helvetica","Arial","Verdana","sans-serif";
    font-size: 16px;
    font-weight: 400;
}
ul{
    position: relative;
    max-width:1000px;
    /*区域居中*/
    margin:0 auto;
}
li{
    /*让块元素靠左边
      在这里没有清除浮动*/
    float: left;
    margin-right:70px;
    /*让字垂直居中*/
    line-height:44px;
}
li:nth-child(1){
    width:45px;
    height:44px;
    background-image:url(1.jpg);
}