手记 / 完成天猫商城导航

完成天猫商城导航

2天前7浏览0评论
<div class="header">
    <div class="content">
        <div class="left">
            <span>喵,欢迎来天猫</span>
            <a href="">请登录</a>
            <a href="">免费注册</a>
        </div>
        <ul class="right">
            <li><a href="">我的淘宝</a>
                <div class="my-goods">
                    <a href="">已买到的宝贝</a><br>
                    <a href="">已卖出的宝贝</a>
                </div>
            </li>
            <li><a href=""><i class="fa fa-heart"></i>我关注的品牌</a></li>
            <li><a href=""><i class="fa fa-shopping-cart"></i>购物车0件</a></li>
            <li><a href="">收藏夹</a>
                <div class="my-collection">
                    <a href="">收藏的宝贝</a><br>
                    <a href="">收藏的店铺</a>
                </div>
            </li>
            <li>|</li>
            <li><a href=""><i class="fa fa-android"></i>手机版</a></li>
            <li><a href="">淘宝网</a></li>
            <li><a href="">网页导航</a>
                <div class="website">
                    <dl class="site-hot">
                        <dt style="color:#F6791A;">热点推荐 Hot</dt>
                        <dd><a href="">天猫超市</a></dd>
                        <dd><a href="">天猫超市</a></dd>
                        <dd><a href="">天猫超市</a></dd>
                        <dd><a href="">天猫超市</a></dd>
                        <dd><a href="">天猫超市</a></dd>
                        <dd><a href="">天猫超市</a></dd>
                        <dd><a href="">天猫超市</a></dd>
                        <dd><a href="">天猫超市</a></dd>
                        <dd><a href="">天猫超市</a></dd>
                        <dd><a href="">天猫超市</a></dd>
                        <dd><a href="">天猫超市</a></dd>
                        <dd><a href="">天猫超市</a></dd>
                        <dd><a href="">天猫超市</a></dd>
                        <dd><a href="">天猫超市</a></dd>
                        <dd><a href="">天猫超市</a></dd>
                    </dl>
                    <dl class="site-market">
                        <dt style="color:#2263D4;">行业市场 Market</dt>
                        <dd><a href="">天猫超市</a></dd>
                        <dd><a href="">天猫超市</a></dd>
                        <dd><a href="">天猫超市</a></dd>
                        <dd><a href="">天猫超市</a></dd>
                        <dd><a href="">天猫超市</a></dd>
                        <dd><a href="">天猫超市</a></dd>
                        <dd><a href="">天猫超市</a></dd>
                        <dd><a href="">天猫超市</a></dd>
                        <dd><a href="">天猫超市</a></dd>
                        <dd><a href="">天猫超市</a></dd>
                        <dd><a href="">天猫超市</a></dd>
                        <dd><a href="">天猫超市</a></dd>
                        <dd><a href="">天猫超市</a></dd>
                        <dd><a href="">天猫超市</a></dd>
                        <dd><a href="">天猫超市</a></dd>
                    </dl>
                    <dl class="site-help">
                        <dt>服务指南 Help</dt>
                        <dd><a href="">帮助中心</a></dd>
                        <dd><a href="">帮助中心</a></dd>
                        <dd><a href="">帮助中心</a></dd>
                        <dd><a href="">帮助中心</a></dd>
                    </dl>
                </div>
            </li>
        </ul>
    </div>
</div>
*{margin: 0px;padding: 0px;}
ul{list-style: none;}
a{text-decoration: none;color:#333;}
body{font-size:12px;}
.header{height:35px;line-height: 35px;background: #e0e0e0;}
.content{width: 1300px;margin:0 auto;color:#333;}
.content i{color:red;margin-right:4px;}
.content a:hover{color:red;}
.left{float:left;}
.left a{margin-left:15px;}
.right{float:right;}
.right li{float:left;margin-right: 15px;position: relative;}
.right li:hover div{display: block;box-shadow: 2px 2px 2px #ccc;}
.my-goods,.my-collection{line-height:23px;padding:6px 0;display:none;width: 100px;text-align: center;position: absolute;top:35px;left:0;}
.website{width: 1240px;position: absolute;right:0;top:35px;display: none;padding:20px;line-height:30px;border:1px solid #ccc;}
.website dl{float: left;}
.website dl dt{width:100%;margin-bottom: 10px;font-size:16px;}
.website dl dd{float: left;line-height:30px;}
.site-hot{width:500px;}
.site-hot dd{width: 100px;}
.site-market{width:460px;padding-left:50px;}
.site-market dd{width: 92px;}
.site-help{padding-left:40px;width: 130px;}
.site-help dd{width:65px;}

QQ图片20181114103819.png

相关标签:HTMLCSS
    0推荐

      作者的热门手记

      PHP中文网

      未登录