返回作业:完成常用......登陆

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

.2019-06-27 12:40:3736
<!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布局以及小图标的引入,常用导航栏的写法

最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网