<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable = no, initial-scale=1.0,minimum-scale = 1.0,maximum-scale = 1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/shipei.css">
<link rel="stylesheet" href="./css/01.css">
</head>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2570916_spbkkmrveom.css">
<body>
<div class="suning">
<div class="logo">
<div class="logo-logo">
<a href=""><img src="./image/fenlei.png" alt=""></a>
<div><a href="#"><img src="./image/02.gif" alt=""></a></div>
<a href=""><img src="./image/登录.png" alt=""></a>
</div>
<div class="logo-search">
<div>
<button></button>
<form action="">
<input type="text" placeholder="限量抢千元手机卷">
</form>
<i class="iconfont icon-0-10" style="font-size: 1rem;"></i>
</div>
</div>
</div>
<div class="lb">
<a href=""><img src="./image/轮播1.png" alt=""></a>
</div>
<div class="contain">
<a href=""><img src="./image/dong_03.png" alt=""></a>
</div>
<div class="list">
<a href="">
<div class=""><img src="./image/ms.png" alt=""></div>
<div class="text">苏宁秒杀</div>
</a>
<a href="">
<div class=""><img src="./image/cs.png" alt=""></div>
<div class="text">苏宁超市</div>
</a>
<a href="">
<div class=""><img src="./image/pg.png" alt=""></div>
<div class="text">苏宁拼购</div>
</a>
<a href="">
<div class=""><img src="./image/sm.png" alt=""></div>
<div class="text">手机数码</div>
</a>
<a href="">
<div class=""><img src="./image/jd.png" alt=""></div>
<div class="text">苏宁家电</div>
</a>
<a href="">
<div class=""><img src="./image/sg.png" alt=""></div>
<div class="text">免费水果</div>
</a>
<a href="">
<div class=""><img src="./image/hy.png" alt=""></div>
<div class="text">super会员</div>
</a>
<a href="">
<div class=""><img src="./image/yl.png" alt=""></div>
<div class="text">签到有礼</div>
</a>
<a href="">
<div class=""><img src="./image/zx.png" alt=""></div>
<div class="text">领劵中心</div>
</a>
<a href="">
<div class=""><img src="./image/pd.png" alt=""></div>
<div class="text">更多频道</div>
</a>
</div>
<div class="hb">
<a href=""><img src="./image/hb1_03.png" alt=""></a>
<a href=""><img src="./image/hb2.gif" alt=""></a>
<a href=""><img src="./image/hb3.gif" alt=""></a>
</div>
<div class="foot">
<a href="">
<img src="./image/xh.png" alt="">
<span style="font-weight: 900;">猜你喜欢</span>
</a>
<a href="">
<img src="./image/fl.png" alt="">
<span>分类</span>
</a>
<a href="">
<img src="./image/ph.png" alt="">
<span>排行榜</span>
</a>
<a href="">
<img src="./image/gw.png" alt="">
<span>购物车</span>
</a>
<a href="">
<img src="./image/wd.png" alt="">
<span>我的易购</span>
</a>
</div>
<div class="br"></div>
<div class="cx-1">
<div class="cx-left">
<div>
<div>限时秒杀</div>
<p>人气好货限时抢</p>
</div>
<div class="">
<a href="">
<img src="./image/1.jpg" alt="">
<p><span>￥</span><span class="big">12</span><span>.9</span></p>
</a>
<a href="">
<img src="./image/2.jpg" alt="">
<p><span>￥</span><span>6</span><span></span></p>
</a>
</div>
</div>
<div class="cx-right">
<div class="">
<div class="">大聚惠</div>
<p>聚优品-惠生活</p>
</div>
<div class="">
<a href="">
<img src="./image/3.jpg" alt="">
<p><span>APPLE</span></p>
</a>
<a href="">
<img src="./image/4.jpg" alt="">
<p><span>飞科(FLYCO)</span></p>
</a>
</div>
</div>
</div>
<div class="cx-2">
<div class="cx-2-left">
<div>
<div>新品首发</div>
<p>大牌新机0元试</p>
</div>
<div class="">
<a href="">
<img src="./image/5.jpg" alt="">
<p><span></span><span class="big"></span><span></span></p>
</a>
<a href="">
<img src="./image/6.jpg" alt="">
<p><span></span><span></span><span></span></p>
</a>
</div>
</div>
<div class="cx-2-right">
<div class="">
<div class="">苏宁拼购</div>
<p>二人拼更实惠 全场包邮</p>
</div>
<div class="">
<a href="">
<img src="./image/7.jpg" alt="">
<p><span>2人拼138</span></p>
</a>
<a href="">
<img src="./image/8.jpg" alt="">
<p><span>2人拼24.9</span></p>
</a>
</div>
</div>
</div>
<div class="gg"><a href="#"><img src="./image/gg.png" alt=""></a></div>
<div class="dl"><a href="#"><img src="./image/dl.png" alt=""></a></div>
<div class="footer"></div>
</body>
</html>
less代码
body{
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#fcd6e4), to(white));/*谷歌*/
background-color: linear-gradient(top,#fcd6e4);
.suning {
width: 15rem;
height: 100%;
margin: 0 auto;
.logo {
height: 3.6rem;
box-sizing: border-box;
width: 15rem;
background-image: url(../image/bg.png);
background-repeat: no-repeat;
background-size: 15rem 3.6rem;
.logo-logo {
height: 1.76rem;
width: 13.64rem;
margin: 0 auto;
box-sizing: border-box;
a {
width: 0.72rem;
height: 1.2rem;
float: left;
img {
width: 0.72rem;
height: 1.2rem;
margin-top: 0.3rem;
}
}
div {
width: 12.2rem;
height: 1.76rem;
float: left;
align-items: center;
display: flex;
a {
width: 7.8rem;
height: 1.52rem;
font-size: 0.48rem;
line-height: 1.76rem;
margin: 0 2.2rem;
img {
height: 1.52rem;
width: 7.8rem;
line-height: 1.52rem;
margin: 0;
}
}
}
}
.logo-search {
width: 15rem;
height: 1.84rem;
line-height: 1.84rem;
align-items: center;
box-sizing: border-box;
padding: 0.32rem 0.68rem;
div {
width: 13.64rem;
height: 1.2rem;
margin: 0;
padding: 0;
position: relative;
button {
width: 13.64rem;
height: 1.28rem;
border-radius: 15px;
box-sizing: border-box;
border: none;
position: absolute;
background-color: #fff;
text-align: left;
}
.iconfont {
position: absolute;
width: 1rem;
height: 1rem;
top: .08rem;
left: .4rem;
color: #c8c8c8;
line-height: 1rem;
}
form{
display: block;
z-index: 100;
input{
width: 11rem;
height: 1.28rem;
line-height: 1.28rem;
border: none;
box-sizing: border-box;
background-color: #fff;
position: absolute;
font-size: 0.56rem;
left: 1.4rem;
color: #c8c8c8;
&:-ms-input-placeholder{
color: #c8c8c8;
}
&::-webkit-input-placeholder{
color: #c8c8c8;
}
&:-moz-placeholder{
color: #c8c8c8;
}
}
}
}
}
}
.lb {
width: 15rem;
height: 4.58rem;
text-align: center;
width: 15rem;
a {
width: 13.64rem;
height: 4.58rem;
list-style: none;
display: block;
margin-left: .68rem;
box-sizing: border-box;
img {
width: 13.64rem;
height: 4.58rem;
border-radius: 15px;
}
}
}
.contain {
text-align: center;
width: 15rem;
height: 4.6rem;
position: relative;
a{
width: 15rem;
height: 4.2rem;
display: block;
text-align: center;
position: absolute;
bottom: 0;
img {
width: 13.64rem;
height: 4.2rem;
}
}
}
.list {
width: 15rem;
height: 5.6rem;
margin-top: .56rem;
a {
text-decoration: none;
width: 3rem;
height: 2.8rem;
float: left;
text-align: center;
img {
width: 1.68rem;
}
.text {
width: 3rem;
height: 0.56rem;
line-height: 0.56rem;
color: #666666;
font-size: 0.44rem;
}
}
}
.hb {
width: 15rem;
height: 4.72rem;
margin-top: .48rem;
a:nth-of-type(1) {
float: left;
margin-left: .3rem;
box-sizing: border-box;
width: 7rem;
height: 4.6rem;
margin-right: .2rem;
img {
width: 7rem;
height: 4.6rem;
}
}
a:nth-of-type(2) {
float: left;
margin-right: .08rem;
width: 3.68rem;
height: 4.6rem;
display: block;
img {
width: 3.68rem;
height: 4.6rem;
}
}
a:nth-of-type(3) {
float: left;
width: 3.68rem;
height: 4.6rem;
display: block;
img {
width: 3.68rem;
height: 4.6rem;
}
}
}
.foot {
background-color: #fff;
height: 2rem;
width: 15rem;
position: fixed;
left: 0;
right: 0;
bottom: 0;
// margin: 0;
margin: 0 auto;
a {
width: 3rem;
height: 2rem;
text-decoration: none;
float: left;
text-align: center;
img {
width: 0.96rem;
margin: 0.24rem auto 0;
}
span {
font-size: 0.4rem;
height: 0.24rem;
display: block;
color: black;
line-height: 0.24rem;
}
}
}
.br{
width: 15rem;
height: .48rem;
margin: 0 auto;
}
.cx-1{
width: 14rem;
height: 5.2rem;
margin-left: .5rem;
.cx-left{
width: 7rem;
height: 5.2rem;
float: left;
div:nth-of-type(1){
width: 7rem;
height: 1.8rem;
margin-top: .2rem;
box-sizing: border-box;
div{
font-size: .56rem;
font-weight: 700;
width: 7rem;
height: 1.2rem;
z-index: 100;
line-height: 1.2rem;
padding: 0;
margin-top: -0.32rem;
}
p{
font-size: .48rem;
color: #999;
height: .6rem;
line-height: .6rem;
}
}
div:nth-of-type(2){
width: 7rem;
height: 3rem;
display: flex;
a:nth-of-type(1){
width: 2.4rem;
height: 3rem;
text-decoration: none;
margin-right: 1.1rem;
img{
width: 2.4rem;
height: 2.4rem;
}
p{
width: 2.4rem;
height: .6rem;
line-height: .6rem;
font-size: .44rem;
text-align: center;
margin-top: -0.32rem;
color: #f50;
span{
font-size: .44rem;
}
.big{
font-size: .56rem;
}
}
}
a:nth-of-type(2){
width: 2.4rem;
height: 3rem;
display: inline-block;
text-decoration: none;
img{
width: 2.4rem;
height: 2.4rem;
}
p{
width: 2.4rem;
height: .6rem;
line-height: .6rem;
font-size: .44rem;
text-align: center;
margin-top: -0.32rem;
color: #f50;
}
}
}
}
.cx-right{
width: 7rem;
height: 5.2rem;
float: left;
div:nth-of-type(1){
width: 7rem;
height: 1.8rem;
box-sizing: border-box;
margin-top: .2rem;
margin-left: .6rem;
div{
font-size: .56rem;
font-weight: 700;
width: 7rem;
height: 1.2rem;
z-index: 100;
line-height: 1.2rem;
padding: 0;
margin-top: -0.32rem;
margin-left:0px;
}
p{
font-size: .48rem;
color: #999;
height: .6rem;
line-height: .6rem;
}
}
div:nth-of-type(2){
height: 3rem;
display: flex;
a:nth-of-type(1){
width: 2.4rem;
height: 3rem;
text-decoration: none;
margin-right: 1.1rem;
margin-left: 1rem;
img{
width: 2.4rem;
height: 2.4rem;
}
p{
width: 2.4rem;
height: .6rem;
line-height: .6rem;
font-size: .44rem;
text-align: center;
margin-top: -0.32rem;
color: #333;
}
}
a:nth-of-type(2){
width: 2.4rem;
height: 3rem;
display: inline-block;
text-decoration: none;
img{
width: 2.4rem;
height: 2.4rem;
}
p{
width: 2.4rem;
height: .6rem;
line-height: .6rem;
font-size: .32rem;
text-align: center;
margin-top: -0.32rem;
color: #333;
span{
width: 4rem;
height: .6rem;
display: flex;
margin-left: -0.16rem;
}
}
}
}
}
}
.cx-2{
width: 14rem;
height: 5.2rem;
margin-left: .5rem;
.cx-2-left{
width: 7rem;
height: 5.2rem;
float: left;
margin-top: .48rem;
div:nth-of-type(1){
width: 7rem;
height: 1.8rem;
margin-top: .2rem;
box-sizing: border-box;
div{
font-size: .56rem;
font-weight: 700;
width: 7rem;
height: 1.2rem;
z-index: 100;
line-height: 1.2rem;
padding: 0;
margin-top: -0.32rem;
}
p{
font-size: .48rem;
color: #999;
height: .6rem;
line-height: .6rem;
}
}
div:nth-of-type(2){
width: 7rem;
height: 3rem;
display: flex;
a:nth-of-type(1){
width: 2.4rem;
height: 3rem;
text-decoration: none;
margin-right: 1.1rem;
img{
width: 2.4rem;
height: 2.4rem;
}
p{
width: 2.4rem;
height: .6rem;
line-height: .6rem;
font-size: .44rem;
text-align: center;
margin-top: -0.32rem;
color: #f50;
span{
font-size: .44rem;
}
.big{
font-size: .56rem;
}
}
}
a:nth-of-type(2){
width: 2.4rem;
height: 3rem;
display: inline-block;
text-decoration: none;
img{
width: 2.4rem;
height: 2.4rem;
}
p{
width: 2.4rem;
height: .6rem;
line-height: .6rem;
font-size: .44rem;
text-align: center;
margin-top: -0.32rem;
color: #f50;
}
}
}
}
.cx-2-right{
width: 7rem;
height: 5.2rem;
float: left;
div:nth-of-type(1){
width: 7rem;
height: 1.8rem;
box-sizing: border-box;margin-top: .2rem;
margin-left: .6rem;
div{
font-size: .56rem;
font-weight: 700;
width: 7rem;
height: 1.2rem;
z-index: 100;
line-height: 1.2rem;
padding: 0;
margin-top: -0.32rem;
margin: 0;
}
p{
font-size: .48rem;
color: #999;
height: .6rem;
line-height: .6rem;
}
}
div:nth-of-type(2){
height: 3rem;
display: flex;
a:nth-of-type(1){
width: 2.4rem;
height: 3rem;
text-decoration: none;
margin-right: 1.1rem;
margin-left: 1rem;
img{
width: 2.4rem;
height: 2.4rem;
}
p{
width: 2.4rem;
height: .6rem;
line-height: .6rem;
font-size: .44rem;
text-align: center;
margin-top: -0.32rem;
color: #333;
}
}
a:nth-of-type(2){
width: 2.4rem;
height: 3rem;
display: inline-block;
text-decoration: none;
img{
width: 2.4rem;
height: 2.4rem;
}
p{
width: 2.4rem;
height: .6rem;
line-height: .6rem;
font-size: .32rem;
text-align: center;
margin-top: -0.32rem;
color: #333;
text-align: center;
span{
width: 4rem;
height: .6rem;
display: flex;
}
}
}
}
}
}
.gg{
width: 2rem;
height: 2.9rem;
position: fixed;
right: 2%;
top: 60%;
margin: 0 auto;
img{
width: 2rem;
height: 2.9rem;
}
}
.dl{
width: 15rem;
height: 1.8rem;
position: fixed;
left: 0;
right: 0;
bottom: 2rem;
margin: 0 auto;
img{
width: 15rem;
height: 1.8rem;
}
}
.footer{
width: 15rem;
height: 3rem;
}
}
}
699
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
