一主页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="onewhole">
<p>送货至:四川</p>
<ul>
<li>你好!请<a href="#">登录</a> <a href="#">免费注册</a></li>
<li><a href="#">我的订单</a></li>
<li class="two">
<ul>
<li><a href="#">收藏夹 <img src="t_arrow.gif"></a></li>
<li>
<a href="#">客服服务 <img src="t_arrow.gif"></a>
<div id="one">
<div><a href="#">客服服务</a></div>
<div><a href="#">客服服务</a></div>
<div><a href="#">客服服务</a></div>
</div>
</li>
<li><a href="#">网站导航 <img src="t_arrow.gif"></a></li>
</ul>
</li>
<li>
关注我们:
<a href="#"> <img src="sh1.png"></a>
<a href="#"> <img src="sh2.png"></a>
</li>
<li><a href="#">手机版<img src="s_tel.png"></a></li>
</ul>
</div>
<div class="twowhole">
<ul>
<li><img src="logo.png"></li>
<li>
<input type="search" placeholder=" 请输入关键字">
<input type="submit" value="搜索">
</li>
<li class="one"><a href="#">购物车</a></li>
<li>
<ul>
<li><a href="#">咖啡</a></li>
<li><a href="#">inphone 6S</a></li>
<li><a href="#">新鲜美食</a></li>
<li><a href="#">蛋糕</a></li>
<li><a href="#">日用品</a></li>
<li><a href="#">连衣裙</a></li>
</ul>
</li>
</ul>
</div>
<div class="whole">
<div class="threewhole">
<p>全部商品分类</p>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">自营超市</a></li>
<li><a href="#">1号团</a></li>
<li><a href="#">1号超市</a></li>
<li><a href="#">女装</a></li>
<li><a href="#">美妆</a></li>
<li><a href="#">1号海购</a></li>
<li><a href="#">团购</a></li>
</ul>
<p><a href="#"><img src="phone.png"></a></p>
</div>
<div class="fourwhole">
<ul>
<li><img src="nav1.png"> 进口食品、生鲜</li>
<li><img src="nav2.png"> 食品、饮料、酒</li>
<li><img src="nav3.png"> 母婴、玩具、童装</li>
<li><img src="nav5.png"> 家居、家庭清洁、纸品</li>
<li><img src="nav6.png"> 美妆、个人护理、洗护</li>
<li><img src="nav7.png"> 女装、内衣、中老年</li>
<li><img src="nav8.png"> 鞋靴、箱包、腕表配饰</li>
<li><img src="nav4.png"> 男装、运动</li>
<li><img src="nav9.png"> 手机、小家电、电脑</li>
<li><img src="nav10.png"> 礼品、充值</li>
</ul>
</div>
<div class="three">
<img src="ban1.jpg">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
<div class="four">
<div>
<p> 快讯</p>
<p><a href="#">更多></a></p>
</div>
<div>
<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>
</div>
<div>
<p> 1号钱包</p>
</div>
<div>
<p> 收益日结,收益赚High!</p>
<img src="oneAD.jpg">
</div>
</div>
<div class="five">
<ul>
<li>
<img src="l_img.jpg">
<p>¥53.00</p>
<p>16R</p>
</li>
<li>
<p><img src="hot.png"></p>
<p><a href="#"><img src="hot1.jpg"></a></p>
<p><a href="#"><span>德国进口</span><br/>德亚全脂纯牛奶200ml*48盒</a></p>
<p>¥189</p>
<p>26R</p>
</li>
<li>
<p><img src="hot.png"></p>
<p><a href="#"><img src="hot2.jpg"></a></p>
<p><a href="#"><span>iphone 6S</span><br/>Apple/苹果 iPhone 6s Plus公开版</a></p>
<p>¥5288</p>
<p>25R</p>
</li>
<li>
<p><img src="hot.png"></p>
<p><a href="#"><img src="hot3.jpg"></a></p>
<p><a href="#"><span>倩碧特惠组合套装</span><br/>倩碧补水组合套装8折促销</a></p>
<p>¥368</p>
<p>18R</p>
</li>
<li>
<p><img src="hot.png"></p>
<p><a href="#"><img src="hot4.jpg"></a></p>
<p><a href="#"><span>品利特级橄榄油</span><br/>750ml*4瓶装组合 西班牙原装进口</a></p>
<p>¥280</p>
<p>30R</p>
</li>
</ul>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
<div class="six"><img src="mban_2.jpg"></div>
<div class="eight">
<div>
<ul>
<li>1F</li>
<li>进口 · 生鲜</li>
</ul>
<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 class="nine">
<ul>
<li><img src="fre_r.jpg"></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<ul>
<li><a href="#">进口水果</a></li>
<li><a href="#">奇异果</a></li>
<li><a href="#">西柚</a></li>
</ul>
<ul>
<li><a href="#">海鲜水产</a></li>
<li><a href="#">品质牛肉</a></li>
</ul>
<ul>
<li><a href="#">奶粉</a></li>
<li><a href="#">鲜活禽蛋</a></li>
<li><a href="#">进口酒</a></li>
</ul>
<ul>
<li><a href="#">进口奶粉</a></li>
<li><a href="#">鲜活禽蛋</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#">贝思客 草莓先生&蓝莓小姐</a></li>
<li>¥98.00</li>
<li><a href="#"><img src="fre_1.jpg"></a></li>
</ul>
<ul>
<li><a href="#">微笑果园SMILE 智利进口绿奇异果</a></li>
<li>¥84.00</li>
<li><a href="#"><img src="fre_2.jpg"></a></li>
</ul>
<ul>
<li><a href="#">新鲜美味 进口美食</a></li>
<li>¥98.00</li>
<li><a href="#"><img src="fre_3.jpg"></a></li>
</ul>
<ul>
<li><a href="#">新鲜美味 进口美食</a></li>
<li>¥24.00</li>
<li><a href="#"><img src="fre_4.jpg"></a></li>
</ul>
<ul>
<li><a href="#">新鲜美味 纯牛奶</a></li>
<li>¥142.00</li>
<li><a href="#"><img src="fre_5.jpg"></a></li>
</ul>
<ul>
<li><a href="#">莫斯利安</a></li>
<li>¥62.00</li>
<li><a href="#"><img src="fre_6.jpg"></a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#"><img src="fre_b1.jpg"></a></li>
<li><a href="#"><img src="fre_b2.jpg"></a></li>
</ul>
</div>
</div>
<div class="eight">
<div>
<ul>
<li>2F</li>
<li>个人美妆</li>
</ul>
<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 class="ten">
<ul>
<li><img src="make_r.jpg" style="width: 211px; height: 287px"></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<ul>
<li><a href="#">洗发护发</a></li>
<li><a href="#">牙刷牙膏</a></li>
</ul>
<ul>
<li><a href="#">面膜</a></li>
<li><a href="#">补水面膜</a></li>
<li><a href="#">香水</a></li>
</ul>
<ul>
<li><a href="#">面霜</a></li>
<li><a href="#">洗面奶</a></li>
<li><a href="#">脱毛膏</a></li>
</ul>
<ul>
<li><a href="#">沐浴露</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#">美宝莲粉饼</a></li>
<li>¥260.00</li>
<li><a href="#"><img src="make_1.jpg"></a></li>
</ul>
<ul>
<li><a href="#">洗衣液</a></li>
<li>¥60.00</li>
<li><a href="#"><img src="make_2.jpg"></a></li>
</ul>
<ul>
<li><a href="#">洗发水</a></li>
<li>¥160.00</li>
<li><a href="#"><img src="make_3.jpg"></a></li>
</ul>
<ul>
<li><a href="#">男士洗发水</a></li>
<li>¥120.00</li>
<li><a href="#"><img src="make_4.jpg"></a></li>
</ul>
<ul>
<li><a href="#">美宝莲粉饼</a></li>
<li>¥260.00</li>
<li><a href="#"><img src="make_5.jpg"></a></li>
</ul>
<ul>
<li><a href="#">男士设计 洗面奶</a></li>
<li>¥90.00</li>
<li><a href="#"><img src="make_6.jpg"></a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#"><img src="make_b1.jpg"></a></li>
<li><a href="#"><img src="make_b2.jpg"></a></li>
</ul>
</div>
</div>
<div class="eight">
<div>
<ul>
<li>3F</li>
<li>女婴玩具</li>
</ul>
<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 class="eleven">
<ul>
<li><img src="baby_r.jpg" style="width: 211px; height: 287px"></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<ul>
<li><a href="#">孕妈必备</a></li>
<li><a href="#">儿童玩具</a></li>
</ul>
<ul>
<li><a href="#">童装童鞋</a></li>
<li><a href="#">辅助食品</a></li>
</ul>
<ul>
<li><a href="#">奶粉</a></li>
<li><a href="#">鲜活禽蛋</a></li>
<li><a href="#">维生素</a></li>
</ul>
<ul>
<li><a href="#">童装童鞋</a></li>
<li><a href="#">辅助食品</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#">儿童推车</a></li>
<li>¥560.00</li>
<li><a href="#"><img src="baby_1.jpg"></a></li>
</ul>
<ul>
<li><a href="#">妈咪纸尿裤</a></li>
<li>¥260.00</li>
<li><a href="#"><img src="baby_2.jpg"></a></li>
</ul>
<ul>
<li><a href="#">儿童玩具 挖掘机</a></li>
<li>¥160.00</li>
<li><a href="#"><img src="baby_3.jpg"></a></li>
</ul>
<ul>
<li><a href="#">纸尿裤</a></li>
<li>¥260.00</li>
<li><a href="#"><img src="baby_4.jpg"></a></li>
</ul>
<ul>
<li><a href="#">儿童推车</a></li>
<li>¥86.00</li>
<li><a href="#"><img src="baby_5.jpg"></a></li>
</ul>
<ul>
<li><a href="#">奶粉</a></li>
<li>¥660.00</li>
<li><a href="#"><img src="baby_6.jpg"></a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#"><img src="baby_b1.jpg"></a></li>
<li><a href="#"><img src="baby_b2.jpg"></a></li>
</ul>
</div>
</div>
</div>
<div class="sixwhole">
<div class="sevenwhole">
<ul>
<li><img src="b1.png"></li>
<li>正品保障</li>
<li>正品行货 放心购买</li>
</ul>
<ul>
<li><img src="b2.png"></li>
<li>满38包邮</li>
<li>满38包邮 免运费</li>
</ul>
<ul>
<li><img src="b3.png"></li>
<li>天天低价</li>
<li>天天低价 畅选无忧</li>
</ul>
<ul>
<li><img src="b4.png"></li>
<li>准时送达</li>
<li>收货时间由你做主</li>
</ul>
</div>
<div class="eightwhole">
<div>
<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>
<li><a href="#">推荐分享说明</a></li>
</ul>
<ul>
<li><a href="#">配送与支付</a></li>
<li><a href="#">货到付款区域</a></li>
<li><a href="#">配送支付查询</a></li>
<li><a href="#">支付方式说明</a></li>
</ul>
<ul>
<li><a href="#">会员中心</a></li>
<li><a href="#">资金管理</a></li>
<li><a href="#">我的收藏</a></li>
<li><a href="#">我的订单</a></li>
</ul>
<ul>
<li><a href="#">服务保证</a></li>
<li><a href="#">退换货原则</a></li>
<li><a href="#">售后服务保证</a></li>
<li><a href="#">产品质量保证</a></li>
</ul>
<ul>
<li><a href="#">联系我们</a></li>
<li><a href="#">网站故障报告</a></li>
<li><a href="#">购物咨询</a></li>
<li><a href="#">投诉与建议</a></li>
</ul>
</div>
<div>
<div>
<img src="er.gif">
<img src="ss.png">
</div>
<div>
<ul>
<li><a href="#"><img src="b_sh_1.png">新浪微博</a></li>
<li><a href="#"><img src="b_sh_2.png">腾讯微博</a></li>
<li>服务热线:</li>
<li>400-123-4567 </li>
</ul>
</div>
</div>
</div>
<div class="ninewhoie">
<div>
备案/许可证编号:蜀ICP备12009302号-1-www.dingguagua.com Copyright© 1号店网上超市 2007-2016,All Rights Reserved. 复制必究 , Technical Support: Dgg Group
</div>
<div>
<img src="b_1.gif">
<img src="b_2.gif">
<img src="b_3.gif">
<img src="b_4.gif">
<img src="b_5.gif">
<img src="b_6.gif">
</div>
</div>
</div>
</body>
</html>
body,div,ul,li,input,a,img,p{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
a:hover{
text-decoration: none;
}
.onewhole{
width: 100%;
height: 35px;
line-height: 35px;
font-size: 12px;
background: linear-gradient(to bottom, #d1d1d1, #f4f4f4, #f5f5f5);
position: relative;
margin-bottom: 50px;
}
.onewhole p{
color: black;
margin-left: 50px;
}
.onewhole ul{
position: absolute;
right: 0;
top: 0;
margin-right: 50px;
margin-top: 5px;
margin-bottom: 5px;
}
.onewhole li{
float: left;
padding: 0 5px;
border-right: 1px #999 solid;
height: 20px;
line-height: 22px;
}
.onewhole li a{
color: black;
}
.onewhole li a:hover{
color: orange;
}
.onewhole li:nth-of-type(1) a:nth-of-type(2){
color: chocolate;
}
.onewhole li:nth-of-type(3) a:nth-of-type(1){
margin-right: 10px;
}
.onewhole li:last-of-type{
border: none;
}
.two{
width: 220px;
height: 20px;
}
.two ul{
position: absolute;
top: -5px;
right: 117px;
}
.two li{
border: none;
}
#one{
border: 1px #999 solid;
text-align: center;
display: none;
}
.two li:hover #one{
display: block;
}
.twowhole{
width: 100%;
height: 100px;
position: relative;
}
.twowhole ul li{
float: left;
}
.twowhole ul li:nth-of-type(1){
padding-left: 50px;
}
.twowhole ul li:nth-of-type(2){
padding-left: 50px;
}
.twowhole ul li:nth-of-type(2) input:nth-of-type(1){
height: 40px;
border: 2px red solid;
width: 400px;
position: absolute;
top: 12px;
}
.twowhole ul li:nth-of-type(2) input:nth-of-type(2){
height: 40px;
border: 2px red solid;
background: red;
width: 100px;
position: absolute;
top: 12px;
left: 700px;
color: white;
font-size: 18px;
}
.one{
height: 40px;
width: 150px;
line-height: 40px;
text-align: center;
position: absolute;
left: 1000px;
top: 12px;
background: #f4f4f4 url("../Semester1book3DJ11/car.png") 10px no-repeat;
}
.one a{
color: black;
}
.twowhole ul li:nth-of-type(4) ul{
position: absolute;
top: 55px;
right: 100px;
left: 305px;
}
.twowhole ul li:nth-of-type(4) ul li{
float: left;
padding: 0 5px ;
}
.twowhole ul li:nth-of-type(4) ul li a{
font-size: 14px;
color: #999;
}
.whole{
margin: auto;
height: 1600px;
width: 1300px;
position: relative;
border: 1px #999 solid;
}
.threewhole{
width: 1300px;
height: 50px;
position: relative;
border-bottom: 2px red solid;
}
.threewhole p:nth-of-type(1){
background: red;
width: 200px;
height: 100%;
position: absolute;
top: 0;
color: white;
padding-left: 50px;
line-height: 50px;
}
.threewhole ul{
position: absolute;
top: 10px;
left: 250px;
}
.threewhole ul li{
float: left;
font-size: 18px;
padding: 0 20px;
}
.threewhole ul li a{
color: black;
}
.threewhole ul li:nth-of-type(1) a{
color: red;
}
.threewhole ul li:nth-of-type(2) a{
color: red;
}
.threewhole ul li a:hover{
color: red;
}
.threewhole p:nth-of-type(2){
position: absolute;
right: 0;
top: -10px;
}
.fourwhole{
width: 250px;
height: 400px;
line-height: 40px;
font-size: 14px;
background: red;
position: relative;
}
.fourwhole li{
padding-left: 10px;
background: url("../Semester1book3DJ11/n_arrow.gif") 230px 15px no-repeat;
height: 40px;
width: 100%;
color: white;
transition: all 1s ease-out;
}
.fourwhole li:hover{
transform: translate(30px, 0);
}
.fourwhole img{
width: 20px;
height: 20px;
line-height: 20px;
}
.three{
width: 900px;
height: 400px;
position: absolute;
top: 50px;
left: 260px;
}
.three img{
transform: scale(0.677);
position: absolute;
top: -94px;
left: -180px;
}
.three ul li:nth-of-type(1) a{
position: absolute;
background: url("../Semester1book3DJ11/b_left.png");
top: 160px;
left: 2px;
width: 32px;
height: 60px;
}
.three ul li:nth-of-type(2) a{
background: url("../Semester1book3DJ11/b_right.png");
position: absolute;
top: 160px;
right: 137px;
width: 32px;
height: 60px;
}
.three ul li{
float: left;
}
.three ul li:nth-of-type(3){
border-radius: 50%;
background: #999;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
position: absolute;
bottom: 20px;
left: 340px;
}
.three ul li:nth-of-type(3) a{
color: black;
}
.three ul li:nth-of-type(3):hover{
background: red;
}
.three ul li:nth-of-type(3):hover a{
color: white;
}
.three ul li:nth-of-type(4){
border-radius: 50%;
background: #999;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
position: absolute;
bottom: 20px;
left: 370px;
}
.three ul li:nth-of-type(4) a{
color: black;
}
.three ul li:nth-of-type(4):hover{
background: red;
}
.three ul li:nth-of-type(4):hover a{
color: white;
}
.three ul li:nth-of-type(5){
border-radius: 50%;
background: #999;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
position: absolute;
bottom: 20px;
left: 400px;
}
.three ul li:nth-of-type(5) a{
color: black;
}
.three ul li:nth-of-type(5):hover{
background: red;
}
.three ul li:nth-of-type(5):hover a{
color: white;
}
.four{
border: 1px #999 solid;
height: 400px;
width: 200px;
position: absolute;
right: 0;
top: 50px;
}
.four div:nth-of-type(1){
border-bottom: 1px #999 solid;
width: 100%;
height: 40px;
position: relative;
line-height: 40px;
}
.four div:nth-of-type(1) p:nth-of-type(1){
font-size: 18px;
font-weight: bold;
}
.four div:nth-of-type(1) p:nth-of-type(2) a{
position: absolute;
right: 0;
top: 0;
color: #999;
font-size: 14px;
}
.four div:nth-of-type(1) p:nth-of-type(2) a:hover{
color: red;
}
.four div:nth-of-type(2){
position: relative;
border-bottom: 1px #999 solid;
height: 150px;
width: 190px;
padding: 10px 5px;
line-height: 30px;
font-size: 12px;
}
.four div:nth-of-type(2) a{
color: #999;
}
.four div:nth-of-type(2) a:hover{
color: red;
}
.four div:nth-of-type(3){
position: relative;
height: 40px;
width: 100%;
border-bottom: 1px #999 solid;
font-size: 16px;
font-weight: bold;
line-height: 40px;
}
.four div:nth-of-type(4){
height: 170px;
width: 100%;
position: relative;
}
.four div:nth-of-type(4) p{
position: absolute;
font-size: 14px;
color: #999;
top: 10px;
}
.four div:nth-of-type(4) img{
transform: scale(0.6);
position: absolute;
bottom: -5px;
left: -48px;
}
.five{
width: 1300px;
height: 250px;
margin-top: 30px;
position: relative;
}
.five ul:nth-of-type(1) li{
float: left;
height: 250px;
width: 260px;
border: 1px #999 solid;
position: relative;
text-align: center;
}
.five ul:nth-of-type(1) li:nth-of-type(1){
background: #d8eefc;
margin-right: 10px;
width: 240px;
border: none;
}
.five ul:nth-of-type(1) li:nth-of-type(1) img{
position: absolute;
top: 20px;
left: 10px;
transition: all 0.5s linear;
}
.five ul:nth-of-type(1) li:nth-of-type(1) img:hover{
transform: scale(1.1);
transition: all 0.5s linear;
}
.five ul:nth-of-type(1) li:nth-of-type(1) p:nth-of-type(1){
color: white;
background: orange;
width: 60px;
height: 20px;
text-align: center;
line-height: 20px;
position: absolute;
bottom: 5px;
left: 60px;
font-size: 14px;
}
.five ul:nth-of-type(1) li:nth-of-type(1) p:nth-of-type(2){
color: orange;
font-size: 12px;
position: absolute;
bottom: 5px;
left: 150px;
}
.five ul:nth-of-type(1) li:nth-of-type(2) p:nth-of-type(1){
position: absolute;
top: 10px;
left: 10px;
z-index: 20;
}
.five ul:nth-of-type(1) li:nth-of-type(2) p:nth-of-type(2){
position: absolute;
top: 20px;
left: 30px;
z-index: 10;
transition: all 0.5s linear;
}
.five ul:nth-of-type(1) li:nth-of-type(2) p:nth-of-type(2):hover{
transform: scale(1.1);
transition: all 0.5s linear;
}
.five ul:nth-of-type(1) li:nth-of-type(2) p:nth-of-type(3){
position: absolute;
bottom: 40px;
left: 50px;
}
.five ul:nth-of-type(1) li:nth-of-type(2) p:nth-of-type(3) a{
color: #999;
font-size: 12px;
}
.five ul:nth-of-type(1) li:nth-of-type(2) p:nth-of-type(3) a:hover{
text-decoration: underline;
}
.five ul:nth-of-type(1) li:nth-of-type(2) p:nth-of-type(3) span{
color: black;
font-size: 18px;
font-weight: bold;
}
.five ul:nth-of-type(1) li:nth-of-type(2) p:nth-of-type(4){
color: orange;
text-align: center;
line-height: 20px;
position: absolute;
bottom: 15px;
left: 60px;
font-size: 24px;
font-weight: bold;
}
.five ul:nth-of-type(1) li:nth-of-type(2) p:nth-of-type(5){
color: #999;
font-size: 12px;
position: absolute;
bottom: 15px;
left: 150px;
}
.five ul:nth-of-type(1) li:nth-of-type(3) p:nth-of-type(1){
position: absolute;
top: 10px;
left: 10px;
z-index: 20;
}
.five ul:nth-of-type(1) li:nth-of-type(3) p:nth-of-type(2){
position: absolute;
top: 20px;
left: 30px;
z-index: 10;
transition: all 0.5s linear;
}
.five ul:nth-of-type(1) li:nth-of-type(3) p:nth-of-type(2):hover{
transform: scale(1.1);
transition: all 0.5s linear;
}
.five ul:nth-of-type(1) li:nth-of-type(3) p:nth-of-type(3){
position: absolute;
bottom: 40px;
left: 50px;
}
.five ul:nth-of-type(1) li:nth-of-type(3) p:nth-of-type(3) a{
color: #999;
font-size: 12px;
}
.five ul:nth-of-type(1) li:nth-of-type(3) p:nth-of-type(3) a:hover{
text-decoration: underline;
}
.five ul:nth-of-type(1) li:nth-of-type(3) p:nth-of-type(3) span{
color: black;
font-size: 18px;
font-weight: bold;
}
.five ul:nth-of-type(1) li:nth-of-type(3) p:nth-of-type(4){
color: orange;
text-align: center;
line-height: 20px;
position: absolute;
bottom: 15px;
left: 60px;
font-size: 24px;
font-weight: bold;
}
.five ul:nth-of-type(1) li:nth-of-type(3) p:nth-of-type(5){
color: #999;
font-size: 12px;
position: absolute;
bottom: 15px;
left: 150px;
}
.five ul:nth-of-type(1) li:nth-of-type(4) p:nth-of-type(1){
position: absolute;
top: 10px;
left: 10px;
z-index: 20;
}
.five ul:nth-of-type(1) li:nth-of-type(4) p:nth-of-type(2){
position: absolute;
top: 20px;
left: 30px;
z-index: 10;
transition: all 0.5s linear;
}
.five ul:nth-of-type(1) li:nth-of-type(4) p:nth-of-type(2):hover{
transform: scale(1.1);
transition: all 0.5s linear;
}
.five ul:nth-of-type(1) li:nth-of-type(4) p:nth-of-type(3){
position: absolute;
bottom: 40px;
left: 50px;
}
.five ul:nth-of-type(1) li:nth-of-type(4) p:nth-of-type(3) a{
color: #999;
font-size: 12px;
}
.five ul:nth-of-type(1) li:nth-of-type(4) p:nth-of-type(3) a:hover{
text-decoration: underline;
}
.five ul:nth-of-type(1) li:nth-of-type(4) p:nth-of-type(3) span{
color: black;
font-size: 18px;
font-weight: bold;
}
.five ul:nth-of-type(1) li:nth-of-type(4) p:nth-of-type(4){
color: orange;
text-align: center;
line-height: 20px;
position: absolute;
bottom: 15px;
left: 60px;
font-size: 24px;
font-weight: bold;
}
.five ul:nth-of-type(1) li:nth-of-type(4) p:nth-of-type(5){
color: #999;
font-size: 12px;
position: absolute;
bottom: 15px;
left: 150px;
}
.five ul:nth-of-type(1) li:nth-of-type(5) p:nth-of-type(1){
position: absolute;
top: 10px;
left: 10px;
z-index: 20;
}
.five ul:nth-of-type(1) li:nth-of-type(5) p:nth-of-type(2){
position: absolute;
top: 20px;
left: 30px;
z-index: 10;
transition: all 0.5s linear;
}
.five ul:nth-of-type(1) li:nth-of-type(5) p:nth-of-type(2):hover{
transform: scale(1.1);
transition: all 0.5s linear;
}
.five ul:nth-of-type(1) li:nth-of-type(5) p:nth-of-type(3){
position: absolute;
bottom: 40px;
left: 50px;
}
.five ul:nth-of-type(1) li:nth-of-type(5) p:nth-of-type(3) a{
color: #999;
font-size: 12px;
}
.five ul:nth-of-type(1) li:nth-of-type(5) p:nth-of-type(3) a:hover{
text-decoration: underline;
}
.five ul:nth-of-type(1) li:nth-of-type(5) p:nth-of-type(3) span{
color: black;
font-size: 18px;
font-weight: bold;
}
.five ul:nth-of-type(1) li:nth-of-type(5) p:nth-of-type(4){
color: orange;
text-align: center;
line-height: 20px;
position: absolute;
bottom: 15px;
left: 60px;
font-size: 24px;
font-weight: bold;
}
.five ul:nth-of-type(1) li:nth-of-type(5) p:nth-of-type(5){
color: #999;
font-size: 12px;
position: absolute;
bottom: 15px;
left: 150px;
}
.five ul:nth-of-type(2) li:nth-of-type(1) a{
background: url("../Semester1book3DJ11/b_left.png");
width: 32px;
height: 60px;
position: absolute;
left: 250px;
top: 100px;
}
.five ul:nth-of-type(2) li:nth-of-type(2) a{
background: url("../Semester1book3DJ11/b_right.png");
width: 32px;
height: 60px;
position: absolute;
top: 100px;
right: 2px;
}
.six{
width: 1300px;
height: 120px;
position: relative;
margin-top: 30px;
}
.six img{
transform: scale(1.082);
position: absolute;
top: 5px;
left: 50px;
}
.eight{
width: 1300px;
height: 500px;
margin-top: 30px;
position: relative;
}
.eight div:nth-of-type(1){
width: 100%;
height: 45px;
border-bottom: 2px red solid;
}
.eight div:nth-of-type(1) ul:nth-of-type(1){
margin-left: 20px;
}
.eight div:nth-of-type(1) ul:nth-of-type(1) li{
float: left;
}
.eight div:nth-of-type(1) ul:nth-of-type(1) li:nth-of-type(1){
margin-right: 20px;
background: url("../Semester1book3DJ11/floor.png") center no-repeat;
text-align: center;
color: white;
height: 40px;
width: 33px;
line-height: 45px;
}
.eight div:nth-of-type(1) ul:nth-of-type(1) li:nth-of-type(2){
font-size: 16px;
color: red;
height: 45px;
line-height: 45px;
}
.eight div:nth-of-type(1) ul:nth-of-type(2){
position: absolute;
right: 15px;
}
.eight div:nth-of-type(1) ul:nth-of-type(2) li{
float: left;
margin-left: 20px;
height: 45px;
line-height: 45px;
}
.eight div:nth-of-type(1) ul:nth-of-type(2) li a{
color: #999;
font-size: 12px;
}
.eight div:nth-of-type(1) ul:nth-of-type(2) li a:hover{
color: red;
}
.nine{
position: relative;
width: 211px;
height: 450px;
background: #a6e5be url("../Semester1book3DJ11/s_txt.png") bottom center;
}
.eight div:nth-of-type(2) ul:nth-of-type(1){
margin-bottom: 23px;
}
.eight div:nth-of-type(2) ul:nth-of-type(1) li:nth-of-type(2){
background: url("../Semester1book3DJ11/b_left.png");
width: 32px;
height: 60px;
position: absolute;
top: 100px;
left: 0;
}
.eight div:nth-of-type(2) ul:nth-of-type(1) li:nth-of-type(3){
background: url("../Semester1book3DJ11/b_right.png");
width: 32px;
height: 60px;
position: absolute;
top: 100px;
right: 0;
}
.eight div:nth-of-type(2) ul:nth-of-type(2){
padding-left: 20px;
width: 190px;
height: 30px;
}
.eight div:nth-of-type(2) ul:nth-of-type(2) li{
float: left;
margin-right: 20px;
}
.eight div:nth-of-type(2) ul:nth-of-type(2) li a{
color: #999;
font-size: 12px;
}
.eight div:nth-of-type(2) ul:nth-of-type(3){
padding-left: 20px;
width: 190px;
height: 30px;
}
.eight div:nth-of-type(2) ul:nth-of-type(3) li{
float: left;
margin-right: 20px;
}
.eight div:nth-of-type(2) ul:nth-of-type(3) li a{
color: #999;
font-size: 12px;
}
.eight div:nth-of-type(2) ul:nth-of-type(4){
padding-left: 20px;
width: 190px;
height: 30px;
}
.eight div:nth-of-type(2) ul:nth-of-type(4) li{
float: left;
margin-right: 20px;
}
.eight div:nth-of-type(2) ul:nth-of-type(4) li a{
color: #999;
font-size: 12px;
}
.eight div:nth-of-type(2) ul:nth-of-type(5){
padding-left: 20px;
width: 190px;
height: 30px;
}
.eight div:nth-of-type(2) ul:nth-of-type(5) li{
float: left;
margin-right: 20px;
}
.eight div:nth-of-type(2) ul:nth-of-type(5) li a{
color: #999;
font-size: 12px;
}
.eight div:nth-of-type(3){
position: absolute;
width: 825px;
height: 450px;
right: 260px;
bottom: 0;
}
.eight div:nth-of-type(3) ul{
width: 274px;
height: 225px;
border-bottom: 1px solid #eaeaea;
border-left: 1px solid #eaeaea;
float: left;
text-align: center;
}
.eight div:nth-of-type(3) ul li{
margin-top: 5px;
}
.eight div:nth-of-type(3) ul li:nth-of-type(1) a{
font-size: 14px;
color: #999;
}
.eight div:nth-of-type(3) ul li:nth-of-type(2){
color: red;
}
.eight div:nth-of-type(3) img{
transition: all 0.5s ease-in;
}
.eight div:nth-of-type(3) ul:hover img{
transform: scale(1.1);
transition: all 0.5s ease-out;
}
.eight div:nth-of-type(4){
position: absolute;
right: 0;
bottom: 3px;
width: 260px;
height: 450px;
}
.ten{
position: relative;
width: 211px;
height: 450px;
background: #fabeb8 url("../Semester1book3DJ11/s_txt.png") bottom center;
}
.eleven{
position: relative;
width: 211px;
height: 450px;
background: #f4bdd5 url("../Semester1book3DJ11/s_txt.png") bottom center;
}
.sixwhole{
margin: auto;
height: 550px;
width: 1300px;
margin-top: 900px;
position: relative;
}
.sevenwhole{
width: 1100px;
height: 130px;
position: relative;
padding: 10px 50px 10px 0;
margin: 0 50px;
}
.sevenwhole ul{
width: 250px;
height: 100px;
float: left;
text-align: center;
}
.sevenwhole li:nth-of-type(1){
transition: all 2s ease-in;
margin-bottom: 10px;
}
.sevenwhole li:nth-of-type(1):hover{
transform: scale(1.2) rotate(360deg) ;
transition: all 2s ease-out;
}
.sevenwhole li:nth-of-type(2){
font-size: 14px;
margin-bottom: 10px;
}
.sevenwhole li:nth-of-type(3){
font-size: 12px;
color: #999999;
}
.eightwhole{
width: 1300px;
height: 170px;
position: relative;
}
.eightwhole div:nth-of-type(1){
width: 1000px;
height: 170px;
}
.eightwhole div:nth-of-type(1) ul{
float: left;
width: 200px;
height: 170px;
margin-top: 30px;
}
.eightwhole div:nth-of-type(1) li{
margin-bottom: 10px;
}
.eightwhole div:nth-of-type(1) li a{
color: #999;
font-size: 12px;
}
.eightwhole div:nth-of-type(1) li a:hover{
color: orange;
}
.eightwhole div:nth-of-type(1) li:nth-of-type(1){
margin-bottom: 20px;
}
.eightwhole div:nth-of-type(1) li:nth-of-type(1) a{
color: black;
font-size: 16px;
}
.eightwhole div:nth-of-type(1) li:nth-of-type(1) a:hover{
text-decoration: underline;
}
.eightwhole div:nth-of-type(2){
width: 300px;
height: 170px;
position: absolute;
right: 0;
top: 30px;
}
.eightwhole div:nth-of-type(2) div:nth-of-type(1){
width: 150px;
height: 170px;
}
.eightwhole div:nth-of-type(2) div:nth-of-type(2){
width: 150px;
height: 170px;
position: absolute;
right: 0;
top: 0;
}
.eightwhole div:nth-of-type(2) div:nth-of-type(2) li{
margin-bottom: 15px;
}
.eightwhole div:nth-of-type(2) div:nth-of-type(2) li a{
color: #999;
font-size: 14px;
}
.eightwhole div:nth-of-type(2) div:nth-of-type(2) li:nth-of-type(3){
margin-bottom: 10px;
color: #999;
}
.eightwhole div:nth-of-type(2) div:nth-of-type(2) li:nth-of-type(4){
color: red;
}
.ninewhoie{
width: 1300px;
height: 130px;
position: absolute;
left: 0;
bottom: 0;
}
.ninewhoie div:nth-of-type(1){
text-align: center;
color: #999;
font-size: 12px;
margin-bottom: 30px;
}
.ninewhoie div:nth-of-type(2){
text-align: center;
}
登陆页
<!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="1.png">
</div>
<div class="two">
<p>您好,欢迎光临1号店!<a href="#">请登录</a></p>
<a href="#"><span><img src="2.png"></span>帮助中心<span><img src="4.png"></span></a>
</div>
</header>
<hr>
<section>
<div class="one">
<img src="11.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>
注册页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册1</title>
<style>
.b ul li {
list-style: none;
display: inline-block;
}
.a {
border: 1px gray solid;
width: 1560px;
height: 100px;
position: relative;
left: -30px;
top: -16px;
border-bottom: 1px gainsboro solid;
font-size: 14px;
color: gray;
box-shadow: 1px 1px 1px grey;
}
.a img {
margin-left: 150px;
margin-top: 20px;
}
.a a {
position: relative;
right: -600px;
top: -50px;
}
.a span {
color: blue;
}
.a span:hover {
color: red;
}
.b ul {
border: 1px gray solid;
width: 110px;
height: 25px;
margin-left: 1200px;
font-size: 12px;
padding-top: 10px;
padding-left: 10px;
margin-top: -100px;
}
.b ul li {
padding-right: 5px;
display: inline-block;
vertical-align: middle;
}
.c ul{
list-style: none;
margin-top: 100px;
text-align: center;
}
.c1 {
font-weight: bolder;
font-size: 22px;
margin-bottom: 10px;
}
.c2,.c5,.c6{
width: 300px;
height: 60px;
padding-left: 20px;
}
.c3{
width: 160px;
height: 60px;
padding-left: 10px;
margin-left: -140px;
margin-top: 10px;
}
.c4{
color: white;
background: gray;
width: 140px;
height: 48px;
text-align: center;
margin-left: 760px;
margin-top: -60px;
padding-top: 10px;
margin-bottom: 15px;
}
.c6{
margin-top: 10px;
}
.c a{
text-decoration: none;
}
.c7{
font-size: 12px;
margin-top: 20px;
}
.c8{
background: red;
color: white;
width: 320px;
height: 50px;
margin-top: 20px;
border: 1px red solid;
}
.c span:hover{
color: red;
}
.c9{
font-size: 12px;
line-height: 10px;
margin-top: 20px;
}
</style>
</head>
<body>
<header>
<div class="a">
<img src="1.png" />
<a>您好,欢迎光临1号店!<span>请登录</span></a>
</div>
<div class="b">
<ul>
<li><img src="2.png" /></li>
<li>帮助中心</li>
<li><img src="4.png" /></li>
</ul>
</div>
<div class="c">
<ul>
<li class="c1">1号店注册</li>
<li><input class="c2" type="text" placeholder="手机号" required="请填写"/></li>
<li><input class="c3" type="text" placeholder="手机号"/></li>
<li class="c4">获取验证码</li>
<li><input class="c5" type="password" placeholder="密码"/></li>
<li><input class="c6" type="password" placeholder="确认密码"/></li>
<li class="c7">点击注册,表示您同意1号店 <a href="#">《服务协议》</a></li>
<li><input class="c8" type="submit" value="同意协议并注册" /></li>
<li class="c9"><span>沪ICP备13044278号|</span> 合字B1.B2-20130004 <span>|营业执照</span></li>
<li class="c9">Copyright ©" 1号店网上超市 2007-2016,All Rights Reserved</li>
</ul>
</div>
</header>
</body>
<html>