博客列表 >html和css的VIP教程作业淘宝导航

html和css的VIP教程作业淘宝导航

渡的博客
渡的博客原创
2019年01月17日 00:46:44710浏览

CSS页面:

*{margin: 0px;padding: 0px;}


.box1{width: 100%;background-color: darkgrey}

.content{width: 1200px;margin: 0px auto;}

.href1:hover{background-color: blanchedalmond;color: red;}

.content a{display: inline-block; margin-right: 5px;text-align: center;padding-top: 10px}

.left{height: 40px;float: left;}

.right{height: 40px;float: right;}

.clear{clear: both;}

a{text-decoration: none;color: black;font-size: 13px}


html页面:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" type="text/css" href="css/style.css">

    <link rel="stylesheet" type="text/css" href="css\font-awesome-4.7.0\css\font-awesome.min.css">

    <title>淘宝导航站模拟</title>

</head>

<body>

    <div class="box1">

    <div class="content">

        <div class="left">

          <a href="" class="href1">中国大陆&nbsp;&nbsp;<i class="fa fa-angle-down"></i></a>

          <a href="" class="href">亲,请登录</a>

          <a href="" class="href">免费注册</a>

          <a href="" class="href">手机逛淘宝</a>

           

        </div>

        <div class="right">

                <a href="" class="href">我的淘宝&nbsp;&nbsp;<i class="fa fa-angle-down"></i></a>

                <a href="" class="href"><span class="fa fa-shopping-basket"></span> 购物车</a>

                <a href="" class="href"><span class="fa fa-heart"></span>收藏夹&nbsp;&nbsp;<i class="fa fa-angle-down"></i></a>

                <a href="" class="href">商品分类</a>

                <a href="" class="href">卖家中心&nbsp;&nbsp;<i class="fa fa-angle-down"></i></a>

                <a href="" class="href">联系客服&nbsp;&nbsp;<i class="fa fa-angle-down"></i></a>

                <a href="" class="href">网站导航&nbsp;&nbsp;<i class="fa fa-angle-down"></i></a>

         

           

        </div>

        <div class="clear"></div>

    </div>

    </div>

</body>

</html>


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议