寒假作业8

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一号店主页</title>
    <style>
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        header{
            margin-top: -10px;
            height: 30px;
            padding:5px;
            background: linear-gradient(gainsboro,ghostwhite);
            overflow: hidden;
        }
        header span{
            color: dimgray;
            position: absolute;
            left: 50px;
            padding-top: 6px;
            font-size: 12px;
            font-weight: lighter;
        }
        .顶部导航 .注册{
            color: red;
        }
        .顶部导航 li{
            display: inline-block;
            font-size: 12px;
            font-weight: lighter;
            color:dimgray;
            margin: 0px 5px;
            vertical-align: top;
        }
        .顶部导航{
            float: right;
            position: absolute;
            right: 60px;
            margin: 6px;
            overflow: hidden;
        }
        .顶部导航 li a{
            color: dimgray;
        }
        .菜单导航 li{
            display: inline-block;
            margin: 10px;
            font-size: 20px;
        }
        .顶部导航 a:hover{
            color: red;
        }
        header div{
            width: 130px;
            border: 1px solid lightgray;
            position: relative;
            top: 10px;
            left: -40px;
            background-color: white;
            display: none;
 
        }
        header div p{
            text-align: center;
        }
        header div p a{
            color: gray;
            font-weight: lighter;
            font-size: 10px;
        }
        .顶部导航 li:nth-child(4){
            width: 70px;
        }
        .顶部导航 li:nth-child(4):hover div{
            display: block;
        }
        section{
            margin-top: -100px;
        }
        .搜索 .loginlogo{
            position: relative;
            top: 50px;
            left: 50px;
        }
        .搜索 form{
            width: 600px;
            margin: 0px auto;
            position: relative;
            top: -20px;
        }
        .搜索 form input:nth-child(1){
            width: 400px;
            height: 40px;
            border: 2px solid #ff3c3c;
            text-indent: 1em;
        }
        .搜索 form input:nth-child(2){
            width: 90px;
            height: 40px;
            background-color: #ff3c3c;
            border: 2px solid #ff3c3c;
            margin-left: -5px;
            vertical-align: top;
            color: white;
            font-weight: bolder;
            font-size: 17px;
        }
        .搜索 form ul{
            margin-left: -40px;
            margin-top: 0px;
        }
        .搜索 form ul li{
            display: inline-block;
            padding-right: 10px;
        }
        .搜索 form ul li a{
            font-size: 13px;
            color: #57565f;
        }
        .搜索 span{
            padding: 10px 20px;
            border: 1px solid gainsboro;
            position: relative;
            left: 1050px;
            top: -80px;
            background-color:ghostwhite;
        }
        .搜索 span a{
            color: #57565f;
            margin-left: 20px;
 
        }
        .分类{
            border-bottom: 3px solid orangered;
            margin-top: -30px;
            margin-left: 20px;
            margin-right: 20px;
        }
        h3{
            width: 200px;
            padding: 10px 15px;
            text-indent: 1em;
            background-color: red;
            color: white;
            float: left;
            overflow: hidden;
            position: relative;
            top: 0px;
        }
        .分类 img{
            position: absolute;
            right: 50px;
            top: 180px;
        }
        .分类 nav{
            position: relative;
            top: 15px;
        }
        .菜单导航 a{
            color: black;
            font-weight: bolder;
        }
        .菜单导航 .hong{
            color: red;
        }
        .左边导航{
            width: 229px;
            height: 425px;
            border: 1px solid red;
            background-color: brown;
            position: relative;
            left: -230px;
            overflow: hidden;
        }
        .左边导航 ul{
            float: left;
            padding-left: 20px;
            margin: 0px;
        }
        .左边导航 ul li{
            line-height: 42px;
            font-size: 15px;
            color: white;
            transition: all 1s ease-in-out;
        }
        .左边导航 ul li:hover{
            transform: translateX(15px);
        }
        .左边导航 ul li img:nth-child(2){
            float: right;
            position: relative;
            left: 15px;
            top: 15px;
        }
        .中部{
            width: 650px;
            height: 425px;
            margin: 0px auto;
            position: relative;
            top: -426px;
            left: -20px;
        }
        .中部 img:nth-child(1){
            width: 650px;
            height: 425px;
        }
        .中部 img:nth-child(2){
            position: relative;
            top: -250px;
        }
        .中部 img:nth-child(3){
            position: relative;
            top: -250px;
            left: 582px;
        }
        .中部 ul li{
            display: inline-block;
            margin: 10px;
            background-color: gray;
            width: 20px;
            height: 20px;
            text-align: center;
            padding: 2px;
            border-radius: 15px;
            font-weight: bolder;
            position: relative;
            top: -140px;
            left: 240px;
        }
        .中部 ul li a{
            color: black;
        }
        .中部 ul li:hover{
            background-color: tomato;
        }
        .中部 ul li a:hover{
            color: white;
        }
        .右边导航{
            width: 270px;
            height: 425px;
            border: 1px solid gray;
            border-top: none;
            position: absolute;
            right: 10px;
            top: 230px;
        }
        .one{
            width: 270px;;
            height: 40px;
            border: 1px solid gray;
            border-top: none;
        }
        .one h2{
            display: inline;
            position: relative;
            top: 5px;
            left: 15px;
        }
        .one a{
            position: relative;
            left: 160px;
            color:gray;
        }
        .one a:hover{
            color: red;
        }
        .two {
            width: 270px;
            height: 170px;
            border: 1px solid gray;
        }
        .two ul{
            position: relative;
            left: -50px;
        }
        .two ul li{
            width: 300px;
            margin: 20px;
            line-height: 10px;
        }
        .two ul a{
            color: gray;
            font-weight: lighter;
            font-size: 14px;
        }
        .two span{
            font-weight: bolder;
            font-size: 15px;
        }
        .two ul a:hover{
            color: red;
        }
        .thr{
            width: 270px;
            height: 30px;
            border: 1px solid gray;
        }
        .thr p{
            font-size: 18px;
            font-weight: bolder;
            margin: 5px;
            margin-left: 20px;
 
        }
        .for{
            padding-left: 10px;
        }
        .for p{
            font-size: 13px;
            position: relative;
            top: -10px;
        }
        .for img{
            width: 250px;
            height: 150px;
            position: relative;
            top: -20px;
        }
        #nb1 .tu1{
            background-color: #d8eefc;
            width: 230px;
            border: 1px solid gray;
        }
        #nb1 img{
            margin: 20px;
            transition: all 1s ease-in-out;
        }
        #nb1 img:hover{
            transform: scale(1.2);
        }
        #nb1 .tu1 p{
            color: red;
            text-align: center;
            margin-top: -10px;
        }
        #nb1 .tu1 p span{
            background-color: red;
            color: white;
        }
        .tu2 ul{
            display: inline-block;
            width: 194px;
            height: 260px;
            border: 1px solid gray;
            margin-top: 0px;
            margin-left: -5px;
            vertical-align: top;
        }
        .tu2 ul:nth-child(2){
            margin-top: 3px;
        }
        .tu2 ul li:nth-child(1){
            margin-left: -10px;
        }
        .tu2 ul li:nth-child(2){
            font-weight: bolder;
            text-align: center;
            text-indent: -2em;
        }
        .tu2 ul li:nth-child(2) a{
            color: black;
            font-size: 15px;
        }
        .tu2 ul li:nth-child(3) a{
            color: gray;
            font-size: 12px;
        }
        .tu2 ul li:nth-child(4){
            text-align: center;
            text-indent: -3em;
            color: gray;
        }
        .tu2 ul li:nth-child(4) span{
            color: red;
            font-size: 20px;
            font-weight: bolder;
        }
        .tu2 ul li:nth-child(5){
            position: relative;
            top: -250px;
            left: -50px;
        }
        .tu2{
            position: relative;
            left: 235px;
            bottom: 261px;
        }
        .tu2 ul:nth-child(2){
            position: relative;
            top: -3px;
        }
 
        #nb1{
            margin-top: -400px;
            margin-left: 20px;
        }
        .aaa{
            width: 1175px;
            margin-left: 20px;
            position: relative;
            bottom: 270px;
        }
        #nb2{
            width: 1180px;
            height: 50px;
            border-bottom: orangered solid 2.5px;
            margin-top: -270px;
            margin-left: 19px;
        }
        #nb2 p{
            float: left;
            margin-left: 10px;
            margin-top: 10px;
        }
        #nb2 p span b{
            font-weight: bolder;
            font-size: 30px;
 
        }
        #nb2 ul{
            float: right;
            margin-top: 5px;
            margin-right: 10px;
        }
        #nb2 p span{
            margin: 10px;
            color: orangered;
            font-size: 23px;
        }
        #nb2 p span:nth-child(1){
            font-size: 18px;
            color: white;
        }
        #nb2 p{
            background: url("images/floor.png") no-repeat 7px 2px;
        }
        #nb2 ul li{
            display: inline-block;
            margin: 10px;
        }
        #nb2 ul li a{
            color: black;
            font-size: 15px;
            font-style: initial;
        }
        #nb2 ul li a:hover{
            color: orangered;
        }
        #nb3{
            width: 1330px;
        }
        #nb3 .tu1{
            width: 212px;
            margin-left: 20px;
        }
        #nb3 .tu1 img{
            margin-top: -8px;
        }
        #nb3 .aa{
            width: 172px;
            height: 190px;
            margin-left: 0px;
            margin-top: -10px;
            background-color: #d3e6da;
        }
        #nb3 .aa li{
            border-bottom: 2px dotted gray;
            margin-left: -37px;
            text-indent: 2em;
            padding-top: 20px;
        }
        #nb3 .aa li a{
            color: black;
            font-size: small;
            font-weight: lighter;
            line-height: 20px;
        }
        #nb3 .aa li a:hover{
            color: red;
        }
        #nb3 .tu2{
            width: 900px;
            position: relative;
            top: -485px;
        }
        #nb3 .bb{
            width: 200px;
            height: 235px;
            margin: -2px;
            border-left: none;
            border-top: none;
        }
        #nb3 .tu2 img{
            width: 165px;
            height: 135px;
        }
        #nb3 .tu2 .bb li{
            margin: 10px;
            text-align: center;
            text-indent: -3em;
        }
        #nb3 .tu2 .bb li a{
            font-size: 13px;
            color: black;
        }
        #nb3 .tu2 .bb li:nth-child(2){
            color: red;
        }
        #nb3 .tu2 img:hover{
 
            transform: scale(1.2);
            transition: all 1s ease-in-out ;
        }
        #nb3 .tu3{
            float: right;
            position: relative;
            top: -945px;
            right: 130px;
        }
        #nb3 .tu3 img{
            width: 250px;
            height: 236px;
            margin: -5px;
        }
        #nb4{
            width: 1190px;
            height: 50px;
            border-bottom: orangered solid 2.5px;
            position: relative;
            top: -470px;
            margin-left: 19px;
        }
        #nb4 p{
            float: left;
            margin-left: 10px;
            margin-top: 10px;
        }
        #nb4 p span b{
            font-weight: bolder;
            font-size: 30px;
 
        }
        #nb4 ul{
            float: right;
            margin-right: -120px;
            margin-top: 5px;
        }
        #nb4 p span{
            margin: 10px;
            color: orangered;
            font-size: 23px;
        }
        #nb4 p span:nth-child(1){
            font-size: 18px;
            color: white;
        }
        #nb4 p{
            background: url("images/floor.png") no-repeat 7px -2px;
        }
        #nb4 ul li{
            display: inline-block;
            margin: 10px;
        }
        #nb4 ul li a{
            color: black;
            font-size: 15px;
            font-style: initial;
        }
        #nb4 ul li a:hover{
            color: orangered;
        }
        #nb5{
            width: 1330px;
 
            position: relative;
            top: -877px;
        }
        #nb5 .tu1{
            width: 212px;
            margin-left: 20px;
        }
        #nb5 .tu1 img{
            width: 220px;
            height: 290px;
            margin-bottom: 5px;
        }
        #nb5 .aa{
            width: 172px;
            height: 190px;
            margin-left: 0px;
            margin-top: -10px;
            background-color: #d3e6da;
        }
        #nb5 .aa li{
            border-bottom: 2px dotted gray;
            margin-left: -37px;
            text-indent: 2em;
            padding-top: 20px;
        }
        #nb5 .aa li a{
            color: black;
            font-size: small;
            font-weight: lighter;
            line-height: 20px;
        }
        #nb5 .aa li a:hover{
            color: red;
        }
        #nb5 .tu2{
            width: 900px;
            position: relative;
            top: -485px;
        }
        #nb5 .bb{
            width: 200px;
            height: 235px;
            margin: -2px;
            border-left: none;
            border-top: none;
        }
        #nb5 .tu2 img{
            width: 165px;
            height: 135px;
        }
        #nb5 .tu2 .bb li{
            margin: 10px;
            text-align: center;
            text-indent: -3em;
        }
        #nb5 .tu2 .bb li a{
            font-size: 15px;
            color: black;
        }
        #nb5 .tu2 .bb li:nth-child(2){
            color: red;
        }
        #nb5 .tu2 img:hover{
 
            transform: scale(1.2);
            transition: all 1s ease-in-out ;
        }
        #nb5 .tu3{
            float: right;
            position: relative;
            top: -945px;
            right: 120px;
        }
        #nb5 .tu3 img{
            width: 250px;
            height: 236px;
            margin: -5px;
        }
        .qqq{
            width: 1200px;
            position: relative;
            bottom:1810px;
            left: 20px;
        }
        #nb6{
            width: 1200px;
            height: 50px;
            border-bottom: orangered solid 2.5px;
            position: relative;
            top: -1810px;
            margin-left: 19px;
        }
        #nb6 p{
            float: left;
            margin-left: 10px;
            margin-top: 10px;
        }
        #nb6 p span b{
            font-weight: bolder;
            font-size: 30px;
 
        }
        #nb6 ul{
            float: right;
            margin-right: 10px;
            margin-top: 5px;
        }
        #nb6 p span{
            margin: 10px;
            color: orangered;
            font-size: 23px;
        }
        #nb6 p span:nth-child(1){
            font-size: 18px;
            color: white;
        }
        #nb6 p{
            background: url("images/floor.png") no-repeat 7px -2px;
        }
        #nb6 ul li{
            display: inline-block;
            margin: 10px;
        }
        #nb6 ul li a{
            color: black;
            font-size: 15px;
            font-style: initial;
        }
        #nb6 ul li a:hover{
            color: orangered;
        }
        #nb7{
            width: 1330px;
            position: relative;
            top: -1810px;
 
        }
        #nb7 .tu1{
            width: 212px;
            margin-left: 20px;
        }
        #nb7 .tu1 img{
            width: 210px;
            height: 280px;
            margin-bottom: 5px;
        }
        #nb7 .aa{
            width: 172px;
            height: 190px;
            margin-left: 0px;
            margin-top: -10px;
            background-color: #d3e6da;
        }
        #nb7 .aa li{
            border-bottom: 2px dotted gray;
            margin-left: -37px;
            text-indent: 2em;
            padding-top: 20px;
        }
        #nb7 .aa li a{
            color: black;
            font-size: small;
            font-weight: lighter;
            line-height: 20px;
        }
        #nb7 .aa li a:hover{
            color: red;
        }
        #nb7 .tu2{
            width: 900px;
            position: relative;
            top: -485px;
        }
        #nb7 .bb{
            width: 200px;
            height: 235px;
            margin: -2px;
            border-left: none;
            border-top: none;
        }
        #nb7 .tu2 img{
            width: 165px;
            height: 135px;
        }
        #nb7 .tu2 .bb li{
            margin: 10px;
            text-align: center;
            text-indent: -3em;
        }
        #nb7 .tu2 .bb li a{
            font-size: 15px;
            color: black;
        }
        #nb7 .tu2 .bb li:nth-child(2){
            color: red;
        }
        #nb7 .tu2 img:hover{
 
            transform: scale(1.2);
            transition: all 1s ease-in-out ;
        }
        #nb7 .tu3{
            float: right;
            position: relative;
            top: -945px;
            right: 120px;
        }
        #nb7 .tu3 img{
            width: 250px;
            height: 236px;
            margin: -5px;
        }
        #nb8{
            width: 1200px;
            position: relative;
            left: 100px;
            top: -2280px;
        }
        #nb8 ul{
            display: inline-block;
            margin: 40px;
        }
        #nb8 ul li:nth-child(1){
            text-align: center;
        }
        #nb8 ul li:nth-child(2){
            text-align: center;
            font-weight: bolder;
            font-size: 20px;
        }
        #nb8 ul li:nth-child(3){
            font-weight: lighter;
            color: gray;
        }
        #nb8 img{
            transition: all 3s ease-in-out;
        }
        #nb8 img:hover{
            transform: rotate(360deg);
        }
        #nb9{
            width: 1200px;
            height: 230px;
            border-bottom: 1px solid gray;
            position:relative;
            top: -2300px;
            left: 20px;
 
        }
        #nb9 dl{
            display: inline-block;
            width: 150px;
            height: 200px;
            vertical-align: top;
            margin-left: 10px;
        }
        #nb9 dl dt {
            text-indent: 2.5em;
            margin-bottom: 20px;
            font-weight: bolder;
        }
        #nb9 dl dt a{
            color: black;
        }
        #nb9 dl dt a:hover{
            text-decoration:underline;
        }
        #nb9 dl dd a{
            font-weight: lighter;
            font-size: 13px;
            line-height: 30px;
            color: black;
        }
        #nb9 dl dd a:hover{
            color: red;
        }
        #nb9 .las{
            position: relative;
            left: 850px;
            top: -230px;
        }
        #nb9  .las img:nth-child(1){
            float: left;
            margin-right: 20px;
        }
        #nb9  .las ul li{
            line-height: 30px;
        }
        #nb9 .las ul a{
            color: gray;
            margin-left: -10px;
        }
        #nb9 .las ul a:hover{
            color: red;
        }
        #nb9 .las ul li:nth-child(2){
            position: relative;
            top: 10px;
        }
        #nb9 .las ul li:nth-child(3){
            font-size: 13px;
            position: relative;
            top: 15px;
        }
        #nb9 .las ul li:nth-child(4){
            font-size: 25px;
            color: red;
        }
        section{
            width: 1200px;
            height: 3300px;
            overflow: hidden;
            position: relative;
            top: 100px;
        }
        #sb p {
            font-size: 12px;
            text-align: center;
        }
        #sb ul{
            margin-left: 100px;
        }
        #sb ul li{
            display: inline-block;
        }
        #sb ul li img{
            width: 98px;
            height: 33px;
            border: 1px solid gainsboro;
            border-radius: 8px;
            position: relative;
            left: 100px;
        }
        #sb{
            width: 1200px;
            margin: 0px auto;
        }
 
    </style>
</head>
<body>
<header>
<span>送货至:湖南衡阳</span>
<ul class="顶部导航">
    <li>你好! 请<a href="#">登录 </a><a href="#" class="注册">免费注册</a>|</li>
    <li><a href="#">我的订单</a>|</li>
    <li><a href="#">收藏夹 </a><img src="img/t_arrow.gif"></li>
    <li><a href="#">客户服务</a><img src="img/t_arrow.gif"></li>
        <div>
            <p><a href="#">客服服务</a></p>
            <p><a href="#">客服服务</a></p>
            <p><a href="#">客服服务</a></p>
        </div>
        </li>
    <li><a href="#">网站导航</a><img src="img/t_arrow.gif">|</li>
    <li>关注我们:<a href="#"><img src="img/sh1.png"></a> <a href="#"><img src="img/sh2.png"></a> |</li>
    <li><a href="#"> 手机版</a> <img src="img/s_tel.png"> </li>
</ul>
</header>
<section>
    <div class="搜索">
    <img class="loginlogo" src="img/loginlogo.jpg">
        <form method="get" action="#">
            <a href="搜索页面.html" target="_blank" style="border: none">
                <input  type="search" placeholder="请输入关键字">
            <input  type= submit value="搜索" ></a>
            <ul>
                <li><a href= "搜索页面.html" target="_blank">咖啡</a> </li>
                <li><a href="搜索页面.html" target="_blank"> iphone 6S</a> </li>
                <li><a href="搜索页面.html" target="_blank">新鲜美食</a> </li>
                <li><a href="搜索页面.html" target="_blank">蛋糕</a> </li>
                <li><a href="搜索页面.html" target="_blank">日用品</a> </li>
                <li><a href="搜索页面.html" target="_blank">连衣裙</a> </li>
            </ul>
        </form>
        <span>
        <img src="img/car.png"><a href="#">购物车</a>
    </span>
    </div>
    <div class="分类">
        <h3>全部商品分类</h3>
        <nav>
            <ul class="菜单导航">
                <li><a href="#" class="hong">首页</a></li>
                <li><a href="#" class="hong">自营超市</a></li>
                <li><a href="#">一号团</a></li>
                <li><a href="#">一号超市</a></li>
                <li><a href="#">女装</a></li>
                <li><a href="#">美妆</a></li>
                <li><a href="#">一号海购</a></li>
                <li><a href="#">团购</a></li>
            </ul>
        </nav>
        <img src="img/phone.png">
    </div>
    <div class="左边导航">
        <ul>
            <li><img src="img/nav1.png">   进口食品、生鲜<img src="img/n_arrow.gif"></li>
            <li><img src="img/nav2.png">    食品、饮料、酒<img src="img/n_arrow.gif"></li>
            <li><img src="img/nav3.png">   母婴、玩具、童装<img src="img/n_arrow.gif"></li>
            <li><img src="img/nav4.png">   家居、家庭清洁、纸品<img src="img/n_arrow.gif"></li>
            <li><img src="img/nav5.png">      美妆、个人护理、洗护<img src="img/n_arrow.gif"></li>
            <li><img src="img/nav6.png">   女装、内衣、中老年<img src="img/n_arrow.gif"></li>
            <li><img src="img/nav7.png">   鞋靴、箱包、腕表配饰<img src="img/n_arrow.gif"></li>
            <li><img src="img/nav8.png">   男装、运动<img src="img/n_arrow.gif"></li>
            <li><img src="img/nav9.png">    手机、小家电、电脑<img src="img/n_arrow.gif"></li>
            <li><img src="img/nav10.png">   礼品、充值<img src="img/n_arrow.gif"></li>
        </ul>
    </div>
    <div class="中部">
        <img src="img/ban1.jpg">
        <img src="img/b_left.png">
        <img src="img/b_right.png">
        <ul>
            <li><a href="#">1</a> </li>
            <li><a href="#">2</a> </li>
            <li><a href="#">3</a> </li>
        </ul>
    </div>
    <div class="右边导航">
        <div class="one">
            <h2>快讯</h2>
            <a href="#">更多></a>
        </div>
        <div class="two">
            <ul>
                <li><span>【特惠】</span><a href="#">掬一轮明月 表无尽惦念</a> </li>
                <li><span>【公告】</span><a href="#">好奇金装成长裤新品上市</a> </li>
                <li><span>【特惠】</span><a href="#">大牌闪购 · 抢!</a> </li>
                <li><span>【公告】</span><a href="#">发福利 买车就抢千元油卡</a> </li>
                <li><span>【公告】</span><a href="#">家电低至五折</a> </li>
            </ul>
        </div>
        <div class="thr">
            <p>1号钱包</p>
        </div>
        <div class="for">
            <p>收益日结,收益赚High!</p>
            <img src="img/oneAD.jpg">
        </div>
    </div>
    <div id="nb1">
        <div class="tu1">
            <img src="img/l_img.jpg">
            <p>
                <span>¥53.00</span>   16R
            </p>
        </div>
        <div class="tu2">
            <ul>
                <li><img src="img/hot1.jpg"></li>
                <li><a href="#">德国进口</a> </li>
                <li><a href="#">德亚全脂纯牛奶200ml*48盒 </a> </li>
                <li><span>¥189</span>    26R </li>
                <li><img src="img/hot.png" class="bbb"></li>
            </ul>
            <ul>
                <li><img src="img/hot2.jpg"></li>
                <li><a href="#">iphone 6S</a> </li>
                <li><a href="#">Apple/苹果 iPhone 6s Plus公开版</a> </li>
                <li><span>¥5288</span>    25R </li>
                <li><img src="img/hot.png" class="bbb"></li>
            </ul>
            <ul>
                <li><img src="img/hot3.jpg"></li>
                <li><a href="#">倩碧特惠组合套装</a> </li>
                <li><a href="#">倩碧补水组合套装8折促销</a> </li>
                <li><span>¥368</span>    18R </li>
                <li><img src="img/hot.png" class="bbb"></li>
            </ul>
            <ul>
                <li><img src="img/hot1.jpg"></li>
                <li><a href="#">品利特级橄榄油</a> </li>
                <li><a href="#">750ml*4瓶装组合 西班牙原装进口</a> </li>
                <li><span>¥280</span>    30R </li>
                <li><img src="img/hot.png" class="bbb"></li>
            </ul>
 
        </div>
    </div>
    <img src="img/mban_2.jpg" class="aaa">
    <div id="nb2">
        <p>
            <span>1F</span>
            <span>进口<b>·</b>生鲜</span>
        </p>
        <ul>
            <li><a href="#">进口咖啡</a> </li>
            <li><a href="#">进口酒</a> </li>
            <li><a href="#">进口母婴</a> </li>
            <li><a href="#">新鲜蔬菜</a> </li>
            <li><a href="#">新鲜水果</a> </li>
        </ul>
    </div>
    <div id="nb3">
        <div  class="tu1">
            <img src="img/fre_r.jpg">
            <ul class="aa">
                <li><a href="#">进口水果</a>   <a href="#">奇异果</a>   <a href="#">西柚</a></li>
                <li><a href="#">海鲜水产</a>   <a href="#">品质牛肉</a></li>
                <li><a href="#">奶粉</a>   <a href="#">鲜活禽蛋</a>   <a href="#">进口酒</a></li>
                <li><a href="#">进口奶粉</a>   <a href="#">鲜活禽蛋</a></li>
            </ul>
        </div>
        <div class="tu2">
            <ul class="bb">
                <li><a href="#">贝思客 草莓先生&蓝莓小姐</a> </li>
                <li>¥98.00</li>
                <li><img src="img/fre_1.jpg"></li>
            </ul>
            <ul class="bb">
                <li><a href="#">微笑果园SMILE 智利进口绿奇异果</a> </li>
                <li>¥84.00</li>
                <li><img src="img/fre_2.jpg"></li>
            </ul>
            <ul class="bb">
                <li><a href="#">新鲜美味 进口美食</a></li>
                <li>¥98.00</li>
                <li><img src="img/fre_3.jpg"></li>
            </ul>
            <ul class="bb">
                <li><a href="#">新鲜美味 进口美食</a></li>
                <li>¥24.00</li>
                <li><img src="img/fre_4.jpg"></li>
            </ul>
            <ul class="bb">
                <li><a href="#">新鲜美味 纯牛奶</a></li>
                <li>¥142.00</li>
                <li><img src="img/fre_5.jpg"></li>
            </ul>
            <ul class="bb">
                <li><a href="#">莫斯利安</a></li>
                <li>¥62.00</li>
                <li><img src="img/fre_6.jpg"></li>
            </ul>
        </div>
        <div class="tu3">
            <img src="img/fre_b1.jpg"><br>
            <img src="img/fre_b2.jpg">
        </div>
    </div>
    <div id="nb4">
        <p>
            <span>2F</span>
            <span>个人美妆</span>
        </p>
        <ul>
            <li><a href="#">洗发护发</a> </li>
            <li><a href="#">面膜</a> </li>
            <li><a href="#">洗面奶</a> </li>
            <li><a href="#">香水</a> </li>
            <li><a href="#">沐浴露</a> </li>
        </ul>
    </div>
    <div id="nb5">
        <div  class="tu1">
            <img src="img/make_r.jpg">
            <ul class="aa">
                <li><a href="#">洗发护发</a>   <a href="#">牙刷牙膏</a></li>
                <li><a href="#">面膜</a>   <a href="#">补水面膜</a>   <a href="#">香水</a></li>
                <li><a href="#">面霜</a>   <a href="#">洗面奶</a>   <a href="#">脱毛膏</a></li>
                <li><a href="#">沐浴露</a></li>
            </ul>
        </div>
        <div class="tu2">
            <ul class="bb">
                <li><a href="#">美宝莲粉饼</a> </li>
                <li>¥260.00</li>
                <li><img src="img/make_1.jpg"></li>
            </ul>
            <ul class="bb">
                <li><a href="#">洗衣液</a> </li>
                <li>¥60.00</li>
                <li><img src="img/make_2.jpg"></li>
            </ul>
            <ul class="bb">
                <li><a href="#">洗发水</a></li>
                <li>¥160.00</li>
                <li><img src="img/make_3.jpg"></li>
            </ul>
            <ul class="bb">
                <li><a href="#">男士洗发水</a></li>
                <li>¥120.00</li>
                <li><img src="img/make_4.jpg"></li>
            </ul>
            <ul class="bb">
                <li><a href="#">美宝莲粉饼</a></li>
                <li>¥260.00</li>
                <li><img src="img/make_5.jpg"></li>
            </ul>
            <ul class="bb">
                <li><a href="#">男士设计 洗面奶</a></li>
                <li>¥90.00</li>
                <li><img src="img/make_6.jpg"></li>
            </ul>
        </div>
        <div class="tu3">
            <img src="img/make_b1.jpg"><br>
            <img src="img/make_b2.jpg">
        </div>
    </div>
    <img src="img/mban_2.jpg" class="qqq">
    <div id="nb6">
        <p>
            <span>3F</span>
            <span>母婴玩具</span>
        </p>
        <ul>
            <li><a href="#">营养品</a> </li>
            <li><a href="#">孕妈背带裤</a> </li>
            <li><a href="#">儿童玩具</a> </li>
            <li><a href="#">婴儿床</a> </li>
            <li><a href="#">喂奶器</a> </li>
        </ul>
    </div>
    <div id="nb7">
        <div  class="tu1">
            <img src="img/baby_r.jpg">
            <ul class="aa">
                <li><a href="#">孕妈必备</a>   <a href="#">儿童玩具</a></li>
                <li><a href="#">重装童鞋</a>   <a href="#">辅助食品</a></li>
                <li><a href="#">奶粉</a>   <a href="#">鲜活禽蛋</a>   <a href="#">维生素</a></li>
                <li><a href="#">重装童鞋</a>   <a href="#">辅助食品</a></li>
            </ul>
        </div>
        <div class="tu2">
            <ul class="bb">
                <li><a href="#">儿童推车</a> </li>
                <li>¥560.00</li>
                <li><img src="img/baby_1.jpg"></li>
            </ul>
            <ul class="bb">
                <li><a href="#">妈咪纸尿裤</a> </li>
                <li>¥260.00</li>
                <li><img src="img/baby_2.jpg"> </li>
                <li><a href="#">儿童玩具 挖掘机</a></li>
                <li>¥160.00</li>
                <li><img src="img/baby_3.jpg"></li>
            </ul>
            <ul class="bb">
                <li><a href="#">纸尿裤</a></li>
                <li>¥260.00</li>
                <li><img src="img/baby_4.jpg"></li>
            </ul>
            <ul class="bb">
                <li><a href="#">儿童推车</a></li>
                <li>¥86.00</li>
                <li><img src="img/baby_5.jpg"></li>
            </ul>
            <ul class="bb">
                <li><a href="#">奶粉</a></li>
                <li>¥660.00</li>
                <li><img src="img/baby_6.jpg"></li>
            </ul>
        </div>
        <div class="tu3">
            <img src="img/make_b1.jpg"><br>
            <img src="img/make_b2.jpg">
        </div>
    </div>
    <div id="nb8">
        <ul>
            <li><img src="img/b1.png"></li>
            <li>正品保障</li>
            <li>正品行货 放心购买</li>
        </ul>
        <ul>
            <li><img src="img/b2.png"></li>
            <li>满38包邮</li>
            <li>满38包邮 免运费</li>
        </ul>
        <ul>
            <li><img src="img/b3.png"></li>
            <li>天天低价</li>
            <li>天天低价 畅选无忧</li>
        </ul>
        <ul>
            <li><img src="img/b4.png"></li>
            <li>准时送达</li>
            <li>收货时间由你做主</li>
        </ul>
    </div>
    <div id="nb9">
        <dl>
            <dt><a href="#">新手上路</a> </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>
        </dl>
        <dl>
            <dt><a href="#">配送与支付</a> </dt>
            <dd><a href="#">货到付款区域</a></dd>
            <dd><a href="#">配送支付查询</a></dd>
            <dd><a href="#">支付方式说明</a></dd>
        </dl>
        <dl>
            <dt><a href="#">会员中心</a> </dt>
            <dd><a href="#">资金管理</a></dd>
            <dd><a href="#">我的收藏</a></dd>
            <dd><a href="#">我的订单</a></dd>
        </dl>
        <dl>
            <dt><a href="#">服务保证</a> </dt>
            <dd><a href="#">退换货原则</a></dd>
            <dd><a href="#">售后服务保证</a></dd>
            <dd><a href="#">产品质量保证</a></dd>
        </dl>
        <dl>
            <dt><a href="#">联系我们</a> </dt>
            <dd><a href="#">网站故障报告</a></dd>
            <dd><a href="#">购物咨询</a></dd>
            <dd><a href="#">投诉与建议</a></dd>
        </dl>
        <div class="las">
            <img src="img/er.gif" >
            <ul>
                <li><img src="img/b_sh_1.png"><a href="#">新浪微博</a> </li>
                <li><img src="img/b_sh_2.png"><a href="#">腾讯微博</a> </li>
                <li><p>服务热线:</p></li>
                <li><span>400-123-4567</span></li>
            </ul>
 
 
            <img src="img/ss.png">
        </div>
    </div>
 
</section>
<footer>
    <div id="sb">
        <p>备案/许可证编号:蜀ICP备12009302号-1-www.dingguagua.com Copyright© 1号店网
            上超市 2007-2016,All Rights Reserved. 复制必究 , Technical Support: Dgg
            Group</p>
        <ul>
            <li><img src="img/b_1.gif"></li>
            <li><img src="img/b_2.gif"></li>
            <li><img src="img/b_3.gif"></li>
            <li><img src="img/b_4.gif"></li>
            <li><img src="img/b_5.gif"></li>
            <li><img src="img/b_6.gif"></li>
        </ul>
    </div>
 
</footer>
</body>
</html>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值