当前位置: 首页> 就业园地

CSS实现小米商城头部导航栏

2019-09-03 15:50:42更新

模仿小米商城头部导航栏

通过相对布局实现小米商城头部导航栏样式

01.小米商城首页导航条

02.分析导航条结构

包含两个部分: 分别是头部导航,登陆|注册|消息通知,和购物车

外部还需要包裹一个div来进行布局

了解浮动对布局的影响

03. html基本结构


<div class="head">
        <div class="head_main">
           <a href="">小米商城</a>
           <span class="sep">|</span>
           <a href="">MIUI</a>
           <span class="sep">|</span>
           <a href="">IoT</a>
           <span class="sep">|</span>
           <a href="">云服务</a>
           <span class="sep">|</span>
           <a href="">金融</a>
           <span class="sep">|</span>
           <a href="">有品</a>
           <span class="sep">|</span>
           <a href="">有爱开放平台</a>
           <span class="sep">|</span>
           <a href="">正企服务</a>
           <span class="sep">|</span>
           <a href="">下载App</a>
           <span class="sep">|</span>
           <a href="">select Region</a>
        </div>
    </div>

04.样式编写

1. 基本css


*{

    margin:0;

    padding:0;

}



input{

    outline:none;

    border: 0;

}





a{

    text-decoration: none;

}

2. 头部样式


.head{

    width:100%;

    height:40px;

}

.head_main{

    width:1226px;

    height:40px;

    margin:auto;

}

3. 超链接样式


a{

    text-decoration: none;

    position: relative;

    margin-left : 10px;

    margin-right: 10px;

    color: #b0b0b0;

    font-size: 12px;

    line-height: 40px;

}

3. 超链接浮动


a{

    //...

    float:left

    //...

}

4.分隔符浮动


.sep{

    color:#696969;

    font-size:12px;

    float:left;

    line-height:40px;

}

5. 超链接样式修改


a:link{color:#A9A9A9;}

a:visited{color:#A9A9A9;}

a:hover{color:#FFFFFF;}

6. 右边浮动层


.head_left{

    float:left;

}

7. 左边浮动层


.head_right{

    right:left;

}

完整代码

css文件


*{
    margin:0;
    padding:0;
}
 
input{
    outline:none;
    border: 0;
}
 
 
a{
    text-decoration: none;
    position: relative;
    margin-left : 10px;
    margin-right: 10px;
    color: #b0b0b0;
    font-size: 12px;
    float: left;
    line-height: 40px;
 
}
a:link{color:#A9A9A9;}
a:visited{color:#A9A9A9;}
a:hover{color:#FFFFFF;}
 
.head{
    width:100%;
    height:40px;
    background-color:#333333;
}
.head_main{
    width: 1226px;
    height:40px;
    margin: auto;
}
.sep{
    color: #696969;
    font-size: 12px;
    float:left;
    line-height: 40px;
}
.head_left{
    float:left;
}
.head_right{
    float: right;
}
.head_right img{
    width:14px;
    height: 14px;
}
.head_cart1{
    color:#b0b0b0;
    line-height: 40px;
}
.head_cart2{
    font-size:12px;
    color: #b0b0b0;
}

html文件


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="css/css.css" rel="stylesheet">
</head>
<body>
    <div class="head">
        <div class="head_main">
            <div class="head_left">
                   <a href="">小米商城</a>
                   <span class="sep">|</span>
                   <a href="">MIUI</a>
                   <span class="sep">|</span>
                   <a href="">IoT</a>
                   <span class="sep">|</span>
                   <a href="">云服务</a>
                   <span class="sep">|</span>
                   <a href="">金融</a>
                   <span class="sep">|</span>
                   <a href="">有品</a>
                   <span class="sep">|</span>
                   <a href="">小爱开放平台</a>
                   <span class="sep">|</span>
                   <a href="">政企团购</a>
                   <span class="sep">|</span>
                   <a href="">资质证照</a>
                   <span class="sep">|</span>
                   <a href="">下载app</a>
                   <span class="sep">|</span>
                   <a href="">select Region</a>
            </div>
            <div class="head_right">
                <div>
                    <a href="">登陆</a>
                    <span class="sep">|</span>
                    <a href="">注册</a>
                    <a href="">消息通知</a>
                    <span class="head_cart1"><img src="images/cart.png" ></span>
                    <span class="head_cart2">购物车(0)</span>
                </div>
            </div>
        </div>
    </div>
   
</body>
</html>

首页 课程设置 师资力量 学习园地 就业园地 关于我们

地址:高新园区黄浦路439号科技创业大厦3楼

咨询热线:0411-39919991

版权所有 © 2008-2015 大连高新园区爱尚教育科技培训学校

辽ICP备14014403号-6