作业:完成常用导航布局案例

原创2019-06-27 12:40:37112
摘要:<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>淘宝导航</title>     
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>淘宝导航</title>
    <link rel="stylesheet" type="text/css" href="index.css">
    <link rel="stylesheet" type="text/css" href="CSS\font-awesome-4.7.0\css\font-awesome.min.css">
</head>
<body>
<div>
    <div>
        <div>
            <a href="">中国大陆&nbsp;&nbsp;<i class="fa fa-angle-down"></i></a>
            <a href="" style="color: #FF5000;">亲,请登陆</a>
            <a href="">免费注册</a>
            <a href="">手机逛淘宝</a>
        </div>
        <div>
            <a href="">我的淘宝<i class="fa fa-angle-down"></i></a>
            <a href=""><span class="fa fa-cart-plus"></span>&nbsp;&nbsp;购物车</a>
            <a href=""><span class="fa fa-star"></span>&nbsp;&nbsp;收藏夹<i class="fa fa-angle-down"></i></a>
            <a href="">商品分类</a>
            <a href="">卖家中心<i class="fa fa-angle-down"></i></a>
            <a href="">联系客服<i class="fa fa-angle-down"></i></a>
            <a href="">网站导航<i class="fa fa-angle-down"></i></a>
        </div>
    </div>
    <div></div>
</div>
</body>
</html>
*{
    margin:0px;
    padding:0px;
}
a{
    text-decoration: none;
}
.clear{
    clear:both;
}
.header{
    width: 100%;
    /*height:40px;*/
    background-color:#F5F5F5;
}
.header_content{
    width:1200px;
    /*height:40px;*/
    margin:0px auto;
    line-height:40px;
}
.header_left{
    /*width:300px;*/
    height:40px;
    float:left;
}
.header_content a:hover{
    color:#FF5000;
}
.header_left a{
    margin-right:5px;
}
.header_right{
/*    width:600px;*/
    height:40px;
/*    background-color:pink;*/
    float:right;
}
.header_a{
    display:inline-block;
    height:40px;
    width:90px;
    text-align:center;
}
.header_a:hover{
    background-color:#fff;
}

学习到了常用导航栏的div布局以及小图标的引入,常用导航栏的写法

批改老师:天蓬老师批改时间:2019-06-27 13:03:01
老师总结:你的这个作业 ,如果配张图就更好了, 下一次提交建议加上图片

发布手记

热门词条