第一个做的仿淘宝导航相对完整

Original 2019-04-17 11:54:18 237
abstract:<!DOCTYPE html><html><head><meta charset=utf-8><link rel="stylesheet" type="text/css" href="demo/css/index.css"><link rel="styleshee

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8>

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

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

<style type="text/css" media="screen">

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

a{text-decoration:none;color:#6c6c6c;font-size:13px;}

li{list-style:none;}

.clear{clear:both;}

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

.header_content{width:1200px;margin:0px auto;line-height:40px;}

.header_left{height:40px;backgaround-color:pink;float:left;}

.header_left a{margin-right:3px;}

.header_left a:hover{color:#FF5100;}

.header_right{width:700px;height:40px;float:right;}

.header_a{display: inline-block;height:40px;width:90px;text-align:center;position:relative;}

.header_a:hover{background-color:#fff;}

.header_a ul{display: none;border:1px solid #f5f5f5;position:absolute;border-top:none;width:100px;}

.header_a:hover ul{display:block;}

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

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

</style>

    <title>第一个做的仿淘宝导航相对完整</title>


</head>

<body>

<div class='header'>

    <div class="header_content">

        <div class="header_left">

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

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

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

           <a href="">手机登录</a>

        </div>

        <div class="header_right">

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

            <ul>

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

                <li>我的足迹</li>


            </ul>


            </a>

            <a href="" class="header_a"><span class="fa fa-shopping-cart" style="color:#FF5100"></span>&nbsp;购物车&nbsp;<i class="fa fa-angle-down"></i></a>

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

<ul>

                <li>收藏的宝贝</li>

                <li>收藏的店铺</li>


            </ul>


            </a>

            <a href="" class="header_a">商品分类&nbsp;<i class='fa fa-angle-down'></i></a>

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

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

    <ul>

                <li>消费者客服</li>

                <li>卖家客服</li>


            </ul>

            </a>

            <a href="" class="header_a"><span class="fa fa-tasks" style="color:#FF5100"></span>&nbsp;站长导航 &nbsp;<i class="fa fa-angle-down"></i></a>

        </div>

    </div>

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

</div>

</body>

</html>


Correcting teacher:查无此人Correction time:2019-04-17 13:54:25
Teacher's summary:完成的不错。css3是页面的灵魂,要好好练习,继续加油。

Release Notes

Popular Entries