概述
一号店项目
主页面
<!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;
}
.li{
color: red;
}
. li{
display: inline-block;
font-size: 12px;
font-weight: lighter;
color:dimgray;
margin: 0px 5px;
vertical-align: top;
}
.ul{
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;
}
.ul{
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:buue;
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="images/t_arrow.gif"> |</li>
<li><a href="#">客户服务</a><img src="images/t_arrow.gif">
<div>
<p><a href="#">客服服务</a></p>
<p><a href="#">客服服务</a></p>
<p><a href="#">客服服务</a></p>
</div></li>
<li><a href="#">| 网站导航</a><img src="images/t_arrow.gif">|</li>
<li>关注我们：<a href="#"><img src="images/sh1.png"></a> <a href="#"><img src="images/sh2.png"></a> |</li>
<li><a href="#"> 手机版</a> <img src="images/s_tel.png"> </li>
</ul>
</header>
<section>
<div class="搜索">
<img class="loginlogo" src="images/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="images/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="images/phone.png">
</div>
<div class="左边导航">
<ul>
<li><img src="images/nav1.png"> 进口食品、生鲜<img src="images/n_arrow.gif"></li>
<li><img src="images/nav2.png"> 食品、饮料、酒<img src="images/n_arrow.gif"></li>
<li><img src="images/nav3.png"> 母婴、玩具、童装<img src="images/n_arrow.gif"></li>
<li><img src="images/nav4.png"> 家居、家庭清洁、纸品<img src="images/n_arrow.gif"></li>
<li><img src="images/nav5.png"> 美妆、个人护理、洗护<img src="images/n_arrow.gif"></li>
<li><img src="images/nav6.png"> 女装、内衣、中老年<img src="images/n_arrow.gif"></li>
<li><img src="images/nav7.png"> 鞋靴、箱包、腕表配饰<img src="images/n_arrow.gif"></li>
<li><img src="images/nav8.png"> 男装、运动<img src="images/n_arrow.gif"></li>
<li><img src="images/nav9.png"> 手机、小家电、电脑<img src="images/n_arrow.gif"></li>
<li><img src="images/nav10.png"> 礼品、充值<img src="images/n_arrow.gif"></li>
</ul>
</div>
<div class="中部">
<img src="images/ban1.jpg">
<img src="images/b_left.png">
<img src="images/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="images/oneAD.jpg">
</div>
</div>
<div id="nb1">
<div class="tu1">
<img src="images/l_img.jpg">
<p>
<span>￥53.00</span> 16R
</p>
</div>
<div class="tu2">
<ul>
<li><img src="images/hot1.jpg"></li>
<li><a href="#">德国进口</a> </li>
<li><a href="#">德亚全脂纯牛奶200ml*48盒 </a> </li>
<li><span>￥189</span> 26R </li>
<li><img src="images/hot.png" class="bbb"></li>
</ul>
<ul>
<li><img src="images/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="images/hot.png" class="bbb"></li>
</ul>
<ul>
<li><img src="images/hot3.jpg"></li>
<li><a href="#">倩碧特惠组合套装</a> </li>
<li><a href="#">倩碧补水组合套装8折促销</a> </li>
<li><span>￥368</span> 18R </li>
<li><img src="images/hot.png" class="bbb"></li>
</ul>
<ul>
<li><img src="images/hot1.jpg"></li>
<li><a href="#">品利特级橄榄油</a> </li>
<li><a href="#">750ml*4瓶装组合 西班牙原装进口</a> </li>
<li><span>￥280</span> 30R </li>
<li><img src="images/hot.png" class="bbb"></li>
</ul>
</div>
</div>
<img src="images/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="images/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="images/fre_1.jpg"></li>
</ul>
<ul class="bb">
<li><a href="#">微笑果园SMILE 智利进口绿奇异果</a> </li>
<li>￥84.00</li>
<li><img src="images/fre_2.jpg"></li>
</ul>
<ul class="bb">
<li><a href="#">新鲜美味 进口美食</a></li>
<li>￥98.00</li>
<li><img src="images/fre_3.jpg"></li>
</ul>
<ul class="bb">
<li><a href="#">新鲜美味 进口美食</a></li>
<li>￥24.00</li>
<li><img src="images/fre_4.jpg"></li>
</ul>
<ul class="bb">
<li><a href="#">新鲜美味 纯牛奶</a></li>
<li>￥142.00</li>
<li><img src="images/fre_5.jpg"></li>
</ul>
<ul class="bb">
<li><a href="#">莫斯利安</a></li>
<li>￥62.00</li>
<li><img src="images/fre_6.jpg"></li>
</ul>
</div>
<div class="tu3">
<img src="images/fre_b1.jpg"><br>
<img src="images/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="images/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="images/make_1.jpg"></li>
</ul>
<ul class="bb">
<li><a href="#">洗衣液</a> </li>
<li>￥60.00</li>
<li><img src="images/make_2.jpg"></li>
</ul>
<ul class="bb">
<li><a href="#">洗发水</a></li>
<li>￥160.00</li>
<li><img src="images/make_3.jpg"></li>
</ul>
<ul class="bb">
<li><a href="#">男士洗发水</a></li>
<li>￥120.00</li>
<li><img src="images/make_4.jpg"></li>
</ul>
<ul class="bb">
<li><a href="#">美宝莲粉饼</a></li>
<li>￥260.00</li>
<li><img src="images/make_5.jpg"></li>
</ul>
<ul class="bb">
<li><a href="#">男士设计 洗面奶</a></li>
<li>￥90.00</li>
<li><img src="images/make_6.jpg"></li>
</ul>
</div>
<div class="tu3">
<img src="images/make_b1.jpg"><br>
<img src="images/make_b2.jpg">
</div>
</div>
<img src="images/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="images/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="images/baby_1.jpg"></li>
</ul>
<ul class="bb">
<li><a href="#">妈咪纸尿裤</a> </li>
<li>￥260.00</li>
<li><img src="images/baby_2.jpg"></li>
</ul>
<ul class="bb">
<li><a href="#">儿童玩具 挖掘机</a></li>
<li>￥160.00</li>
<li><img src="images/baby_3.jpg"></li>
</ul>
<ul class="bb">
<li><a href="#">纸尿裤</a></li>
<li>￥260.00</li>
<li><img src="images/baby_4.jpg"></li>
</ul>
<ul class="bb">
<li><a href="#">儿童推车</a></li>
<li>￥86.00</li>
<li><img src="images/baby_5.jpg"></li>
</ul>
<ul class="bb">
<li><a href="#">奶粉</a></li>
<li>￥660.00</li>
<li><img src="images/baby_6.jpg"></li>
</ul>
</div>
<div class="tu3">
<img src="images/make_b1.jpg"><br>
<img src="images/make_b2.jpg">
</div>
</div>
<div id="nb8">
<ul>
<li><img src="images/b1.png"></li>
<li>正品保障</li>
<li>正品行货 放心购买</li>
</ul>
<ul>
<li><img src="images/b2.png"></li>
<li>满38包邮</li>
<li>满38包邮 免运费</li>
</ul>
<ul>
<li><img src="images/b3.png"></li>
<li>天天低价</li>
<li>天天低价 畅选无忧</li>
</ul>
<ul>
<li><img src="images/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="images/er.gif" >
<ul>
<li><img src="images/b_sh_1.png"><a href="#">新浪微博</a> </li>
<li><img src="images/b_sh_2.png"><a href="#">腾讯微博</a> </li>
<li><p>服务热线：</p></li>
<li><span>400-123-4567</span></li>
</ul>
<img src="images/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="images/b_1.gif"></li>
<li><img src="images/b_2.gif"></li>
<li><img src="images/b_3.gif"></li>
<li><img src="images/b_4.gif"></li>
<li><img src="images/b_5.gif"></li>
<li><img src="images/b_6.gif"></li>
</ul>
</div>
</footer>
</body>
</html>
详细页面
<!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;
}
.p{
color: red;
}
. li{
display: inline-block;
font-size: 12px;
font-weight: lighter;
color:dimgray;
margin: 0px 5px;
vertical-align: top;
}
.li{
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;
}
.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;
}
.ul{
width: 1230px;
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: 70px;
top: 180px;
}
. nav{
position: relative;
top: 15px;
}
. a{
color: black;
font-weight: bolder;
}
. .hong{
color: red;
}
#nb1 .tu1{
margin-left: 25px;
}
#nb1 .tu1 img{
width: 390px;
height: 390px;
}
#nb1 .tu1 p{
font-size: 13px;
}
#nb1 .tu1 p span{
color: red;
font-style: oblique;
}
#nb1 ul li:nth-child(1){
font-size: 17px;
font-weight: bolder;
}
#nb1 ul li:nth-child(2){
color: gray;
font-size: 13px;
margin-bottom: 30px;
}
#nb1 ul li:nth-child(3){
font-size: 12px;
color: dimgray;
margin-bottom: 10px;
}
#nb1 ul li:nth-child(3) span{
font-size: 17px;
font-weight: bolder;
color: red;
}
#nb1 ul li:nth-child(4){
font-size: 12px;
color: dimgray;
margin-bottom: 30px;
}
#nb1 ul li:nth-child(4) span{
font-size: 15px;
}
#nb1 ul li:nth-child(5){
font-size: 12px;
color: dimgray;
margin-bottom: 19px;
}
#nb1 ul li:nth-child(5) span{
font-size: 15px;
width: 50px;
height: 30px;
padding: 5px 10px;
margin: 5px;
border: 1px solid dimgray;
}
#nb1 ul li:nth-child(5) span:nth-child(1){
border: 2.5px solid red;
background: url("images/ch.png") no-repeat 46px 13px;
}
#nb1 ul li:nth-child(6){
font-size: 15px;
color: dimgray;
}
#nb1 ul li:nth-child(6) span{
padding: 5px 15px;
margin: 5px;
border: 1px solid dimgray;
}
#nb1 ul li:nth-child(6) span:nth-child(2){
border: 2.5px solid red;
background: url("images/ch.png") no-repeat 42px 12px;
}
#nb1 ul li .don:hover{
border: 2.5px solid red;
transform: translateX(5px);
}
#nb1 . p{
margin-top: 50px;
text-indent: 2em;
margin-left: 40px;
color: dimgray;
font-size: 15px;
background: url("images/sh.png") no-repeat 12px 3px;
}
#nb1 . p span{
padding-left: 20px;
margin-left: 80px;
background: url("images/care.png") no-repeat 0px 2px;
}
#nb1 .tu3{
width: 150px;
margin-top: -15px;
margin-left: 40px;
padding-top: 5px;
border: 1px solid grey;
display: none;
}
#nb1 .tu3 img{
margin: 5px;
}
#nb1 . p:hover +.tu3{
display: block;
}
#nb1 .spen{
position: relative;
top: 50px;
left: 35px;
}
#nb1 . span:nth-child(1){
padding: 12px 20px;
position: relative;
top: -17px;
left:5px;
border: 1px solid grey;
background:url("images/jian.gif") no-repeat 52px 22px;
}
#nb1 . span:nth-child(1) b{
position: relative;
top: -5px;
left: 20px;
}
#nb1 .tu2{
height: 360px;
position: relative;
top: -420px;
left: 400px;
}
#nb1 .tu4{
position: relative;
top: -380px;
}
.tu4 ul li{
border: 1px solid gainsboro;
display: inline-block;
padding: 3px 3px 0px 3px;
}
#nb1{
height: 650px;
}
#nb1 .tu4 ul li:nth-child(1){
width: 15px;
height: 28px;
background: url("images/r_left.png") no-repeat;
position: relative;
top: -30px;
}
#nb1 .tu4 ul li:nth-child(6){
width: 15px;
height: 28px;
background: url("images/r_right.png") no-repeat;
position: relative;
top: -30px;
}
#nb1 .tu4 ul li img{
width: 100px;
height: 100px;
}
#nb1 .tu5{
width: 188px;
height: 190px;
border: 1px solid gray;
position: relative;
left: 970px;
top: -900px;
}
#nb1 .tu5 img{
width: 188px;
height: 190px;
}
#nb1 .tu5 h1{
border: 1px solid grey;
width: 168px;
text-align: center;
padding: 10px ;
margin-top: -4px;
margin-left: -1px;
font-size: 20px;
font-weight: normal;
background-color: gainsboro;
}
#nb2 .tu1 ul{
width: 200px;
height: 250px;
border: 1px solid gray;
margin: 0px;
}
#nb2 .tu1 ul img{
}
#nb2 .tu1 ul li:nth-child(2){
font-size: 15px;
}
#nb2 .tu1 ul li:nth-child(2):hover{
color: red;
}
#nb2 .tu1 ul li:nth-child(3){
color: brown;
font-size: 25px;
}
#nb2 .tu1 ul li{
text-align: center;
margin-left: -40px;
}
#nb2 .tu1 p{
background-color:gainsboro;
padding: 10px;
margin-bottom: 0px;
}
#nb2 .tu2 ul {
display: inline-block;
width: 160px;
vertical-align: top;
margin-top: -15px;
}
#nb2 .tu2 ul li img{
margin-bottom: 20px;
}
#nb2 .tu2 ul li:nth-child(2){
font-size: 13px;
font-weight: normal;
color:gray;
margin-bottom: 10px;
}
#nb2 .tu2 ul li:nth-child(2):hover{
color: red;
}
#nb2 .tu2 ul li:nth-child(3) span{
color: grey;
font-size: 20px;
}
#nb2 .tu2{
width: 900px;
border-bottom: 1px solid grey;
position: relative;
left: 250px;
top: -1315px;
}
#nb2 .tu2 p{
width: 900px;
background-color: gainsboro;
padding: 10px;
margin-left: -10px;
}
#nb2 .tu2 p span{
background-color: white;
padding: 12px;
margin-left: -10px;
border-top: 2px solid red;
}
#nb2 .tu2 .one{
margin-top: 70px;
}
#nb2 .tu2 .two li:nth-child(1){
margin-top: 40px;
color: red;
}
#nb2 .tu2 .two li:nth-child(1) span{
font-size: 25px;
}
#nb2 .tu3 p{
background-color:gainsboro;
width: 1050px;
text-indent: 15px;
padding: 10px;
}
#nb2 .tu3 p span{
margin: 15px 40px 15px -25px;
}
#nb2 .tu3 p span a{
color: grey;
}
#nb2 .tu3 p span a:hover{
color: red;
}
#nb2 .tu3 p span:nth-child(1){
background-color: white;
padding: 10px;
border-top: 2px solid red;
}
#nb2 .tu3 ul{
display: inline-block;
width: 170px;
vertical-align: top;
margin-top: -15px;
margin-right: -15px;
padding: 30px;
}
#nb2 .tu3 ul:nth-child(5){
width: 250px;
}
#nb2 .tu3 ul li{
font-size: 13px;
color: grey;
margin: 5px;
}
#nb2 .tu3{
position: relative;
left: 250px;
top: -1320px;
}
#nb2 .tu4 p{
border-top: 2px solid red;
background-color:gainsboro;
width: 1050px;
text-indent: 15px;
padding: 10px;
color: red;
}
#nb2 .tu4{
width: 1050px;
position: relative;
left: 250px;
top: -1340px;
}
#nb2 .tu4 ul{
text-align: center;
}
#nb2 .tu5 p{
border-top: 2px solid red;
background-color:gainsboro;
width: 1050px;
text-indent: 15px;
padding: 10px;
color: red;
}
#nb2 .tu5 ul{
display: inline-block;
vertical-align: top;
}
#nb2 .tu5 .one ul:nth-child(1) li:nth-child(1){
font-size: 30px;
color: red;
font-weight: bolder;
}
#nb2 .tu5 .one ul:nth-child(1) li:nth-child(2){
color: red;
text-align: center;
}
#nb2 .tu5 .one ul:nth-child(4) li:nth-child(2){
text-align: center;
}
#nb2 .tu5 .two,.thr,.for,.fiv {
border-bottom: 1px solid grey;
width: 1050px;
}
#nb2 .tu5 .two ul,.thr ul,.for ul,.fiv ul{
margin-right: 50px;
}
#nb2 .tu5 span{
color: grey;
}
#nb2 nav{
margin: 50px;
float: right;
}
#nb2 nav input{
padding: 5px;
background-color: white;
border-radius: 4px;
}
#nb2 nav input:hover{
background-color: grey;
}
#nb2 nav span{
border: 1px solid grey;
padding: 6px 15px;
border-radius: 3px;
}
#nb2 nav span:hover{
background-color: orangered;
}
.aaa{
background-color: orangered;
}
#nb2 .tu5{
width: 1050px;
position: relative;
left: 250px;
top: -1300px;
}
#nb2{
overflow: hidden;
}
#nb8{
width: 1200px;
position: relative;
left: 100px;
top: -1300px;
}
#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: -1300px;
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: 1300px;
height: 6000px;
position: relative;
top: -10px;
overflow: hidden;
}
#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="images/t_arrow.gif"> |</li>
<li><a href="#">客户服务</a><img src="images/t_arrow.gif">
<div>
<p><a href="#">客服服务</a></p>
<p><a href="#">客服服务</a></p>
<p><a href="#">客服服务</a></p>
</div></li>
<li><a href="#">| 网站导航</a><img src="images/t_arrow.gif">|</li>
<li>关注我们：<a href="#"><img src="images/sh1.png"></a> <a href="#"><img src="images/sh2.png"></a> |</li>
<li><a href="#"> 手机版</a> <img src="images/s_tel.png"> </li>
</ul>
</header>
<section>
<div class="搜索">
<img class="loginlogo" src="images/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="images/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="images/phone.png">
</div>
<div id="nb1">
<div class="tu1">
<br>
<p> 所有团购 > 包饰 > 珠韵首饰 <span>冰韵 天然白色正圆S925银扣珍珠项链 </span></p>
<img src="images/p_big.jpg">
</div>
<div class="tu2">
<ul>
<li>珠韵首饰 冰韵 天然白色正圆S925银扣珍珠项链</li>
<li>全国包邮 送妈妈，正圆级淡水珍珠，白色S925银链扣，使用方便，尊贵礼物。</li>
<li>本店价格：<span>¥1786</span></li>
<li>参考价：<span>¥3886</span></li>
<li> 尺码： <span>43cm </span><span class="don">45cm</span><span class="don">50cm</span> </li>
<li> 颜色选择： <span class="don">粉色</span> <span>白色</span></li>
</ul>
<div class="分享">
<p>分享
<span>关注商品</span>
</p>
<div class="tu3">
<img src="images/sh_1.gif">
<img src="images/sh_2.gif">
<img src="images/sh_3.gif">
<img src="images/sh_4.gif">
<img src="images/sh_5.gif">
</div>
</div>
<div class="购物车">
<span>1
<b><img src="images/jia.gif"></b></span>
<span><img src="images/j_car.png"></span>
</div>
</div>
<div class="tu4">
<ul>
<li></li>
<li><img src="images/ps1.jpg"></li>
<li><img src="images/ps2.jpg"></li>
<li><img src="images/ps3.jpg"></li>
<li><img src="images/ps4.jpg"></li>
<li></li>
</ul>
</div>
<div class="tu5">
<img src="images/sbrand.jpg">
<h1>进入品牌专区</h1>
</div>
</div>
<div id="nb2">
<div class="tu1">
<p>用户还喜欢</p>
<ul>
<li><img src="images/his_1.jpg"></li>
<li>科爱KEAL儿童日本书包减负护脊</li>
<li>¥599</li>
</ul>
<ul>
<li><img src="images/his_2.jpg"></li>
<li>科爱KEAL小学生减负护脊书包超</li>
<li>¥79</li>
</ul>
<ul>
<li><img src="images/his_3.jpg"></li>
<li>珠韵首饰 天然白色珍珠项链</li>
<li>¥339</li>
</ul>
<ul>
<li><img src="images/his_4.jpg"></li>
<li>珠韵首饰 新品18K黄金珍珠耳钉</li>
<li>¥1860</li>
</ul>
<ul>
<li><img src="images/his_5.jpg"></li>
<li>珠韵首饰 姝丽大珍珠项链</li>
<li>¥758</li>
</ul>
</div>
<div class="tu2">
<p><span>推荐搭配</span></p>
<ul>
<li><img src="images/mat_1.jpg" ></li>
<li>粤通国际珠宝 999足金</li>
<li>
<form method="get" action="#">
<input type="checkbox"><span style="margin-left: 60px">￥76</span>
</form>
</li>
</ul>
<img src="images/jia_b.gif" class="one">
<ul>
<li><img src="images/mat_2.jpg"></li>
<li>珠韵 9.5-10.5mm珍珠项链</li>
<li>
<form method="get" action="#">
<input type="checkbox"><span style="margin-left: 60px">￥1890</span>
</form>
</li>
</ul>
<img src="images/jia_b.gif" class="one">
<ul>
<li><img src="images/mat_3.jpg"></li>
<li>清新耳环</li>
<li>
<form method="get" action="#">
<input type="checkbox"><span style="margin-left: 60px">￥232</span>
</form>
</li>
</ul>
<img src="images/equl.gif" class="one">
<ul class="two">
<li>套餐价：<span>￥2000</span></li>
<li>
<form method="get" action="#">
<input type="text" style="width: 50px" value="1">
</form>
</li>
<li>
<form method="get" action="#">
<input type="image" src="images/z_buy.gif">
</form>
</li>
</ul>
</div>
<div class="tu3">
<p>
<span><a href="#">商品属性</a></span>
<span><a href="#details">商品详情</a></span>
<span><a href="#comment">商品评论</a></span>
</p>
<ul>
<li>商品名称：天然淡水珍珠</li>
<li>商品毛重：160.00g</li>
<li>镶嵌材质：纯银</li>
</ul>
<ul>
<li>商品编号：1546211</li>
<li>商品产地：法国</li>
<li>款式：项链</li>
</ul>
<ul>
<li>品牌： 珠韵首饰</li>
<li>珍珠形状：正圆</li>
</ul>
<ul>
<li>上架时间：2015-09-06 09:19:09</li>
</ul>
</div>
<div class="tu4">
<p >商品详情</p>
<ul>
<li><img src="images/de2.jpg"></li>
<li><img src="images/de3.jpg"></li>
<li><img src="images/de4.jpg"></li>
<li><img src="images/de5.jpg"></li>
<li><img src="images/de6.jpg"></li>
<li><img src="images/de7.jpg"></li>
<li><img src="images/de8.jpg"></li>
</ul>
</div>
<div class="tu5">
<p>商品评论</p>
<div class="one">
<ul>
<li>80.0%</li>
<li>好评度 </li>
</ul>
<ul>
<li>好评（80%） <img src="images/pl.gif"></li>
<li>中评（20%） <img src="images/pl.gif"></li>
<li>差评（0%） <img src="images/pl.gif"></li>
</ul>
<ul>
<li>购买过珠韵首饰 天然银扣珍珠项链</li>
<li>的顾客，在收到商品才可以对该商</li>
<li>品发表评论 </li>
</ul>
<ul>
<li>您可对已购买商品进行评价</li>
<li>
<form method="get" action="#">
<input type="image" src="images/btn_jud.gif">
</form>
</li>
</ul>
</div>
<div class="two">
<ul>
<li style="width: 120px"><img src="images/peo1.jpg">向死而生</li>
</ul>
<ul>
<li>颜色分类：<span>粉色</span></li>
<li>型号：<span>43cm</span></li>
</ul>
<ul>
<li>产品很好，香味很喜欢，必须给赞。 </li>
<li><span>2015-09-24</span></li>
</ul>
</div>
<div class="thr">
<ul>
<li style="width: 120px"><img src="images/peo2.jpg">就是这么想的 </li>
</ul>
<ul>
<li>颜色分类：<span>粉色</span></li>
<li>型号：<span>43cm</span></li>
</ul>
<ul>
<li>送朋友，她很喜欢，大爱。 </li>
<li><span>2015-09-24</span></li>
</ul>
</div>
<div class="for">
<ul>
<li style="width: 120px"><img src="images/peo3.jpg">墨镜墨镜 </li>
</ul>
<ul>
<li>颜色分类：<span>白色</span></li>
<li>型号：<span>43cm</span></li>
</ul>
<ul>
<li>大家都说不错</li>
<li><span>2015-09-24</span></li>
</ul>
</div>
<div class="fiv">
<ul>
<li style="width: 120px"><img src="images/peo4.jpg">那*****洋 </li>
<li style="width: 120px"><span>（匿名用户）</span></li>
</ul>
<ul>
<li>颜色分类：<span>白色</span></li>
<li>型号：<span>43cm</span></li>
</ul>
<ul>
<li>下次还会来买，推荐。</li>
<li><span>2015-09-24</span></li>
</ul>
</div>
<nav>
<form method="get" action="#">
<input type="submit" value="上一页">
<span class="aaa">1</span>
<span class="bbb">2</span>
<span class="ccc">3</span>
...
<span class="ddd">20</span>
<input type="submit" value="下一页">
</form>
</nav>
</div>
</div>
<div id="nb8">
<ul>
<li><img src="images/b1.png"></li>
<li>正品保障</li>
<li>正品行货 放心购买</li>
</ul>
<ul>
<li><img src="images/b2.png"></li>
<li>满38包邮</li>
<li>满38包邮 免运费</li>
</ul>
<ul>
<li><img src="images/b3.png"></li>
<li>天天低价</li>
<li>天天低价 畅选无忧</li>
</ul>
<ul>
<li><img src="images/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="images/er.gif" >
<ul>
<li><img src="images/b_sh_1.png"><a href="#">新浪微博</a> </li>
<li><img src="images/b_sh_2.png"><a href="#">腾讯微博</a> </li>
<li><p>服务热线：</p></li>
<li><span>400-123-4567</span></li>
</ul>
<img src="images/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="images/b_1.gif"></li>
<li><img src="images/b_2.gif"></li>
<li><img src="images/b_3.gif"></li>
<li><img src="images/b_4.gif"></li>
<li><img src="images/b_5.gif"></li>
<li><img src="images/b_6.gif"></li>
</ul>
</div>
</footer>
</body>
</html>
注册页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
a {
text-decoration: none;
}
header{
overflow: hidden;
}
header .one img{
width: 145px;
height: 55px;
float: left;
margin-left: 20px;
margin-top: 20px;
}
header .two{
float: right;
margin-right: 20px;
margin-top: 20px;
}
header p{
display: inline-block;
margin-right: 40px;
color: grey;
font-size: 13px;
font-weight: lighter;
}
header a{
border: 1px grey solid;
padding: 5px;
color: dodgerblue;
}
header p a{
border: none;
}
header p a:hover{
color: orangered;
}
header .two a:nth-child(2){
color: black;
}
header a span img{
position: relative;
top: 3px;
margin: 0px 3px;
}
input{
width: 330px;
height: 54px;
margin: 10px;
text-indent: 2em;
margin-top: -5px;
}
.num1{
width: 194px;
}
.num2{
width: 126px;
height: 56px;
margin-left: -5px;
text-indent: 0em;
background-color: #57565f;
border: 1px solid grey;
border-radius: 3px;
}
section p{
font-size: 12px;
text-indent: 1em;
color: grey;
}
section a{
color: dodgerblue;
}
section .num3{
background-color: #ff3c3c;
border: 1px solid #ff3c3c;
border-radius: 5px;
text-indent: 0em;
font-size: 17px;
color: white;
}
h1{
text-indent: 5em;
}
section{
width: 360px;
margin: 0px auto;
}
footer p{
text-align: center;
font-size: 15px;
}
footer p a{
color: black;
}
footer p a:hover{
color: red;
}
</style>
</head>
<body>
<header>
<div class="one">
<img src="images/loginlogo.jpg">
</div>
<div class="two">
<p>您好，欢迎光临1号店！<a href="#">请登录</a></p>
<a href="#"><span><img src="images/runbun.png"></span>帮助中心<span><img src="images/turnb.png"></span></a>
</div>
</header>
<hr>
<section>
<div>
<h1>1号店注册</h1>
<form method="get" action="#">
<input type=text placeholder="手机号"><br>
<input type="text" placeholder="手机号" class="num1">
<input type=submit value="获取验证码" class="num2"><br>
<input type="password" placeholder="密码"><br>
<input type="password" placeholder="确认密码"><br>
<p>点击注册，表示您同意1号店 <a href="#">《服务协议》</a></p>
<input type="submit" value="同意协议并注册" class="num3">
</form>
</div>
</section>
<footer>
<p><a href="#">沪ICP备13044278号</a>| 合字B1.B2-20130004 |<a href="#">营业执照</a></p>
<p>Copyright © 1号店网上超市 2007-2016，All Rights Reserved</p>
</footer>
</body>
</html>
登入页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登入页面</title>
<style>
a {
text-decoration: none;
}
header{
overflow: hidden;
}
header .one img{
width: 145px;
height: 55px;
float: left;
margin-left: 20px;
margin-top: 20px;
}
header .two{
float: right;
margin-right: 20px;
margin-top: 20px;
}
header p{
display: inline-block;
margin-right: 40px;
color: grey;
font-size: 13px;
font-weight: lighter;
}
header a{
border: 1px grey solid;
padding: 5px;
color: dodgerblue;
}
header p a{
border: none;
}
header p a:hover{
color: orangered;
}
header .two a:nth-child(2){
color: black;
}
header a span img{
position: relative;
top: 3px;
margin: 0px 3px;
}
section .one{
float: left;
margin-left: 100px;
margin-top: 50px;
}
section .two {
float: right;
margin-right: 230px;
margin-top: 30px;
}
section .two p:nth-child(1){
font-weight: bolder;
font-size: 14px;
color: grey;
}
section .two .num1{
font-weight: lighter;
font-size: 12px;
margin-left: 190px;
color: dodgerblue;
}
section .two ul li{
display: inline-block;
position: relative;
left: -40px;
margin-right: 13px;
}
section .two ul li:nth-child(1){
width: 35px;
height: 35px;
background: url("images/qqf.png") no-repeat;
background-size: 35px;
}
section .two ul li:nth-child(1):hover{
background: url("images/qqt.png") no-repeat;
width: 35px;
height: 35px;
background-size: 35px;
}
section .two ul li:nth-child(2){
width: 35px;
height: 35px;
background: url("images/wbf.png") no-repeat;
background-size: 35px;
}
section .two ul li:nth-child(2):hover{
width: 35px;
height: 35px;
background: url("images/wbt.png") no-repeat;
background-size: 35px;
}
section .two ul li:nth-child(3){
width: 35px;
height: 35px;
background: url("images/zhif.png") no-repeat;
background-size: 35px;
}
section .two ul li:nth-child(3):hover{
width: 35px;
height: 35px;
background: url("images/zhit.png") no-repeat;
background-size: 35px;
}
section .two ul li:nth-child(4){
width: 35px;
height: 35px;
background: url("images/wxf.png") no-repeat ;
background-size: 35px;
}
section .two ul li:nth-child(4):hover{
width: 35px;
height: 35px;
background: url("images/wxt.png") no-repeat ;
background-size: 35px;
}
section .two .num2{
border: 1px solid grey;
width: 330px;
height: 54px;
text-indent: 4em;
background: url("images/userHead.png")no-repeat 20px 15px;
}
section .two .num3{
border: 1px solid grey;
width: 330px;
height: 54px;
text-indent: 4em;
background: url("images/lock.png")no-repeat 20px 12px;
}
section .two form p:nth-child(3){
color: grey;
font-weight: lighter;
font-size: 12px;
}
section .two .num4{
color: grey;
font-weight: lighter;
padding-left: 198px;
}
section .two .num5{
font-size: 20px;
color: white;
background-color: red;
border: none;
padding: 14px 148px;
}
section .two .num6{
color: grey;
font-size: 12px;
}
section .two ul li:nth-child(5){
padding-right: 30px;
color: grey;
font-size: 12px;
background: url("images/loadMore.png") no-repeat 75px 0px;
background-size: 20px;
position: relative;
left: -2px;
top: -15px;
}
section{
overflow: hidden;
}
footer p{
text-align: center;
font-size: 15px;
}
footer p a{
color: black;
}
footer p a:hover{
color: red;
}
</style>
</head>
<body>
<header>
<div class="one">
<img src="images/loginlogo.jpg">
</div>
<div class="two">
<p>您好，欢迎光临1号店！<a href="#">请登录</a></p>
<a href="#"><span><img src="images/runbun.png"></span>帮助中心<span><img src="images/turnb.png"></span></a>
</div>
</header>
<hr>
<section>
<div class="one">
<img src="images/loadimg.jpg">
</div>
<div class="two">
<p>1号店用户登录<a href= "注册页面.html" class="num1" target="_blank">注册账号</a></p>
<form method="get" action="#">
<p><input type= text required="" placeholder="邮箱/手机/用户名" class="num2"></p>
<p><input type="password" required="" placeholder="密码" class="num3"></p>
<p><input type= checkbox > 自动登入<a href="#" class="num4">忘记密码？</a></p>
<p><input type="submit" value="登入" class="num5"></p>
</form>
<p class="num6">更多合作网站账号登录</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>
</section>
<footer>
<p><a href="#">沪ICP备13044278号</a>| 合字B1.B2-20130004 |<a href="#">营业执照</a></p>
<p>Copyright © 1号店网上超市 2007-2016，All Rights Reserved</p>
</footer>
</body>
</html>
最后
以上就是儒雅茉莉为你收集整理的一号店的全部内容，希望文章能够帮你解决一号店所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复