一号店项目

首页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页主体</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body {
            font-size: 12px;
            line-height: 25px;
            color: #555555;
            margin: 0 auto;
        }
        a {
            color: #555555;
            text-decoration: none;
        }
        a:hover {
            color: #ff4e00;
        }
        img {
            border: 0;
        }
        ul, li, dl, dt, dd {
            list-style: none;
        }
        .a {
            width: 100%;
            min-width: 1200px;
            height: 35px;
            line-height: 35px;
            background: linear-gradient(to bottom, #d1d1d1,  #f4f4f4, #f5f5f5);
        }
        li{
            list-style: none;
        }
        .fl {
            float: left;
        }
        .fr {
            float: right;
        }
        .b{
            margin-left: 50px;
        }
        .c {
            width: 150px;
            height: 35px;
            float: left;
        }
        .d{
            margin-right: 50px;
        }
        .e {
            /*width: 225px;*/
            height: 35px;
            float: left;
        }
        .e_list {
            height: 35px;
            background: url(图片1/t_arrow.gif) no-repeat right center;
            float: left;
            margin-left: 10px;
            padding-right: 15px;
            position: relative;
        }
        .e_ list_c ul li {
            height: 25px;
            line-height: 25px;
            overflow: hidden;
            text-align: center;
        }
        .s_sh {
            width: 55px;
            height: 35px;
            overflow: hidden;
            float: left;
        }
        .s_sh a {
            width: 20px;
            height: 35px;
            line-height: 35px;
            overflow: hidden;
            float: left;
            display: inline;
            margin: 0 3px;
            text-indent: -9999em;
        }
        .s_sh a.sh1 {
            background: url(图片1/sh1.png) no-repeat center 8px;
        }
        .s_sh a.sh2 {
            background: url(图片1/sh2.png) no-repeat center;
        }
        .top {
            width: 1200px;
            height: 140px;
        }
        .logo {
            width: 207px;
            height: 72px;
            overflow: hidden;
            float: left;
            display: inline;
            margin-top: 40px;
            margin-left: 60px;
            box-sizing: border-box;
        }
        .test {
            width: 520px;
            height: 65px;
            overflow: hidden;
            float: left;
            display: inline;
            margin-left: 100px;
            margin-top: 50px;
        }
        .s_ipt {
            width: 408px;
            height: 40px;
            line-height: 36px;
            overflow: hidden;
            color: #555555;
            font-size: 14px;
            float: left;
            padding: 0 10px;
            border: 2px solid #ff3c3c;
            border-right: 0;
        }
        .test a {
            margin-right: 12px;
            display: inline-block;
        }
        .s_btn {
            width: 90px;
            height: 40px;
            line-height: 40px;
            background-color: #ff3c3c;
            color: #FFF;
            font-size: 16px;
            text-align: center;
            float: left;
            border: 0;
            cursor: pointer;
        }
        .i_car {
            width: 120px;
            height: 38px;
            line-height: 38px;
            background: #f6f6f6 url(图片1/car.png) no-repeat 10px center;
            float: right;
            margin-top: 50px;
            border: 1px solid #d9d9d9;
            position: relative;
        }
        .car_t {
            width: 80px;
            height: 38px;
            overflow: hidden;
            font-size: 14px;
            margin-left: 38px;
            cursor: pointer;
            padding-left: 10px;
        }
        .car_t span {
            color: #ff3c3c;
        }
        .q{
            border: 1px solid red;
            width: 190px;
            height: 35px;
            background-color: red;
        }
        .w{
            border: 2px solid black;
            width: 1200px;
            height: 37px;
            margin: 0px auto;
            border-color: white white red white;
        }
        .r{
           border: 1px solid #cc0000;
            width: 190px;
            position: relative;
            left: 75px;
            background-color: #cc0000;
        }
        section ul li{
            transition: all 3s;
        }
        section ul li:hover{
            transform: translate(20px,0);
        }
        .i{
            width: 220px;
            height: 340px;
            background-color: white;
            float: right;
            border: 1px solid black;
            position: relative;
            top: -825px;
            left: -110px;
        }
        .o{
            height: 39px;
            line-height: 39px;
            overflow: hidden;
            color: #3e3e3e;
            font-size: 16px;
            padding: 0 10px;
            border-bottom: 1px dotted #d9d9d9;
        }



        .ss{
            margin-top: 20px;
        }
        .dd {
            width: 200px;
            height: 260px;
            overflow: hidden;
            background-color: #d8eefc;
            float: left;
            position: relative;
        }
        .dd .img {
            width: 188px;
            height: 188px;
            margin-top: 8px;
        }
        .dd.img img{
            -webkit-transition: all 0.5s;
            -moz-transition: all 0.5s;
            transition: all 0.5s;
        }
        .dd:hover img:hover{
            -moz-transform: scale(1.1, 1.1);
            -webkit-transform: scale(1.1, 1.1);
            -o-transform: scale(1.1, 1.1);
            -ms-transform: scale(1.1, 1.1);
            transform: scale(1.1, 1.1);
        }
        .ddd{
            width: 240px;
            height: 260px;
            border: 1px solid #cdcdcd;
            overflow: hidden;
            float: left;
            position: relative;
            left: 20px;
        }
        .ddd.img{
            width: 188px;
            height: 188px;
            margin-top: 8px;
        }
        .ddd.img img{
            -webkit-transition: all 2s;
            -moz-transition: all 2s;
            transition: all 2s;
        }
        .ddd img:hover{
            -moz-transform: scale(1.1, 1.1);
            -webkit-transform: scale(1.1, 1.1);
            -o-transform: scale(1.1, 1.1);
            -ms-transform: scale(1.1, 1.1);
            transform: scale(1.1, 1.1);
        }
        .f{
            width: 211px;
            height: 200px;
            border: 1px solid white;
            padding-top: 1px;
            position: relative;
            top: -740px;
            left: 73px;
            background-color: powderblue;
        }
        .ff{
            height: 30px;
            line-height: 30px;
            overflow: hidden;
            margin-top: 10px;
            border: 1px solid black;
            border-color: powderblue powderblue darkgray powderblue;
            border-style: dotted;
        }
        .g{
            width: 950px;
            height: 286px;
            position: relative;
            top: -1014px;
            left: 250px;
        }
        .gg{
            width: 237px;
            height: 240px;
            border: 1px solid darkgray;
        }
        .g img{
            -webkit-transition: all 1s;
            -moz-transition: all 1s;
            transition: all 1s;
        }
        .g img:hover{
            -moz-transform: scale(1.1, 1.1);
            -webkit-transform: scale(1.1, 1.1);
            -o-transform: scale(1.1, 1.1);
            -ms-transform: scale(1.1, 1.1);
            transform: scale(1.1, 1.1);
        }
        .hh{
            width: 950px;
            height: 286px;
            position: relative;
            top: -670px;
            left: 320px;
        }
        .hh img{
            -webkit-transition: all 1s;
            -moz-transition: all 1s;
            transition: all 1s;
        }
        .hh img:hover{
            -moz-transform: scale(1.1, 1.1);
            -webkit-transform: scale(1.1, 1.1);
            -o-transform: scale(1.1, 1.1);
            -ms-transform: scale(1.1, 1.1);
            transform: scale(1.1, 1.1);
        }



        .b_btm_bg {
            width: 100%;
            min-width: 1200px;
            overflow: hidden;
            margin: 30px auto;
            padding: 20px;
            box-sizing: border-box;
        }
        .b_btm_c {
            background-color: #FFF;
        }
        .b_btm{
            margin-left: 50px;
        }
        .b_btm li {
            color: #888888;
            font-size: 14px;
            width:210px;
            float:left;
            margin-left:25px;
            text-align: center;
        }
        .b_btm li img{
            transition: all 3s;
        }
        .b_btm li img:hover{
            transform: rotate(360deg) scale(1.2);
        }
        .b_btm li h2 {
            color: #3e3e3e;
            font-size: 16px;
            font-weight: normal;
        }
        .b_nav {
            padding: 0 50px;
            overflow: hidden;
            margin: 20px auto;
        }
        .b_nav dl {
            width: 125px;
            height: 165px;
            overflow: hidden;
            float: left;
            display: inline;
            margin-right: 30px;
        }
        .b_nav dl dt {
            height: 30px;
            line-height: 30px;
            overflow: hidden;
            color: #3e3e3e;
            font-size: 16px;
            margin-bottom: 10px;
        }
        .b_nav dl dt a {
            color: #3e3e3e;
        }
        .b_nav dl dt a:hover {
            color: #3e3e3e;
            text-decoration: underline;
        }
        .b_nav dl dd {
            height: 24px;
            line-height: 24px;
            overflow: hidden;
            color: #888888;
        }
        .b_nav dl dd a {
            color: #888888;
        }
        .b_nav dl dd a:hover {
            color: #ff4e00;
        }
        .b_er {
            width: 120px;
            text-align: center;
            float: right;
            display: inline;
            margin-right: 22px;
            margin-top: 5px;
        }
        .b_er_c {
            width: 118px;
            margin-bottom: 10px;
            border: 1px solid #e9e9e9;
        }
        .b_tel_bg {
            width: 133px;
            color: #888888;
            float: right;
            margin-top: 5px;
            margin-left: 10px;
        }
        .b_tel_bg a.b_sh1 {
            width: 100%;
            height: 35px;
            line-height: 35px;
            overflow: hidden;
            background: url(图片1/b_sh_1.png) no-repeat left center;
            color: #888888;
            font-size: 14px;
            text-indent: 32px;
            display: inline-block;
        }
        .b_tel_bg a.b_sh1:hover {
            color: #ff4e00;
        }
        .b_tel_bg a.b_sh2 {
            width: 100%;
            height: 35px;
            line-height: 35px;
            overflow: hidden;
            background: url(图片1/b_sh_2.png) no-repeat left center;
            color: #888888;
            font-size: 14px;
            text-indent: 32px;
            display: inline-block;
        }
        .b_tel_bg a.b_sh2:hover {
            color: #ff4e00;
        }
        .b_tel_bg p {
            margin-top: 10px;
        }
        .b_tel_bg p span {
            color: #ff4e00;
            font-size: 18px;
        }
        .btmbg {
            width: 100%;
            min-width: 1200px;
            overflow: hidden;
            padding: 30px 0 40px 0;
            border-top: 1px solid #eaeaea;
        }
        .btm {
            width: 1200px;
            overflow: hidden;
            color: #999999;
            text-align: center;
        }
        .btm a {
            color: #999999;
        }
        .btm a:hover {
            color: #999999;
            text-decoration: underline;
        }
        .btm img {
            width: 98px;
            height: 33px;
            display: inline-block;
            margin: 15px 5px 5px 5px;
            border: 1px solid #d9d9d9;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div class="a">
    <div class="b fl">
        <div class="c">
            <span>送货至：四川</span>
        </div>
    </div>
    <div class="fr d">
        <div class="fl">
            你好! 请<a href="#">登录</a>
            <a href="#" style="color:#ff4e00;">免费注册</a>&nbsp; | &nbsp;<a href="#">我的订单</a>&nbsp;|
        </div>
        <ul class="e">
            <li class="e_list">
                <a href="#">收藏夹</a>
            </li>
            <li class="e_list">
                <a href="#">客户服务</a>
            </li>
            <li class="e_list">
                <a href="#">网站导航</a>
            </li>
        </ul>
        <span class="fl">&nbsp;&nbsp; | &nbsp;关注我们：</span>
        <span class="s_sh">
                    <a href="#" class="sh1"></a>
                    <a href="#" class="sh2"></a>
                </span>
        <span class="fr">&nbsp;&nbsp; | &nbsp;
                    <a href="#">手机版&nbsp;
                        <img src="图片1/s_tel.png"/>
                    </a>
        </span>
    </div>
</div>
<div class="top">
    <div class="logo">
        <a href="#">
            <img src="图片1/logo.png"/>
        </a>
    </div>
    <div class="test">
        <form>
            <input type="search " value="" placeholder="请输入关键字" class="s_ipt"/>
            <input type="submit" value="搜索" class="s_btn"/>
        </form>
        <div class="fl">
            <a href="#">咖啡</a>
            <a href="#">iphone 6S</a>
            <a href="#">新鲜美食</a>
            <a href="#">蛋糕</a>
            <a href="#">日用品</a>
            <a href="#">连衣裙</a>
        </div>
    </div>
    <div class="i_car">
        <div class="car_t">购物车</div>
    </div>
</div>
</header>
<section>
    <div>
        <ul class="w">
            <li class="q" style="color:white;font-size: 17px;">全部商品分类</li>
            <li style="font-size: 17px;font-weight: bold;color: red;position: relative;left: 220px;top: -30px">首页</li>
            <li style="font-size: 17px;font-weight: bold;color: red;position: relative;left: 300px;top: -55px">自营超市</li>
            <li style="font-size: 17px;font-weight: bold;position: relative;left: 420px;top: -79px">1号团</li>
            <li style="font-size: 17px;font-weight: bold;position: relative;left: 520px;top: -104px">1号超市</li>
            <li style="font-size: 17px;font-weight: bold;position: relative;left: 630px;top: -130px">女装</li>
            <li style="font-size: 17px;font-weight: bold;position: relative;left: 720px;top: -155px">美妆</li>
            <li style="font-size: 17px;font-weight: bold;position: relative;left: 810px;top: -180px">1号海购</li>
            <li style="font-size: 17px;font-weight: bold;position: relative;left: 928px;top: -206px">团购</li>
            <li style="position: relative;left: 1100px; top: -240px"><img src="图片1/phone.png"></li>
        </ul>
    </div>
    <div>
        <ul class="r">
            <li style="border: 1px solid; border-color:#cc0000;padding:3px;color: white"><img src="图片1/nav1.png">&nbsp; &nbsp; 进口食品，生鲜&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<img src="图片1/n_arrow.gif"></li>
            <li style="border: 1px solid;border-color: #cc0000;padding:3px;color: white"><img src="图片1/nav2.png">&nbsp; &nbsp; 食品，饮料，酒&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="图片1/n_arrow.gif"></li>
            <li style="border: 1px solid;border-color: #cc0000;padding:3px;color: white"><img src="图片1/nav3.png">&nbsp; &nbsp;母婴，玩具，童装&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="图片1/n_arrow.gif"></li>
            <li style="border: 1px solid;border-color: #cc0000;padding:3px;color: white"><img src="图片1/nav4.png">&nbsp; &nbsp;家居，家庭清洁，纸品&nbsp;  <img src="图片1/n_arrow.gif"></li>
            <li style="border: 1px solid;border-color: #cc0000;padding:3px;color: white"><img src="图片1/nav5.png">&nbsp; &nbsp; &nbsp; 美妆，个人护理，洗护 &nbsp;   <img src="图片1/n_arrow.gif"></li>
            <li style="border: 1px solid;border-color: #cc0000;padding:3px;color: white"><img src="图片1/nav6.png">&nbsp; &nbsp; 女装，内衣，中老年&nbsp; &nbsp; &nbsp;<img src="图片1/n_arrow.gif"></li>
            <li style="border: 1px solid;border-color: #cc0000;padding:3px;color: white"><img src="图片1/nav7.png">&nbsp; &nbsp; 鞋靴，箱包，腕表配饰&nbsp; <img src="图片1/n_arrow.gif"></li>
            <li style="border: 1px solid;border-color: #cc0000;padding:3px;color: white"><img src="图片1/nav8.png">&nbsp; &nbsp; 男装，运动 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="图片1/n_arrow.gif"></li>
            <li style="border: 1px solid;border-color: #cc0000;padding:3px;color: white"><img src="图片1/nav9.png">&nbsp; &nbsp; 手机，小家电，电脑&nbsp; &nbsp; &nbsp; &nbsp;<img src="图片1/n_arrow.gif"></li>
            <li style="border: 1px solid;border-color: #cc0000;padding:3px;color: white"><img src="图片1/nav10.png">&nbsp; &nbsp; 礼品，充值 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="图片1/n_arrow.gif"></li>
        </ul>
        <dl>
            <dt style="position: relative;left: 290px;top: -339px"><img src="图片1/ban1.jpg"width="700px" height="340"></dt>
            <dt style="position: relative;left: 290px;top: -550px"><img src="图片1/b_left.png"></dt>
            <dt style="position: relative;left: 958px;top: -615px"><img src="图片1/b_right.png"></dt>
        </dl>
    </div>
    <div class="i">
        <div class="o"></div>
        <h2 style="position: relative;top: -38px;border: 1px solid white;padding: 3px">快讯</h2>
        <span style="font-size: 12px;color: #888888;position: relative;left: 150px;top: -65px"><a href="">更多&nbsp;></a></span>
        <dl>
            <dd>
                <strong style=" font-size: 16px;position: relative;top: -50px">【特惠】</strong>
                <a href="" style="position: relative;top: -50px">掬一轮明月 表无尽惦念</a>
            </dd>
            <dd style="position: relative;top: -45px">
                <strong style="font-size: 16px;">【公告】</strong>
                <a href="">好奇金装成长裤新品上市</a>
            </dd>
            <dd style="position: relative;top: -40px">
                <strong style="font-size: 16px;">【特惠】</strong>
                <a href="">大牌闪购 · 抢！</a>
            </dd>
            <dd style="position: relative;top: -35px">
                <strong style="font-size: 16px;">【公告】</strong>
                <a href="">发福利 买车就抢千元油卡</a>
            </dd>
            <dd style="position: relative;top: -30px">
                <strong style="font-size: 16px;">【公告】</strong>
                <a href="">家电低至五折</a>
            </dd>
        </dl>
        <dl>
            <dd style="position: relative;top: -15px;left: 7px">收益日结，收益赚High！</dd>
            <dd style="position: relative;top: -15px"><img src="图片1/oneAD.jpg" width="220px" height="100px"></dd>
        </dl>
    </div>
    <div class="ss " style="position: relative;top: -490px;left: 70px">
        <div class="dd">
            <div class="img">
                <img src="图片1/l_img.jpg" width="188" height="188"/>
            </div>
            <div>
                <span style="border: 1px solid; background-color: tomato;color: white;position: relative;left: 80px">￥53.00</span>
                <span style="position: relative;left: 100px;font-size: 12px">16R</span>
            </div>
        </div>
        <div class="ddd">
            <div class="img">
                <img src="图片1/hot1.jpg" width="188" height="188"/>
                <h3 style="position: relative;left: 100px;top: -20px">德国进口</h3>
                <a href="" style="position: relative;left: 60px;top: -20px">德亚全脂纯牛奶200ml*48盒</a>
                <h2 style="color:tomato;position: relative;left: 80px;top: -25px;font-size: 20px">￥189<a style="font-size: 12px;position: relative;left: 20px">26R</a></h2>
            </div>
        </div>
        <div class="ddd">
            <div class="img">
                <img src="图片1/hot2.jpg" width="188" height="188"/>
                <h3 style="position: relative;left: 100px;top: -20px">iphone  6s</h3>
                <a href="" style="position: relative;left: 60px;top: -20px">Apple/苹果 iPhone 6s Plus公开版</a>
                <h2 style="color:tomato;position: relative;left: 80px;top: -25px;font-size: 20px">￥5288<a style="font-size: 12px;position: relative;left: 20px">25R</a></h2>
            </div>
        </div>
        <div class="ddd">
            <div class="img">
                <img src="图片1/hot3.jpg" width="188" height="188"/>
                <h3 style="position: relative;left: 50px;top: -15px">倩碧特惠组合套装</h3>
                <a href="" style="position: relative;left: 50px;top: -20px">倩碧补水组合套装8折促销</a>
                <h2 style="color:tomato;position: relative;left: 80px;top: -25px;font-size: 20px">￥368<a style="font-size: 12px;position: relative;left: 20px">18R</a></h2>
            </div>
        </div>
        <div class="ddd" style="position: relative;left: 945px;top: -262px">
            <div class="img">
                <img src="图片1/hot4.jpg" width="188" height="188"/>
                <h3 style="position: relative;left: 70px;top: -16px">品利特级橄榄油</h3>
                <a href="" style="position: relative;left: 40px;top: -20px">750ml*4瓶装组合 西班牙原装进口</a>
                <h2 style="color:tomato;position: relative;left: 80px;top: -25px;font-size: 20px">￥280<a style="font-size: 12px;position: relative;left: 20px">30R</a></h2>
            </div>
        </div>
        <div>
            <img src="图片1/hot.png" style="position: relative;left: -690px;top: 10px">
            <img src="图片1/hot.png" style="position: relative;left: -500px;top: 10px">
            <img src="图片1/hot.png" style="position: relative;left: -310px;top: 10px">
            <img src="图片1/hot.png" style="position: relative;left: 35px;top: -45px">
        </div>
        <div>
            <img src="图片1/b_left.png" style="position: relative;left: -705px">
            <img src="图片1/b_right.png" style="position: relative;left:190px">
        </div>
        <div>
            <img src="图片1/mban_2.jpg" style="position: relative;top: -245px">
        </div>
    </div>
    <div>
        <span style="position: relative;top: -700px;left: 80px"><img src="图片1/floor.png"><a style="color:white;position: relative;left: -28px;top: -10px">1F</a></span>
        <h2 style="position: relative;top: -735px;left: 140px;color:tomato;font-family: 宋体;font-size: 20px ">进口.生鲜</h2>
        <a href="" style="position: relative;top: -750px;left: 900px;font-size: 15px">进口咖啡</a>
        <a href="" style="font-size: 15px;position: relative;top: -750px;left: 920px">进口酒</a>
        <a href="" style="font-size: 15px;position: relative;top: -750px;left: 940px">进口母婴</a>
        <a href="" style="font-size: 15px;position: relative;top: -750px;left: 960px">新鲜蔬菜</a>
        <a href="" style="font-size: 15px;position: relative;top: -750px;left: 980px">新鲜水果</a>
        <div style="border-top: 3px solid tomato;width: 1200px;margin: 0px auto;position: relative;top: -730px"></div>
    </div>
    <div>
        <img src="图片1/fre_r.jpg" width="211" height="286"style="position: relative;top: -730px;left:75px">
        <img src="图片1/b_left.png" style="position: relative;top: -850px;left: -140px">
        <img src="图片1/b_right.png"style="position:relative;top: -850px;left: 5px">
    </div>
    <div class="f">
        <div class="ff">
            <a href="" style="position: relative;left: 10px;font-size: 13px">进口水果</a>
            <a href="" style="position: relative;left: 30px;font-size: 13px">奇异果</a>
            <a href="" style="position: relative;left: 60px;font-size: 13px">西柚</a>
        </div>
        <div class="ff">
            <a href="" style="position: relative;left: 10px;font-size: 13px">海鲜水产</a>
            <a href="" style="position: relative;left: 30px;font-size: 13px">品质牛肉</a>
        </div>
        <div class="ff">
            <a href="" style="position: relative;left: 10px;font-size: 13px">奶粉</a>
            <a href="" style="position: relative;left: 30px;font-size: 13px">鲜活禽蛋</a>
            <a href="" style="position: relative;left: 60px;font-size: 13px">进口酒</a>
        </div>
        <div class="ff">
            <a href="" style="position: relative;left: 10px;font-size: 13px">进口奶粉</a>
            <a href="" style="position: relative;left: 30px;font-size: 13px">鲜活禽蛋</a>
        </div>
    </div>
    <div class="hh">
        <div class="gg">
            <h3 style="position: relative;left: 20px">贝思客 草莓先生&蓝莓小姐</h3>
            <h2 style="color:tomato;position: relative;left: 60px">￥98.00</h2>
            <img src="图片1/make_1.jpg" width="237" height="190">
        </div>
        <div class="gg" style="position: relative;left: 238px;top: -242px;">
            <h3 style="position: relative;left: 10px">微笑果园SMILE 智利进口绿奇异果</h3>
            <h2 style="color:tomato;position: relative;left: 60px">￥84.00</h2>
            <img src="图片1/make_2.jpg" width="237" height="190">
        </div>
        <div class="gg" style="position: relative;left: 477px;top: -484px;">
            <h3 style="position: relative;left: 60px">新鲜美味 进口美食</h3>
            <h2 style="color:tomato;position: relative;left: 60px">￥98.00</h2>
            <img src="图片1/make_3.jpg" width="237" height="190" >
        </div>
        <div class="gg" style="position: relative;left: 715px;top: -723px">
           <img src="图片1/make_b1.jpg" width="237" height="237">
        </div>
        <div class="gg" style="position: relative;top: -720px;">
            <h3 style="position: relative;left: 50px">新鲜美味 进口美食</h3>
            <h2 style="color:tomato;position: relative;left: 60px">￥24.00</h2>
            <img src="图片1/make_4.jpg" width="237" height="190">
        </div>
        <div class="gg" style="position: relative;left: 239px;top: -962px;">
            <h3 style="position: relative;left: 50px">新鲜美味 纯牛奶</h3>
            <h2 style="color:tomato;position: relative;left: 60px">￥142.00</h2>
            <img src="图片1/make_5.jpg" width="237" height="190">
        </div>
        <div class="gg" style="position: relative;left: 477px;top: -1204px">
            <h3 style="position: relative;left: 60px">莫斯利安</h3>
            <h2 style="color:tomato;position: relative;left: 60px">￥62.00</h2>
            <img src="图片1/make_6.jpg" width="237" height="190">
        </div>
        <div class="gg" style="position: relative;left: 715px;top: -1446px">
            <img src="图片1/make_b2.jpg" width="237" height="240">
        </div>
    </div>
        <div>
            <div style="position: relative;top: 400px;left: 330px">
                <span style="position: relative;top: -1420px;left: -240px"><img src="图片1/floor.png"><a style="color:white;position: relative;left: -28px;top: -10px">1F</a></span>
                <h2 style="position: relative;top: -1450px;left: -180px;color:tomato;font-family: 宋体;font-size: 20px ">个人美妆</h2>
                <a href="" style="position: relative;top: -1470px;left: 600px;font-size: 15px">洗发护肤</a>
                <a href="" style="font-size: 15px;position: relative;top: -1470px;left: 630px">面膜</a>
                <a href="" style="font-size: 15px;position: relative;top: -1470px;left: 650px">洗面奶</a>
                <a href="" style="font-size: 15px;position: relative;top: -1470px;left: 670px">香水</a>
                <a href="" style="font-size: 15px;position: relative;top: -1470px;left: 690px">沐浴露</a>
                <div style="border-top: 3px solid tomato;width: 1200px;margin: 0px auto;position: relative;top: -1450px;left: -330px"></div>
            </div>
            <div>
                <div style="position: relative;top: -320px">
                    <img src="图片1/make_r.jpg" width="211" height="286"style="position: relative;top: -730px;left:75px">
                    <img src="图片1/b_left.png" style="position: relative;top: -850px;left: -140px">
                    <img src="图片1/b_right.png"style="position:relative;top: -850px;left: 5px">
                </div>
                <div class="f" style="position: relative;top: -1060px">
                    <div class="ff">
                        <a href="" style="position: relative;left: 10px;font-size: 13px">洗发护发</a>
                        <a href="" style="position: relative;left: 30px;font-size: 13px">牙刷牙膏</a>
                    </div>
                    <div class="ff">
                        <a href="" style="position: relative;left: 10px;font-size: 13px">面膜</a>
                        <a href="" style="position: relative;left: 30px;font-size: 13px">补水面膜</a>
                        <a href="" style="position: relative;left: 50px;font-size: 13px">香水</a>
                    </div>
                    <div class="ff">
                        <a href="" style="position: relative;left: 10px;font-size: 13px">面霜</a>
                        <a href="" style="position: relative;left: 30px;font-size: 13px">洗面奶</a>
                        <a href="" style="position: relative;left: 60px;font-size: 13px">脱毛膏</a>
                    </div>
                    <div class="ff">
                        <a href="" style="position: relative;left: 10px;font-size: 13px">沐浴露</a>
                    </div>
                    <div class="g">
                        <div class="gg">
                            <h3 style="position: relative;left: 20px">美宝莲粉饼</h3>
                            <h2 style="color:tomato;position: relative;left: 60px">￥260.00</h2>
                            <img src="图片1/微信图片_20180704162812.png" width="237" height="190">
                        </div>
                        <div class="gg" style="position: relative;left: 238px;top: -242px;">
                            <h3 style="position: relative;left: 10px">洗衣液</h3>
                            <h2 style="color:tomato;position: relative;left: 60px">￥60.00</h2>
                            <img src="图片1/微信图片_20180704163829.png" width="237" height="190">
                        </div>
                        <div class="gg" style="position: relative;left: 477px;top: -484px;">
                            <h3 style="position: relative;left: 60px">洗发水</h3>
                            <h2 style="color:tomato;position: relative;left: 60px">￥160.00</h2>
                            <img src="图片1/fre_3.jpg" width="237" height="190" >
                        </div>
                        <div class="gg" style="position: relative;left: 715px;top: -723px">
                            <img src="图片1/fre_b1.jpg" width="237" height="237">
                        </div>
                        <div class="gg" style="position: relative;top: -720px;">
                            <h3 style="position: relative;left: 50px">男士洗发水</h3>
                            <h2 style="color:tomato;position: relative;left: 60px">￥120.00</h2>
                            <img src="图片1/fre_4.jpg" width="237" height="190">
                        </div>
                        <div class="gg" style="position: relative;left: 239px;top: -962px;">
                            <h3 style="position: relative;left: 50px">美宝莲粉饼</h3>
                            <h2 style="color:tomato;position: relative;left: 60px">￥260.00</h2>
                            <img src="图片1/fre_5.jpg" width="237" height="190">
                        </div>
                        <div class="gg" style="position: relative;left: 477px;top: -1204px">
                            <h3 style="position: relative;left: 60px">男士设计 洗面奶</h3>
                            <h2 style="color:tomato;position: relative;left: 60px">￥90.00</h2>
                            <img src="图片1/fre_6.jpg" width="237" height="190">
                        </div>
                        <div class="gg" style="position: relative;left: 715px;top: -1446px">
                            <img src="图片1/fre_b2.jpg" width="237" height="240">
                        </div>
                    </div>
                    <div>
                        <img src="图片1/mban_2.jpg" style="position: relative;top: -230px">
                    </div>
                </div>
            </div>
        </div>
</section>
<footer class="center" style="position: relative;top: -900px">
    <div class="b_btm_bg b_btm_c">
        <ul class="b_btm">
            <li>
                <a><img src="图片1/b1.png" width="62" height="62"/></a>
                <div><h2>正品保障</h2>正品行货 放心购买</div>
            </li>
            <li >
                <a><img src="图片1/b2.png" width="62" height="62"/></a>
                <div><h2>满38包邮</h2>满38包邮 免运费</div>
            </li>
            <li>
                <a><img src="图片1/b3.png" width="62" height="62"/></a>
                <div><h2>天天低价</h2>天天低价 畅选无忧</div>
            </li>
            <li>
                <a><img src="图片1/b4.png" width="62" height="62"/></a>
                <div><h2>准时送达</h2>收货时间由你做主</div>
            </li>
        </ul>
    </div>
    <div class="b_nav">
        <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="b_tel_bg">
            <a href="#" class="b_sh1">新浪微博</a>
            <a href="#" class="b_sh2">腾讯微博</a>

            <p>
                服务热线：<br/>
                <span>400-123-4567</span>
            </p>
        </div>
        <div class="b_er">
            <div class="b_er_c"><img src="图片1/er.gif" /></div>
            <img src="图片1/ss.png"/>
        </div>
    </div>
    <div class="btmbg">
        <div class="btm">
            备案/许可证编号：蜀ICP备12009302号-1-www.dingguagua.com Copyright© 1号店网上超市 2007-2016，All Rights Reserved. 复制必究 ,
            Technical Support: Dgg Group <br/>
            <img src="图片1/b_1.gif"/>
            <img src="图片1/b_2.gif"/>
            <img src="图片1/b_3.gif"/>
            <img src="图片1/b_4.gif"/>
            <img src="图片1/b_5.gif"/>
            <img src="图片1/b_6.gif"/>
        </div>
    </div>
</footer>
</body>
</html>

搜索页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索列</title>
    <style>




        td{
           border: 1px solid darkgray;
            padding: 8px;
        }
        .td a {
            margin-right: 25px;
            color: darkgray;
            text-decoration: none;
        }
        .cc {
            width: 185px;
            height: 38px;
            line-height: 38px;
            overflow: hidden;
            background: url(图片1/h_t.gif) no-repeat 10px center;
            color: #ff4e00;
            font-size: 16px;
            padding-left: 22px;
            padding-right: 10px;
            border-bottom: 1px solid #eaeaea;
        }
        .dd{
            width: 60px;
            height: 20px;
            border: 1px solid black;
            background-color: #ff4e00;
            padding: 8px;
        }
        .ee{
            width: 60px;
            height: 20px;
            border: 1px solid black;
            padding:10px;
        }





      ul li a{
          text-decoration: none;
      }
        .gg {
            overflow: hidden;
            margin: 20px auto;
        }

        .gg ul {
            overflow: hidden;
        }
        ul.hh {
            padding: 5px 0;
        }

        ul.hh li {
            width: 232px;
            height: 316px;
            overflow: hidden;
            float: left;
            display: inline;
            margin: 0 5px;
            text-align: center;
            padding: 10px;
            box-sizing: border-box;
        }

        ul.hh li:hover {
            background-color: #FFF;
            -webkit-box-shadow: 0 0 5px #e0e0e0;
            -moz-box-shadow: 0 0 5px #e0e0e0;
            box-shadow: 0 0 5px #e0e0e0;
        }

        ul.hh li .img {
            background-origin: border-box;
            background-clip: border-box;
            width: 210px;
            height: 185px;
            overflow: hidden;
            margin-top: 5px;
        }

        ul.hh li .yy {
            width: 208px;
            height: 25px;
            line-height: 25px;
            overflow: hidden;
            text-transform: uppercase;
            margin-top: 10px;
            color: #ff4e00;
            font-size: 14px;
        }

        ul.hh li .yy span {
            font-size: 18px;
        }

        ul.hh li .name {
            width: 208px;
            height: 25px;
            line-height: 25px;
            overflow: hidden;
            font-size: 14px;
        }

        ul.hh li .jj {
            width: 209px;
            height: 30px;
            overflow: hidden;
            margin-top: 15px;
        }

        ul.hh li .jj a.ss {
            width: 68px;
            height: 28px;
            line-height: 28px;
            overflow: hidden;
            background: url(图片1/heart.png) no-repeat 10px center;
            color: #888888;
            text-indent: 33px;
            float: left;
            display: inline;
            margin-right: -1px;
            border: 1px solid #cccccc;
        }

        ul.hh li .jj a.ss:hover {
            color: #888888;
            background: url(图片1/heart_h.png) no-repeat 10px center;
        }



        ul.hh li .jj a.kk {
            width: 138px;
            height: 28px;
            line-height: 28px;
            overflow: hidden;
            background: url(图片1/cars.png) no-repeat 24px center;
            color: #ff4e00;
            text-indent: 47px;
            float: left;
            display: inline;
            margin-right: -1px;
            border: 1px solid #cccccc;
        }

        ul.hh li .jj a.kk:hover {
            color: #FFF;
            background:#ff4e00 url(图片1/cars_h.png) no-repeat 24px center;
            border: 1px solid #ff4e00;
        }

        ul.hh li:hover .jj a.kk {
            color: #FFF;
            background:#ff4e00 url(图片1/cars_h.png) no-repeat 24px center;
            border: 1px solid #ff4e00;
        }
    </style>
</head>
<body>
<section style="width: 1220px;margin: 80px;margin-top: -10px">
        <div>
           <strong style="float: left;position: relative;left: 80px;top:20px;font-size: 15px">全部 &nbsp;>珠宝饰品 &nbsp;>珍珠项链 &nbsp;></strong>
            <strong style="font-size: 15px;border: 1px solid #ff4e00;border-style: dashed;position: relative;left: 100px;top: 20px">品牌：<a href="" style="color: orangered;font-family: 楷体">珠韵首饰</a></strong>
        </div>
    <br>
    <br>
    <div>
        <table>
            <tr>
                <td width="90">&nbsp; 品牌：</td>
                <td class="td">
                    <a href="#" style="color: #ff4e00">珠韵首饰/ZHUYUN JEWELLERY</a>&nbsp; &nbsp;  &nbsp; &nbsp;
                    <a href="#">施华洛世奇/Swarovski</a> &nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="#">海瞳</a>&nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="#">周大福/CHOW TAI FOOK</a>&nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="#">京润珍珠</a>&nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="#">佰色传情 /BRI.R</a>&nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="#">迈姿/Maizi</a>&nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="#">Ginasy Jewelry</a>&nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="#">心鑫圆</a>&nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="#">银斯妮/yin si ni silver</a>&nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="#">迈姿/Maizi</a>&nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="#">Ginasy Jewelry</a>&nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="#">蛟蓓</a>&nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="#">芭比/Barbie</a>&nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="#">珍福祥</a>&nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="#">珍福祥</a>
                </td>
            </tr>
            <tr>
                <td >&nbsp; 价格：</td>
                <td class="td">
                    <a href="#">0-199</a>&nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="#" style="color: #ff4e00">200-399</a>&nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="#">400-599</a>&nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="#">600-899</a>&nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="#">900-1299</a>&nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="#">1300-1399</a>&nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="#">1400以上</a>
                </td>
            </tr>
            <tr>
                <td>珍珠颜色：</td>
                <td class="td">
                    <a href="#">混彩</a>&nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="#">黑色系</a>&nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="#">粉色系</a>&nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="#">白色系</a>&nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="#">金色系</a>&nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="#">紫色系</a>
                </td>
            </tr>
            <tr>
                <td>珍珠分类：</td>
                <td class="td">
                    <a href="#">天然海水珍珠</a>&nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="#">养殖海水珍珠</a>&nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="#">养殖淡水珍珠</a>&nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="#">天然淡水珍珠</a>
                </td>
            </tr>
        </table>
    </div>
    <div class="cc">
        <span>浏览历史</span>
        <span>
            <a href="" style="color:darkgray;text-decoration: none;position: relative;left: 90px">清空</a>
        </span>
    </div>
    <ul style="list-style: none;position: relative;left: -40px">
        <li style="border: 2px solid darkgray;width: 209px;height: 241px">
            <a href=""><img src="图片1/his_1.jpg"></a>
            <a href="" style="font-size: 15px">Dior/迪奥香水2件套装</a>
            <span style="font-size: 15px;color: #cc0000">￥368.00</span>
        </li>
        <li  style="border: 2px solid darkgray;width: 209px;height: 241px">
            <a href=""><img src="图片1/his_2.jpg"></a>
            <a href="" style="font-size: 15px">Dior/迪奥香水2件套装</a>
            <span style="font-size: 15px;color: #cc0000">￥768.00</span>
        </li>
        <li  style="border: 2px solid darkgray;width: 209px;height: 241px">
            <a href=""><img src="图片1/his_3.jpg"></a>
            <a href="" style="font-size: 15px">Dior/迪奥香水2件套装</a>
            <span style="font-size: 15px;color: #cc0000">￥600.00</span>
        </li>
        <li  style="border: 2px solid darkgray;width: 209px;height: 241px">
            <a href=""><img src="图片1/his_4.jpg"></a>
            <a href="" style="font-size: 15px">Dior/迪奥香水2件套装</a>
            <span style="font-size: 15px;color: #cc0000">￥368.00</span>
        </li>
        <li  style="border: 2px solid darkgray;width: 209px;height: 241px">
            <a href=""><img src="图片1/his_5.jpg"></a>
            <a href="" style="font-size: 15px">Dior/迪奥香水2件套装</a>
            <span style="font-size: 15px;color: #cc0000">￥368.00</span>
        </li>
    </ul>
    <span style="position: relative;left: 250px;top: -1288px">
        <a href="">
            <span class="dd" style="font-family: 楷体;font-weight: bold;font-size: 15px;">默认</span>
        </a>
        <a href="">
            <span class="ee">销量</span>
        </a>
        <a href="">
            <span class="ee">价格</span>
        </a>
        <a href="">
            <span class="ee">新品</span>
        </a>
    </span>
    <div class="gg" style="position: relative;top: -1350px;padding: 30px">
        <ul class="hh" style="float: right">
            <li>
                <div class="img"><a href="#"><img src="图片1/per_4.jpg" width="210" height="185"/></a></div>
                <div class="yy">
                    <span>￥680.00</span>
                </div>
                <div class="name"><a href="#">心鑫圆 天然珍珠项链淡水套装</a></div>
                <div class="jj">
                    <a href="#" class="ss">收藏</a>
                    <a href="#" class="kk">加入购物车</a>
                </div>
            </li>
        </ul>
        <ul class="hh" style="float: right">
            <li>
                <div class="img"><a href="#"><img src="图片1/per_3.jpg" width="210" height="185"/></a></div>
                <div class="yy">
                    <span>￥440.00</span>
                </div>
                <div class="name"><a href="#">京润 【魅惑】海水珍珠项链</a></div>
                <div class="jj">
                    <a href="#" class="ss">收藏</a>
                    <a href="#" class="kk">加入购物车</a>
                </div>
            </li>
        </ul>
        <ul class="hh" style="float: right">
            <li>
                <div class="img"><a href="#"><img src="图片1/per_2.jpg" width="210" height="185"/></a></div>
                <div class="yy">
                    <span>￥598.00</span>
                </div>
                <div class="name"><a href="#">佰色传情淡水珍珠项链圆8-9mm</a></div>
                <div class="jj">
                    <a href="#" class="ss">收藏</a>
                    <a href="#" class="kk">加入购物车</a>
                </div>
            </li>
        </ul>
        <ul class="hh" style="float: right">
            <li>
                <div class="img"><a href="#"><img src="图片1/per_1.jpg" width="210" height="185"/></a></div>
                <div class="yy">
                    <span>￥198.00</span>
                </div>
                <div class="name"><a href="#">海瞳7-8mm水滴形天然珍珠项链</a></div>
                <div class="jj">
                    <a href="#" class="ss">收藏</a>
                    <a href="#" class="kk">加入购物车</a>
                </div>
            </li>
        </ul>
        <ul class="hh" style="float: right">
            <li>
                <div class="img"><a href="#"><img src="图片1/per_8.jpg" width="210" height="185"/></a></div>
                <div class="yy">
                    <span>￥2980.00</span>
                </div>
                <div class="name"><a href="#">珠韵首饰 多色可选(白色)</a></div>
                <div class="jj">
                    <a href="#" class="ss">收藏</a>
                    <a href="#" class="kk">加入购物车</a>
                </div>
            </li>
        </ul>
        <ul class="hh" style="float: right">
            <li>
                <div class="img"><a href="#"><img src="图片1/per_7.jpg" width="210" height="185"/></a></div>
                <div class="yy">
                    <span>￥390.00</span>
                </div>
                <div class="name"><a href="#">7-8mm米形珍珠 加长型</a></div>
                <div class="jj">
                    <a href="#" class="ss">收藏</a>
                    <a href="#" class="kk">加入购物车</a>
                </div>
            </li>
        </ul>
        <ul class="hh" style="float: right">
            <li>
                <div class="img"><a href="#"><img src="图片1/per_6.jpg" width="210" height="185"/></a></div>
                <div class="yy">
                    <span>￥198.00</span>
                </div>
                <div class="name"><a href="#">佰色传情 淡水珍珠项链</a></div>
                <div class="jj">
                    <a href="#" class="ss">收藏</a>
                    <a href="#" class="kk">加入购物车</a>
                </div>
            </li>
        </ul>
        <ul class="hh" style="float: right">
            <li>
                <div class="img"><a href="#"><img src="图片1/per_5.jpg" width="210" height="185"/></a></div>
                <div class="yy">
                    <span>￥1980.00</span>
                </div>
                <div class="name"><a href="#">海瞳 明星款 玛瑙天然淡水珍珠</a></div>
                <div class="jj">
                    <a href="#" class="ss">收藏</a>
                    <a href="#" class="kk">加入购物车</a>
                </div>
            </li>
        </ul>
        <ul class="hh" style="float: right">
            <li>
                <div class="img"><a href="#"><img src="图片1/per_12.jpg" width="210" height="185"/></a></div>
                <div class="yy">
                    <span>￥212.00</span>
                </div>
                <div class="name"><a href="#">媲美海水珠 天然浅粉金色珍珠项链</a></div>
                <div class="jj">
                    <a href="#" class="ss">收藏</a>
                    <a href="#" class="kk">加入购物车</a>
                </div>
            </li>
        </ul>
        <ul class="hh" style="float: right">
            <li>
                <div class="img"><a href="#"><img src="图片1/per_11.jpg" width="210" height="185"/></a></div>
                <div class="yy">
                    <span>￥5198.00</span>
                </div>
                <div class="name"><a href="#">海瞳 罕见7-8mm高亮泽 表皮光滑</a></div>
                <div class="jj">
                    <a href="#" class="ss">收藏</a>
                    <a href="#" class="kk">加入购物车</a>
                </div>
            </li>
        </ul>
        <ul class="hh" style="float: right">
            <li>
                <div class="img"><a href="#"><img src="图片1/per_10.jpg" width="210" height="185"/></a></div>
                <div class="yy">
                    <span>￥2198.00</span>
                </div>
                <div class="name"><a href="#">京润 【简爱】 淡水珍珠项链</a></div>
                <div class="jj">
                    <a href="#" class="ss">收藏</a>
                    <a href="#" class="kk">加入购物车</a>
                </div>
            </li>
        </ul>
        <ul class="hh" style="float: right">
            <li>
                <div class="img"><a href="#"><img src="图片1/per_9.jpg" width="210" height="185"/></a></div>
                <div class="yy">
                    <span>￥670.00</span>
                </div>
                <div class="name"><a href="#">小清新8.5-10.5mm珍珠吊坠项链正圆饰品</a></div>
                <div class="jj">
                    <a href="#" class="ss">收藏</a>
                    <a href="#" class="kk">加入购物车</a>
                </div>
            </li>
        </ul>
        <ul class="hh" style="float: right">
            <li>
                <div class="img"><a href="#"><img src="图片1/per_8.jpg" width="210" height="185"/></a></div>
                <div class="yy">
                    <span>￥2980.00</span>
                </div>
                <div class="name"><a href="#">珠韵首饰 多色可选(白色)</a></div>
                <div class="jj">
                    <a href="#" class="ss">收藏</a>
                    <a href="#" class="kk">加入购物车</a>
                </div>
            </li>
        </ul>
        <ul class="hh" style="float: right">
            <li>
                <div class="img"><a href="#"><img src="图片1/per_7.jpg" width="210" height="185"/></a></div>
                <div class="yy">
                    <span>￥390.00</span>
                </div>
                <div class="name"><a href="#">7-8mm米形珍珠 加长型</a></div>
                <div class="jj">
                    <a href="#" class="ss">收藏</a>
                    <a href="#" class="kk">加入购物车</a>
                </div>
            </li>
        </ul>
        <ul class="hh" style="float: right">
            <li>
                <div class="img"><a href="#"><img src="图片1/per_6.jpg" width="210" height="185"/></a></div>
                <div class="yy">
                    <span>￥198.00</span>
                </div>
                <div class="name"><a href="#">佰色传情 淡水珍珠项链</a></div>
                <div class="jj">
                    <a href="#" class="ss">收藏</a>
                    <a href="#" class="kk">加入购物车</a>
                </div>
            </li>
        </ul>
        <ul class="hh" style="float: right">
            <li>
                <div class="img"><a href="#"><img src="图片1/per_5.jpg" width="210" height="185"/></a></div>
                <div class="yy">
                    <span>￥1980.00</span>
                </div>
                <div class="name"><a href="#">海瞳 明星款 玛瑙天然淡水珍珠</a></div>
                <div class="jj">
                    <a href="#" class="ss">收藏</a>
                    <a href="#" class="kk">加入购物车</a>
                </div>
            </li>
        </ul>
        <ul class="hh" style="float: right">
            <li>
                <div class="img"><a href="#"><img src="图片1/per_12.jpg" width="210" height="185"/></a></div>
                <div class="yy">
                    <span>￥212.00</span>
                </div>
                <div class="name"><a href="#">媲美海水珠 天然浅粉金色珍珠项链</a></div>
                <div class="jj">
                    <a href="#" class="ss">收藏</a>
                    <a href="#" class="kk">加入购物车</a>
                </div>
            </li>
        </ul>
        <ul class="hh" style="float: right">
            <li>
                <div class="img"><a href="#"><img src="图片1/per_11.jpg" width="210" height="185"/></a></div>
                <div class="yy">
                    <span>￥5198.00</span>
                </div>
                <div class="name"><a href="#">海瞳 罕见7-8mm高亮泽 表皮光滑</a></div>
                <div class="jj">
                    <a href="#" class="ss">收藏</a>
                    <a href="#" class="kk">加入购物车</a>
                </div>
            </li>
        </ul>
        <ul class="hh" style="float: right">
            <li>
                <div class="img"><a href="#"><img src="图片1/per_10.jpg" width="210" height="185"/></a></div>
                <div class="yy">
                    <span>￥2198.00</span>
                </div>
                <div class="name"><a href="#">京润 【简爱】 淡水珍珠项链</a></div>
                <div class="jj">
                    <a href="#" class="ss">收藏</a>
                    <a href="#" class="kk">加入购物车</a>
                </div>
            </li>
        </ul>
        <ul class="hh" style="float: right">
            <li>
                <div class="img"><a href="#"><img src="图片1/per_9.jpg" width="210" height="185"/></a></div>
                <div class="yy">
                    <span>￥670.00</span>
                </div>
                <div class="name"><a href="#">小清新8.5-10.5mm珍珠吊坠项链正圆饰品</a></div>
                <div class="jj">
                    <a href="#" class="ss">收藏</a>
                    <a href="#" class="kk">加入购物车</a>
                </div>
            </li>
        </ul>
    </div>
</section>
</body>
</html>

详情页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详情页</title>
    <link rel="stylesheet" href="css1/a.css"/>
    <style>

        #1 {
            width: 392px;
            height: 495px;
            float: left;
            position: relative;
        }

        #1 #2 {
            text-align: center;
            width: 100%;
            position: relative;
            border: 1px solid #eaeaea;
        }

        #1 #2 a {
            display: block;
            text-align: center;
            margin: 0 auto;
        }

        #1 #2 img {
            border: 0;
            width: 390px;
            height: 390px;
        }

        #1 #4 {
            width: 100%;
            height: 90px;
            position: relative;
            margin-top: 10px;
        }

        #1 #4 #3 {
            width: 15px;
            height: 100%;
            background: url(图片1/r_left.png) no-repeat left center;
            position: absolute;
            top: 0;
            left: 0;
            cursor: pointer;
        }

        #1 #4 #6 {
            width: 15px;
            height: 100%;
            background: url(图片1/r_right.png) no-repeat right center;
            position: absolute;
            top: 0;
            right: 0;
            cursor: pointer;
        }

        #1 #4 #5 {
            position: absolute;
            top: 0;
            left: 18px;
            height: 90px;
            overflow: hidden;
        }

        #5 ul {
            width: 100%;
            overflow: hidden;
        }

        #5 li {
            width: 90px;
            float: left;
            cursor: pointer;
        }

        #5 li img {
            padding: 2px;
            margin: 1px;
            border: 1px solid #eaeaea;
            display: block;
            width: 79px;
            height: 79px;
        }

        #5 li.tsSelectImg img {
            border: 3px solid #ff4e00;
            padding: 1px;
            margin: 0;
        }
        li{
        list-style: none;
        }
    </style>
</head>
<body>
<div>
    <span style="float: left;font-size: 15px">所有团购 > 包饰 > 珠韵首饰&nbsp;<em style="color: red;font-family: 楷体">冰韵 天然白色正圆S925银扣珍珠项链</em></span>
</div>
<div style="position: relative;top: 40px;left: -440px">
    <div>
        <div id="1">
            <div id="2">
                <a href="图片1/p_big.jpg">
                    <img src="图片1/p_big.jpg" width="390" height="390"/>
                </a>
            </div>
            <div id="4">
                <div id="3"></div>
                <div id="5">
                    <ul>
                        <li><img src="图片1/ps1.jpg" /></li>
                        <li><img src="图片1/ps2.jpg" width="79"/>
                        <li><img src="图片1/ps3.jpg" width="79"/></li>
                        <li><img src="图片1/ps4.jpg" width="79"/></li>
                    </ul>
                </div>
                <div id="6"></div>
            </div>
        </div>
        <div class="a" style="position: relative;left: 840px;top: -1120px">
            <div class="b">
                <p>珠韵首饰 冰韵 天然白色正圆S925银扣珍珠项链</p>
                全国包邮 送妈妈，正圆级淡水珍珠，白色S925银链扣，使用方便，尊贵礼物。
            </div>
            <div class="c">
                本店价格：<b>¥1786</b><br/>
                参考价：<span>¥3886</span>
            </div>
            <div class="d">
                <span class="fl">尺码：</span>
                <ul>
                    <li class="checked">43cm
                        <div class="e"></div>
                    </li>
                    <li>45cm
                        <div class="e"></div>
                    </li>
                    <li>50cm
                        <div class="e"></div>
                    </li>
                </ul>
            </div>
            <div class="d">
                <span class="fl">颜色选择：</span>
                <ul>
                    <li>粉色
                        <div class="e"></div>
                    </li>
                    <li class="checked">白色
                        <div class="e"></div>
                    </li>
                </ul>
            </div>
            <div class="">
                <div class="d_sh">
                    分享
                    <div class="d_sh_bg">
                        <a href="#"><img src="图片1/sh_1.gif"/></a>
                        <a href="#"><img src="图片1/sh_2.gif"/></a>
                        <a href="#"><img src="图片1/sh_3.gif"/></a>
                        <a href="#"><img src="图片1/sh_4.gif"/></a>
                        <a href="#"><img src="图片1/sh_5.gif"/></a>
                    </div>
                </div>
                <div class="d_care"><a >关注商品</a></div>
            </div>
            <div class="des_join">
                <div class="j_nums">
                    <input type="text" value="1" name="" class="n_ipt"/>
                    <input type="button" value="" class="n_btn_1"/>
                    <input type="button" value="" class="n_btn_2"/>
                </div>
                <span style="float: left"><a><img src="图片1/j_car.png"/></a></span>
            </div>
        </div>
        <div class="s_brand"style="position:relative;left:400px;top: -1100px">
            <div class="s_brand_img"><img src="图片1/sbrand.jpg" width="188" height="132"/></div>
            <div class="s_brand_c"><a href="#">进入品牌专区</a></div>
        </div>
    </div>

    <div class="content" style="position: relative;top: -700px">
        <!--用户还喜欢-->
        <div class="l_history" style="position: relative;left: -90px">
            <div class="fav_t">用户还喜欢</div>
            <ul>
                <li>
                    <div class="img"><a href="#"><img src="图片1/his_1.jpg" /></a></div>
                    <div class="name"><a href="#">科爱KEAL儿童日本书包减负护脊</a></div>
                    <div class="price">
                        <span>¥599</span>
                    </div>
                </li>
                <li>
                    <div class="img"><a href="#"><img src="图片1/his_2.jpg" /></a></div>
                    <div class="name"><a href="#">科爱KEAL小学生减负护脊书包超轻</a></div>
                    <div class="price">
                        <span>¥79</span>
                    </div>
                </li>
                <li>
                    <div class="img"><a href="#"><img src="图片1/his_3.jpg"/></a></div>
                    <div class="name"><a href="#">珠韵首饰 天然白色珍珠项链</a></div>
                    <div class="price">
                        <span>¥339</span>
                    </div>
                </li>
                <li>
                    <div class="img"><a href="#"><img src="图片1/his_4.jpg" /></a></div>
                    <div class="name"><a href="#">珠韵首饰 新品18K黄金珍珠耳钉</a></div>
                    <div class="price">
                        <span>¥1860</span>
                    </div>
                </li>
                <li>
                    <div class="img"><a href="#"><img src="图片1/his_5.jpg" /></a></div>
                    <div class="name"><a href="#">珠韵首饰 姝丽大珍珠项链</a></div>
                    <div class="price">
                        <span>¥758</span>
                    </div>
                </li>
            </ul>
        </div>

        <div class="l_list" style="position: relative;left: 670px;top: -1237px">
            <!--推荐搭配-->
            <div class="des_border">
                <div class="des_tit">
                    <ul>
                        <li class="current">推荐搭配</li>
                    </ul>
                </div>
                <div class="team_list">
                    <div class="img"><a href="#"><img src="图片1/mat_1.jpg" /></a></div>
                    <div class="name"><a href="#">粤通国际珠宝 999足金</a></div>
                    <div class="price">
                        <div class="checkbox">
                            <input type="checkbox" name="zuhe" checked="checked"/>
                        </div>
                        <span>￥76</span>
                    </div>
                </div>
                <div class="team_icon"><img src="图片1/jia_b.gif"/></div>
                <div class="team_list">
                    <div class="img"><a href="#"><img src="图片1/mat_2.jpg"/></a></div>
                    <div class="name"><a href="#">珠韵 9.5-10.5mm珍珠项链</a></div>
                    <div class="price">
                        <div class="checkbox">
                            <input type="checkbox" name="zuhe"/>
                        </div>
                        <span>￥1890</span>
                    </div>
                </div>
                <div class="team_icon"><img src="图片1/jia_b.gif"/></div>
                <div class="team_list">
                    <div class="img"><a href="#"><img src="图片1/mat_3.jpg"/></a></div>
                    <div class="name"><a href="#">清新耳环</a></div>
                    <div class="price">
                        <div class="checkbox">
                            <input type="checkbox" name="zuhe" checked/>
                        </div>
                        <span>￥232</span>
                    </div>
                </div>
                <div class="team_icon"><img src="图片1/equl.gif"/></div>
                <div class="team_sum">
                    套餐价：￥<span>2000</span><br/>
                    <input type="text" value="1" class="sum_ipt"/><br/>
                    <a href="#"><img src="图片1/z_buy.gif"/></a>
                </div>
            </div>
            <!--商品属性-->
            <div class="des_border">
                <div class="des_tit">
                    <ul>
                        <li class="current"><a href="#p_attribute">商品属性</a></li>
                        <li><a href="#p_details">商品详情</a></li>
                        <li><a href="#p_comment">商品评论</a></li>
                    </ul>
                </div>
                <div class="des_con" id="p_attribute">
                    <table border="0" align="center" style="width:100%; margin:10px auto;"
                           cellspacing="0" cellpadding="0">
                        <tr>
                            <td>商品名称：天然淡水珍珠</td>
                            <td>商品编号：1546211</td>
                            <td>品牌： 珠韵首饰</td>
                            <td>上架时间：2015-09-06 09:19:09</td>
                        </tr>
                        <tr>
                            <td>商品毛重：160.00g</td>
                            <td>商品产地：法国</td>
                            <td>珍珠形状：正圆</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td>镶嵌材质：纯银</td>
                            <td>款式：项链</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                    </table>
                </div>
            </div>
            <!--商品详情-->
            <div class="des_border" id="p_details">
                <div class="des_t">商品详情</div>
                <div class="des_con">
                    <p align="center">
                        <img src="图片1/de2.jpg"/><br/><br/>
                        <img src="图片1/de3.jpg"/><br/><br/>
                        <img src="图片1/de4.jpg"/><br/><br/>
                        <img src="图片1/de5.jpg"/><br/><br/>
                        <img src="图片1/de6.jpg"/><br/><br/>
                        <img src="图片1/de7.jpg"/><br/><br/>
                        <img src="图片1/de8.jpg"/><br/><br/>
                    </p>
                </div>
            </div>
            <!--商品评论-->
            <div class="des_border" id="p_comment">
                <div class="des_t">商品评论</div>
                <table border="0" class="jud_tab" cellspacing="0" cellpadding="0">
                    <tr>
                        <td width="175" class="jud_per">
                            <p>80.0%</p>好评度
                        </td>
                        <td width="300">
                            <table border="0" style="width:100%;" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td width="90">好评<span color="#999999">（80%）</span></td>
                                    <td><img src="图片1/pl.gif" align="absmiddle"/></td>
                                </tr>
                                <tr>
                                    <td>中评<span color="#999999">（20%）</span></td>
                                    <td><img src="图片1/pl.gif" align="absmiddle"/></td>
                                </tr>
                                <tr>
                                    <td>差评<span color="#999999">（0%）</span></td>
                                    <td><img src="图片1/pl.gif" align="absmiddle"/></td>
                                </tr>
                            </table>
                        </td>
                        <td width="185" class="jud_bg">
                            购买过珠韵首饰 天然银扣珍珠项链的顾客，在收到商品才可以对该商品发表评论
                        </td>
                        <td class="jud_bg">您可对已购买商品进行评价<br/><a href="#"><img src="图片1/btn_jud.gif"/></a></td>
                    </tr>
                </table>
                <table border="0" class="jud_list" style="width:100%; margin-top:30px;" cellspacing="0" cellpadding="0">
                    <tr valign="top">
                        <td width="160"><img src="图片1/peo1.jpg" width="20" height="20" align="absmiddle"/>&nbsp;向死而生
                        </td>
                        <td width="180">
                            颜色分类：<font color="#999999">粉色</font> <br/>
                            型号：<font color="#999999">43cm</font>
                        </td>
                        <td>
                            产品很好，香味很喜欢，必须给赞。 <br/>
                            <font color="#999999">2015-09-24</font>
                        </td>
                    </tr>
                    <tr valign="top">
                        <td width="160"><img src="图片1/peo2.jpg" width="20" height="20" align="absmiddle"/>&nbsp;就是这么想的
                        </td>
                        <td width="180">
                            颜色分类：<font color="#999999">粉色</font> <br/>
                            型号：<font color="#999999">43cm</font>
                        </td>
                        <td>
                            送朋友，她很喜欢，大爱。 <br/>
                            <font color="#999999">2015-09-24</font>
                        </td>
                    </tr>
                    <tr valign="top">
                        <td width="160"><img src="图片1/peo3.jpg" width="20" height="20" align="absmiddle"/>&nbsp;墨镜墨镜
                        </td>
                        <td width="180">
                            颜色分类：<font color="#999999">白色</font> <br/>
                            型号：<font color="#999999">43cm</font>
                        </td>
                        <td>
                            大家都说不错<br/>
                            <font color="#999999">2015-09-24</font>
                        </td>
                    </tr>
                    <tr valign="top">
                        <td width="160"><img src="图片1/peo4.jpg" width="20" height="20" align="absmiddle"/>&nbsp;那*****洋
                            <br/><font color="#999999">（匿名用户）</font></td>
                        <td width="180">
                            颜色分类：<font color="#999999">白色</font> <br/>
                            型号：<font color="#999999">43cm</font>
                        </td>
                        <td>
                            下次还会来买，推荐。<br/>
                            <font color="#999999">2015-09-24</font>
                        </td>
                    </tr>
                </table>
                <div class="pages">
                    <a href="#" class="p_pre">上一页</a><a href="#" class="cur">1</a><a href="#">2</a><a
                        href="#">3</a>...<a href="#">20</a><a href="#" class="p_pre">下一页</a>
                </div>
            </div>
        </div>
    </div>
    </div>
</body>
</html>

登入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登入</title>
    <link rel="stylesheet" href="css1/d.css">
    <link rel="stylesheet" href="css1/e.css">
</head>
<body>
<header id="aa">
    <div class="qq clear">
        <a class="fl" href="#"><img src="图片1/loginlogo.jpg" alt=""/></a>
    </div>
</header>
<section id="secBody">
    <div class="innerBody clear">
        <img class="fl" src="图片1/loadimg.jpg" alt=""/>
        <div class="tableWrap fr">
            <form action="#">
                <div class="tableTap clear">
                    <h3 class="fl">1号店用户登录</h3>
                    <a class="fr" href="注册.html">注册账号</a>
                </div>
                <div class="tableItem">
                    <i class="userHead"></i>
                    <input type="text" placeholder="邮箱/手机/用户名" required />
                </div>
                <div class="tableItem">
                    <i class="userLock"></i>
                    <input type="password" placeholder="密码" required/>
                </div>
                <div class="tableAuto clear">
                    <a class="autoMatic fl" href="#"></a>
                        <input type="checkbox" name="cb1" id="login">
                        <label for="login" class='checkbox'>自动登录</label>
                    <a class="fr" href="#">忘记密码？</a>
                </div>
                <button class="按钮">登录</button>
            </form>
            <h2 class="moreWeb">更多合作网站账号登录</h2>
            <div class="outType clear">
                <ul class="loadType clear">
                    <li class="fl"><a href="#"></a></li>
                    <li class="fl"><a href="#"></a></li>
                    <li class="fl"><a href="#"></a></li>
                    <li class="fl"><a href="#"></a></li>
                    <li class="loadMore fr">更多合作网站<i></i></li>
                </ul>
            </div>
        </div>
    </div>
</section>
<footer id="底部">
    <p><a href="#">沪ICP备13044278号</a>|&nbsp;&nbsp;合字B1.B2-20130004&nbsp;&nbsp;|<a href="#">营业执照</a></p>
    <p>Copyright &copy; 1号店网上超市 2007-2016，All Rights Reserved</p>
</footer>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link  rel="stylesheet" href="css1/d.css"/>
    <link rel="stylesheet" href="css1/注册.css">
</head>
<body>
<header id="aa">
    <div class="qq clear">
        <a class="fl" href="#"><img src="图片1/loginlogo.jpg"/></a>
    </div>
</header>
<section id="a">
    <div class="b">
        <h2>1号店注册</h2>
        <form action="#">
            <div class="c">
                <span>手机号</span>
                <input type="text" required placeholder="手机号"/>
            </div>
            <div class="clear">
                <div class="c dome fl">
                    <span>手机号</span>
                    <input type="text" required placeholder="手机号"/>
                </div>
                <a class="oo fr" href="#">获取验证码</a>
            </div>
            <div class="c">
                <span>设置密码</span>
                <input type="password" required placeholder="密码"/>
            </div>
            <div class="c">
                <span>确认密码</span>
                <input type="password" required placeholder="确认密码"/>
            </div>
            <p class="d">点击注册，表示您同意1号店 <a href="#">《服务协议》</a></p>
            <button class="按钮"><a href="登入.html" id="s">同意协议并注册</a> </button>
        </form>
    </div>
</section>
<footer id="底部">
    <p><a href="#">沪ICP备13044278号</a>|&nbsp;&nbsp;合字B1.B2-20130004&nbsp;&nbsp;|<a href="#">营业执照</a></p>
    <p>Copyright &copy; 1号店网上超市 2007-2016，All Rights Reserved</p>
</footer>
</body>
</html>

猜你喜欢