1.首页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>oneshop</title>
<style>
*{
padding: 0px;
margin: 0px;
}
ul li{
list-style-type: none;
}
.ul1{
margin: 0px 5px 0px 5px;
display: inline;
float: right;
text-align: center;
font-size: 14px;
}
.div1{
border: 1px solid white;
width: 100%;
height: 40px;
line-height: 40px;
background: linear-gradient(to bottom, #d1d1d1,#f4f4f4, #f5f5f5);
}
img,a{
vertical-align: middle;
}
a:hover{
color:orangered;
}
.span1{
float: left;
margin-top: 40px;
height: 80px;
margin-left: -50px;
}
.input1{
height: 45px;
width: 420px;
border: 2px solid #FF3C3C;
margin-left: 50px;
font-size: 16px;
padding-left: 10px;
}
.input2{
background-color: #ff3c3c;
border: 1px solid orangered;
width: 100px;
height: 45px;
color: white;
font-size: 17px;
font-weight: bold;
}
.p{
float: left;
margin-top: 60px;
margin-left: 100px;
}
.div2{
float: left;
margin-left: 55px;
margin-top: 4px;
font-size: 15px;
color: #555555;
}
.span2{
float: right;
border: 1px solid #d9d9d9;
padding: 12px 35px 12px 12px;
margin-right: 100px;
margin-top: 60px;
background-color:#f6f6f6;
}
.div3{
font-family: "微软雅黑";
float: left;
font-size: 18px;
font-weight: bold;
margin: 14px 15px 20px 15px;
}
.div4{
float: left;
font-size: 20px;
font-weight: bold;
border: 1px solid orangered;
background-color: #FF3C3C;
margin-right: 40px;
padding: 15px 80px 17px 40px;
color: white;
text-align: center;
}
.div5{
border: 1px solid white;
width: 1300px;
height: 2550px;
margin: 0 auto;
}
.div6{
border: 1px solid white;
width: 1300px;
height: 150px;
margin: 0 auto;
}
.div7{
border: 3px solid orangered;
height: 57px;
border-style: none none solid none;
}
.li1{
float: left;
border: 1px solid red;
font-weight: bold;
font-size: 16px;
background-color: #b01d1d;
width: 242px;
height: 400px;
color: white;
}
.li2:hover{
transform: translate(20px,0);
}
.li2{
margin-left: 20px;
margin-top: 15px;
margin-bottom: 20px;
transition: all 1s ease-in-out;
}
.div8{
display: inline-block;
margin-left: 10px;
position: relative;
}
.img1{
margin-right: 15px;
margin-bottom: 2px;
}
.text1{
color:black;
margin-right: 10px;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: darkgray;
line-height: 20px;
text-align: center;
}
.k a:hover{
color: white;
background-color:#FF3C3C;
}
.ul2{
position: relative;
left: 300px;
bottom: 40px;
}
.img2{
float: right;
margin-right: 8px;
margin-top: 4px;
}
.div9{
border: 1px solid darkgray;
width: 240px;
height: 400px;
float: right;
margin-top: -420px;
}
.h3{
float: left;
font-family: '微软雅黑';
margin-top: 10px;
margin-left: 15px;
font-size: 17px;
}
.span3{
float: right;
font-size: 13px;
color: darkgray;
margin-top: 15px;
margin-right: 15px;
}
.div10{
border: 1px dashed darkgray;
border-style: none none dashed none;
width: 240px;
height: 40px;
}
.ul3{
font-size: 14px;
color:#555555;
margin-top: 15px;
margin-left: 10px;
}
.span4{
font-family: '微软雅黑';
font-size: 15px;
color: black;
font-weight: bold ;
}
.div11{
border: 1px solid darkgray;
border-style: none none solid none;
width: 240px;
height: 175px;
}
.div12{
border: 1px dashed darkgrey;
border-style: none none dashed none;
width: 240px;
height: 33px;
}
.p1{
font-size: 18px;
font-family: '微软雅黑';
font-weight: bold;
margin-left: 15px;
margin-top: 8px;
}
.p2{
text-align: center;
margin: 0 auto;
}
.div13{
border: 1px solid white;
width: 230px;
height: 240px;
float: left;
background: #d8eefc;
}
.div13 a:hover{
transform: scale(1.1);
transition: all 0.8s;
}
.p3{
border: 1px solid orangered;
padding: 2px 4px 2px 8px;
color: white;
background: orangered;
width: 55px;
font-size: 15px;
margin-left: 60px;
position: relative;
top: 15px;
}
.span5{
font-size: 14px;
color:orangered;
position: relative;
top: 18px;
left: 20px;
}
.div14{
border: 1px solid #eaeaea;
width: 260px;
height: 240px;
float: left;
margin-left: 20px;
position: relative;
}
.span6{
font-size: 22px;
font-weight: bold;
color:orangered ;
margin-left:80px;
margin-top: 20px;
}
.span7{
font-size: 14px;
color: darkgray;
margin-left: 20px;
}
.a1{
font-size: 18px;
font-family: "微软雅黑";
font-weight: bold;
color: #555555;
margin-left: 85px;
}
.a4{
font-size: 18px;
font-family: "微软雅黑";
font-weight: bold;
color: #555555;
margin-left: 45px;
}
.a2{
font-size: 14px;
color: #888888;
margin-left: 40px;
}
.div14 a:hover{
text-decoration: underline;
color: #888888;
}
.a3 a:hover{
transform: scale(1.1);
transition: all 0.8s;
}
.div15{
border-bottom: 2px solid #ff4e00;
width: 1300px;
height: 40px;
margin-top: 20px;
position: relative;
}
.span8{
width: 33px;
height: 34px;
background: url(img/floor.png)no-repeat center;
float: left;
color: white;
font-size: 14px;
margin-left: 5px;
text-indent: 5px;
margin-right: 15px;
line-height: 40px;
}
.div15 a{
margin-right: 20px;
}
.div16{
position: relative;
}
.div17{
background: url(img/s_txt.png)no-repeat;
background-color:darkseagreen;
width: 211px;
height: 155px;
font-size: 12px;
background-color: ;
line-height: 37px;
margin-top: -10px;
}
.div17 a{
margin-left: 25px;
margin-bottom: 10px;
}
.div19{
border: 1px solid #EAEAEA;
width: 260px;
height: 220px;
float: left;
font-size: 14px;
border-style: solid solid none solid;
}
.div20{
margin-left: 50px;
margin-top: 10px;
}
.div20 a:hover{
transform: scale(1.1);
transition: all 0.8s;
}
.div21{
margin-top: 50px;
display: inline;
}
.div21 li {
text-align: center;
float: left;
color: #888888;
margin-left: 150px;
margin-top: 20px;
}
.div21 li h3{
color: #3e3e3e;
margin-top: 10px;
}
.div21 a:hover{
transition: all 3s ease;
transform: rotate(360deg) scale(1.2);
}
.div22{
border: 1px solid #D9D9D9;
border-style: none none solid none;
width: 1300px;
height: 400px;
margin: 0 auto;
}
.div23{
border: 1px solid white;
width: 1300px;
height: 190px;
}
.div22 dl dt{
line-height: 30px;
height: 30px;
font-size: 17px;
margin-bottom: 10px;
}
.div22 dl dd{
line-height: 24px;
color: #888888;
font-size: 14px;
}
.div22 dl{
margin-left: 50px;
margin-right: 50px;
}
.div24{
margin-left: 30px;
margin-right: 20px;
}
.div25{
margin-left: 15px;
}
.div25 span{
color: #888888;
font-size: 14px;
}
.div26{
border: 1px solid white;
width: 1300px;
height: 200px;
margin: 0 auto;
}
.div26 p{
text-align: center;
margin: 0px auto;
font-size: 12px;
color: #888888;
margin-top: 30px;
margin-bottom: 25px;
}
.div26 img{
border: 1px solid #D9D9D9;
border-radius:5px ;
}
</style>
</head>
<body>
<div>
<!--
头部显示部分
-->
<header>
<div class="div1">
<ul>
<li style="float: left;font-size: 14px;margin-left: 45px;margin-top: 2px;">送货至：四川</li>
<li class="ul1"><img style="margin-right: 45px;" src="img/s_tel.png"/></li>
<li class="ul1"><a>手机版</a></li>
<li class="ul1">|</li>
<li class="ul1"><img src="img/sh2.png"/></li>
<li class="ul1"><img src="img/sh1.png"/></li>
<li class="ul1">关注我们:</li>
<li class="ul1">|</li>
<li class="ul1"><img src="img/t_arrow.gif"/></li>
<li class="ul1"><a>网站导航</a> </li>
<li class="ul1"><img src="img/t_arrow.gif"/></li>
<li class="ul1"><a>客户服务</a> </li>
<li class="ul1"><img src="img/t_arrow.gif"/></li>
<li class="ul1"><a>收藏夹</a></li>
<li class="ul1">|</li>
<li class="ul1"><a>我的订单</a></li>
<li class="ul1">|</li>
<li class="ul1"><a style="color: orangered;">免费注册</a></li>
<li class="ul1"><a>登录</a></li>
<li class="ul1" style="margin-top: 1px;margin-right: 0px;">您好！请</li>
</ul>
</div>
</header>
<footer>
<div class="div6">
<!--
1号店图片
-->
<div>
<span><img class="span1" src="img/logo.png"/></span>
</div>
<!--
搜索部分
-->
<div class="p">
<form action="#"method="post">
<p>
<input class="input1" type="search"name="sousuo"placeholder="请输入关键字" />
<input style="margin-left: -5px;" class="input2" type="submit"value="搜索" />
</p>
</form>
<div class="div2">
<a style="margin-right:15px;">咖啡</a>
<a style="margin-right:15px;">iPhone 6s</a>
<a style="margin-right:15px;">新鲜美食</a>
<a style="margin-right:15px;">蛋糕</a>
<a style="margin-right:15px;">日用品</a>
<a style="margin-right:15px;">连衣裙</a>
</div>
</div>
<!--
购物车logo
-->
<div>
<span class="span2"><img style="margin-right: 20px;" src="img/car.png"/>购物车</span>
</div>
</div>
<!--
内容主体部分
-->
<div class="div5">
<!--
导航列单
-->
<div class="div7">
<div class="div4">全部商品分类</div>
<ul>
<li class="div3"style="color: orangered;"><a>首页</a></li>
<li class="div3"style="color: orangered;"><a>自营超市</a></li>
<li class="div3"><a>1号团</a></li>
<li class="div3"><a>1号超市</a></li>
<li class="div3"><a>女装</a></li>
<li class="div3"><a>美妆</a></li>
<li class="div3"><a>1号海购</a></li>
<li class="div3"><a>团购</a></li>
</ul>
<span class="div3"style="float: right;"><img src="img/phone.png"/></span>
</div>
<!--
家庭生活饮食列表
-->
<div>
<!--
动态列表
-->
<div>
<ul class="li1">
<li class="li2"><img class="img1" src="img/nav1.png"/>进口食品、生鲜<img class="img2" src="img/n_arrow.gif"/></li>
<li class="li2"><img class="img1" src="img/nav2.png"/>食品、饮料、酒<img class="img2" src="img/n_arrow.gif"/></li>
<li class="li2"><img class="img1" src="img/nav3.png"/>母婴、玩具、童装<img class="img2" src="img/n_arrow.gif"/></li>
<li class="li2"><img class="img1" src="img/nav4.png"/>家居、家庭清洁、纸品<img class="img2" src="img/n_arrow.gif"/></li>
<li class="li2"><img class="img1" src="img/nav5.png"/>美妆、个人护理、洗护<img class="img2" src="img/n_arrow.gif"/></li>
<li class="li2"><img class="img1" src="img/nav6.png"/>女装、内衣、中老年<img class="img2" src="img/n_arrow.gif"/></li>
<li class="li2"><img class="img1" src="img/nav7.png"/>鞋靴、箱包、腕表配饰<img class="img2" src="img/n_arrow.gif"/></li>
<li class="li2"><img class="img1" src="img/nav8.png"/>男装、运动<img class="img2" src="img/n_arrow.gif"/></li>
<li class="li2"><img class="img1" src="img/nav9.png"/>手机、小家电、电脑<img class="img2" src="img/n_arrow.gif"/></li>
<li class="li2"><img class="img1" src="img/nav10.png"/>礼品、充值<img class="img2" src="img/n_arrow.gif"/></li>
</ul>
</div>
<!--
广告
-->
<div class="div8">
<img src="img/ban1.jpg"height="400px" width="700px"/>
<img style="position: relative;right: 704px;" src="img/b_left.png" />
<img style="float: right;position: relative;right: 68px;top: 175px;" src="img/b_right.png" />
<ul class="ul2">
<li style="display: inline;"><span class="k"><a class="text1">1</a></span></li>
<li style="display: inline;"><span class="k"><a class="text1">2</a></span></li>
<li style="display: inline;"><span class="k"><a class="text1">3</a></span></li>
</ul>
</div>
<!--
快讯列表
-->
<div class="div9">
<div class="div10">
<h3 class="h3">快讯</h3>
<span class="span3"><a>更多></a></span>
</div>
<div class="div11">
<ul>
<li class="ul3"><span class="span4">【特惠】</span><a>掬一轮明月 表无尽惦念</a></li>
<li class="ul3"><span class="span4">【公告】</span><a>好奇金装成长裤新品上市</a></li>
<li class="ul3"><span class="span4">【特惠】</span><a>大牌闪购 抢！</a></li>
<li class="ul3"><span class="span4">【公告】</span><a>发福利 买车就抢千元油卡</a></li>
<li class="ul3"><span class="span4">【公告】</span><a>家电低至五折</a></li&
最低0.47元/天 解锁文章
4319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
