淘宝导航栏作业

Original 2019-01-12 18:03:41 138
abstract:<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0&qu

<!DOCTYPE html>

<html>

<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">

    <title>淘宝导航</title>

    <!-- Latest compiled and minified CSS -->

    <link rel="stylesheet" href="static/css/index.css">

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

<style>

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

li{list-style:none;}

.clear{clear: both;}

.header{background-color:#f5f5f5;width:100%;}

.header_box{width: 1200px;margin:0px auto;line-height: 35px;}

.header_box_left{float: left;}

.header_box_right{float: right;}

.header_box a:hover{color:#FF5000;}

.header_box a {width:85px;text-decoration: none;color: #3C3C3C;font-size: 12px;text-align: center;display: inline-block;height:40px;}

.header_box_a{position: relative;}

.header_box_a ul {border: 1px solid #f5f5f5;display:none;border-top:none;}

.header_box_a:hover{background-color:white;}

.header_box_a:hover ul{display:block;position: absolute;width: 85px;}

.header_box_a ul li{color:#6c6c6c;height: 30px;line-height: 30px;text-align: left;padding: 0px 3px;margin:3px 3px;}

.header_box_a ul li:hover{background-color: #f5f5f5;}

</style>

</head>

<body>

    <div>

        <div>

            <div>

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

                <a href="" style="color:#FF5000;">亲,请登录</a>

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

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

            </div>

            <div>

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

                    <ul>

                        <li>已买到的宝贝</li>

                        <li>我的足迹</li>

                    </ul>

                </a>

                <a href=""><i class="fa fa-shopping-cart" aria-hidden="true" style="color:#FF5000;"></i>&nbsp;购物车&nbsp;&nbsp;<i class="fa fa-angle-down" aria-hidden="true"></i></a>

                <a href=""><i class="fa fa-star" aria-hidden="true"></i>&nbsp;收藏夹&nbsp;&nbsp;<i class="fa fa-angle-down" aria-hidden="true"></i>

                    <ul>

                        <li>已买到的宝贝</li>

                        <li>我的足迹</li>

                    </ul>

                </a>

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

                <span>|</span>

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

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

                <a href=""><i class="fa fa-bars" aria-hidden="true" style="color:#FF5000;"></i>&nbsp;&nbsp;网站导航&nbsp;&nbsp;<i class="fa fa-angle-down" aria-hidden="true"></i></a>

            </div>

            

        </div>

        <div></div>

    </div>

</body>

</html>


Correcting teacher:天蓬老师Correction time:2019-01-13 10:38:55
Teacher's summary:class="fa fa-angle-down" , .header_box_a , 请在同一个项目, 保持风格一致, 不要一会用下划线, 一会用连接线, 推荐全使用连接线'-'

Release Notes

Popular Entries