效果图
(还未完全写完)
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>current-苏宁易购</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
@charset "UTF-8";
html,
body,
ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
input,
a,
img,
button {
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
vertical-align: baseline;
}
html {
font-size: 10px;
!important;
}
body {
font-size: 1.4rem;
background-color: #f2f2f2 !important;
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
}
ul,
ol,
dl {
list-style: none;
}
fieldset,
img,
button,
input,
textarea {
border: none;
margin: 0;
padding: 0;
outline: none;
}
a {
color: #999999;
text-decoration: none;
}
a:hover {
color: #f8b62b;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
font-size: 100%;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clearfix:before,
.clearfix:after {
content: '';
display: table;
clear: both;
}
.w {
width: 119rem;
margin: 0 auto;
}
.tl {
text-align: left;
}
.tr {
text-align: right;
}
.tc {
text-align: center;
}
.f60 {
color: #f8b62b;
}
s,
i {
font-style: normal;
text-decoration: none;
}
.sn-top-banner {
position: relative;
background-color: #164fa6;
}
.sn-top-banner .banner-close {
position: absolute;
top: 0.3rem;
right: 1rem;
width: 1.9rem;
height: 1.9rem;
background: url(./../images/close-banner.png) 0 0;
}
sn-top-banner .banner-close:hover {
background-position: 0 -1.9rem;
}
.sn-toolbar {
background-color: #f5f5f5;
height: 3.5rem;
border-bottom: 1px solid #eeeeee;
}
.sn-toolbar>div {
height: 100%;
}
.sn-toolbar>div li {
float: left;
line-height: 3.5rem;
padding: 0 2.5rem 0 0.1rem;
position: relative;
}
.sn-toolbar>div li.down i {
position: absolute;
right: 1rem;
top: 1.7rem;
width: 1.5rem;
height: 1.5rem;
overflow: hidden;
}
.sn-toolbar>div li.down img {
height: 1.5rem;
width: 1.5rem;
}
.sn-toolbar>div li.down i.wang {
position: absolute;
top: 1.5rem;
left: 8.5rem;
}
.sn-toolbar>div li>img {
width: 1.5rem;
height: 1.5rem;
}
.sn-toolbar>div li.down i s {
position: absolute;
left: 0;
top: -1.9rem;
font-size: 2.4rem;
color: #999999;
}
.sn-toolbar>div li.down i s.f60 {
color: #f8b62b;
}
.sn-top-search {
background-color: #fff;
height: 11rem;
}
.sn-top-search .logo-set .main-logo {
height: 10rem;
width: 19rem;
background: url("./../images/sn-logo.png") no-repeat center;
}
.sn-top-search .logo-set .sec-logo {
height: 10rem;
width: 16rem;
background: url("./../images/sn-sub-logo.gif") no-repeat center;
}
.sn-top-search .logo-set .main-logo,
.sn-top-search .logo-set .sec-logo {
float: left;
background-size: contain;
}
.sn-top-search .search-input {
width: 53.8rem;
height: 3.8rem;
float: left;
/*background-color: greenyellow;*/
padding-top: 3rem;
padding-left: 3rem;
}
.sn-top-search .search-input input:first-child {
width: 45rem;
height: 3.6rem;
border: 0.2rem solid #f8b62b;
box-sizing: border-box;
padding-left: 0.8rem;
font-size: 1.2rem;
float: left;
}
.sn-top-search .search-input input:last-child {
width: 8rem;
height: 3.6rem;
background-color: #f8b62b;
color: #fff;
float: left;
font-size: 1.5rem;
}
.sn-top-search .search-more-link {
float: left;
height: 3rem;
width: 53.8rem;
padding-left: 3rem;
}
.sn-top-search .search-more-link li {
float: left;
margin: 0.7rem 0.5rem 0 0;
}
.sn-top-search .search-more-link li+li {
border-left: 0.1rem solid #c0c0c0;
padding-left: 0.5rem;
}
.sn-nav {
width: 100%;
height: 3.8rem;
background-color: #fff;
}
.sn-nav>div {
display: flex;
}
.sn-nav>div .sn-nav-menu {
width: 21rem;
height: 3.8rem;
background-color: #f8b62b;
}
.sn-nav>div .sn-nav-menu a {
box-sizing: border-box;
font-size: 1.6rem;
font-weight: bolder;
color: #fff;
display: block;
width: 100%;
line-height: 3.8rem;
padding-left: 2.5rem;
position: relative;
}
.sn-nav>div .sn-nav-menu a:before {
content: '';
position: absolute;
top: 1.5rem;
left: 1rem;
width: 1.2rem;
height: 1rem;
background: url("./../images/index.png") 0 0;
}
.sn-nav>div .sn-nav-items {
flex: 1;
}
.sn-nav>div .sn-nav-items ul li {
float: left;
line-height: 3.8rem;
padding: 0 1rem;
}
.sn-nav>div .sn-nav-items ul li a {
color: #000000;
font-weight: bolder;
font-size: 1.7rem;
}
.sn-nav>div .sn-nav-items ul li a:hover {
color: #f8b62b;
}
.sn-casual {
width: 100%;
height: 44rem;
background-color: rgb(115, 164, 255);
}
.sn-casual .sn-casual-left {
float: left;
width: 21rem;
height: 44rem;
background-color: #252221;
margin-left: -100%;
}
.sn-casual .sn-casual-left .index-list {
width: 21rem;
height: 44rem;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.sn-casual .sn-casual-left .index-list li {
height: 2.5rem;
/*background-color: yellow;*/
padding-left: 0.8rem;
cursor: pointer;
}
.sn-casual .sn-casual-left .index-list li a {
color: #fff;
}
.sn-casual .sn-casual-left .index-list li a:hover {
color: #f8b62b;
}
.sn-casual .sn-casual-left .index-list li em {
color: #c0c0c0;
margin: 0 0.2rem;
}
.sn-casual .sn-casual-right {
float: left;
;
width: 17rem;
height: 44rem;
background-color: #fff;
margin-left: -17rem;
}
.sn-casual .sn-casual-right .sn-casual-right-top {
width: 100%;
height: 16.8rem;
/*background-color: red;*/
padding: 1.1rem 0 0.2rem 0;
text-align: center;
border-bottom: 0.01rem solid #f2f2f2;
}
.sn-casual .sn-casual-right .sn-casual-right-top .logo {
height: 5.9rem;
width: 100%;
/*background-color: yellow;*/
display: flex;
justify-content: center;
}
.sn-casual .sn-casual-right .sn-casual-right-top .logo a {
height: 5.8rem;
width: 5.8rem;
/*background-color: green;*/
box-sizing: border-box;
background: url("./../images/index.png") -90px -22px;
}
.sn-casual .sn-casual-right .sn-casual-right-top p {
height: 1.2rem;
width: 17rem;
margin: 1rem auto;
}
.sn-casual .sn-casual-right .sn-casual-right-top .new_vip {
height: 2.2rem;
width: 17rem;
/*background-color: yellow;*/
margin-bottom: 1rem;
position: relative
}
.sn-casual .sn-casual-right .sn-casual-right-top .new_vip a:first-child {
width: 7rem;
line-height: 2.2rem;
color: #ffa114;
font-size: 0.5rem;
border: 0.1rem solid #ffa114;
position: absolute;
left: 1rem;
}
.sn-casual .sn-casual-right .sn-casual-right-top .new_vip a:last-child {
width: 7rem;
height: 2.2rem;
background: url("./../images/index.png") -29.5rem -25.1rem;
position: absolute;
right: 1rem;
}
.sn-casual .sn-casual-right .sn-casual-right-top .down {
line-height: 1.5rem;
width: 17rem;
/*background-color: greenyellow;*/
font-size: 0.75rem;
margin-top: 1.5rem;
}
.sn-casual .sn-casual-right .sn-casual-right-top .down a {
height: 1.5rem;
width: 8rem;
/*background-color: darkorange;*/
}
.sn-casual .sn-casual-right .sn-casual-right-top .down em {
display: inline-block;
height: 1.4rem;
width: 1.8rem;
vertical-align: top
}
.sn-casual .sn-casual-right .sn-casual-right-top .down a:first-child em {
background: url("./../images/index.png") -11.2rem -0.1rem;
}
.sn-casual .sn-casual-right .sn-casual-right-top .down a:last-child em {
background: url("./../images/index.png") -8.8rem 0;
}
.sn-casual .sn-casual-right .sn-casual-right-top .down a span {
color: #666666;
line-height: 1.5rem;
vertical-align: top
}
.sn-casual .sn-casual-right .sn-casual-right-middle {
height: 9.7rem;
/*background-color:red;*/
display: flex;
flex-direction: column;
}
.sn-casual .sn-casual-right .sn-casual-right-middle div {
flex: 1;
/*background-color: yellow;*/
position: relative;
font-size: 1.2rem;
}
.sn-casual .sn-casual-right .sn-casual-right-middle div a {
position: absolute;
top: 1.2rem;
left: 1rem;
line-height: 2rem;
}
.sn-casual .sn-casual-right .sn-casual-right-middle div a span:first-child {
color: #f8b62b;
}
.sn-casual .sn-casual-right .sn-casual-right-middle div a span:last-child {
margin-left: 0.5rem;
}
.sn-casual .sn-casual-right .sn-casual-right-middle div a span:last-child:hover {
color: #ff6700;
}
.sn-casual .sn-casual-right .sn-casual-right-bottom {
height: 16.2rem;
width: 100%;
/*background-color: red;*/
box-sizing: border-box;
padding: 1rem 0 0 0;
}
.sn-casual .sn-casual-right .sn-casual-right-bottom ul {
height: 100%;
width: 100%;
/*background-color: yellow;*/
}
.sn-casual .sn-casual-right .sn-casual-right-bottom ul li {
height: 7.6rem;
width: 5.66rem;
/*background-color: green;*/
float: left;
display: flex;
flex-direction: column;
border: 0.1rem solid #f2f2f2;
box-sizing: border-box;
}
.sn-casual .sn-casual-right .sn-casual-right-bottom ul li a {
line-height: 2.2rem;
width: 5rem;
text-align: center;
margin-top: 1rem;
/*background-color: greenyellow;*/
}
.sn-casual .sn-casual-right .sn-casual-right-bottom ul li a i {
font-size: 4rem;
}
.sn-casual .sn-casual-right .sn-casual-right-bottom ul li a span {
font-size: 0.5em;
}
/*中间*/
.sn-casual .sn-casual-center {
float: left;
;
width: 100%;
height: 44rem;
}
.sn-casual .sn-casual-center .sn-casual-center-w {
margin: 0 17rem 0 21rem;
height: 44rem;
background-color: red;
position: relative;
}
.sn-casual .sn-casual-center .sn-casual-center-w img {
width: 100%;
height: 44rem;
}
.sn-casual .sn-casual-center .sn-casual-center-w .c-prev,
.sn-casual .sn-casual-center .sn-casual-center-w .c-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 3rem;
height: 5rem;
background-color: rgba(0, 0, 0, .4);
}
.sn-casual .sn-casual-center .sn-casual-center-w .c-prev {
left: 0;
font-size: 3rem;
}
.sn-casual .sn-casual-center .sn-casual-center-w .c-next {
right: 0;
font-size: 3rem;
}
.sn-casual .sn-casual-center .sn-casual-center-w .c-prev i,
.sn-casual .sn-casual-center .sn-casual-center-w .c-next i {
position: absolute;
top: 15%;
}
.sn-casual .sn-casual-center .sn-casual-center-w .c-bottom {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
}
.sn-casual .sn-casual-center .sn-casual-center-w .c-bottom li {
width: 3rem;
height: 3rem;
background-color: #fff;
float: left;
margin: 0 0.5rem;
border-radius: 50%;
}
.sn-casual .sn-casual-center .sn-casual-center-w .c-bottom .current {
background-color: orangered;
}
</style>
</head>
<body>
<section class="sn-top-banner">
<div class="top-banner-center w">
<a href="#">
<img src="1.png" alt="">
</a>
</div>
<a href="#" class="banner-close"></a>
</section>
<nav class="sn-toolbar">
<div class="w clearfix">
<div class="fl"></div>
<ul>
<li class="down">
<a href="#">网站导航</a>
<i><s>◇</s></i>
</li>
<li class="down">
<a href="#">商家入驻</a>
<i><s>◇</s></i>
</li>
<li class="down">
<a href="#">客户服务</a>
<i><s>◇</s></i>
</li>
<li class="down">
<img src="" alt="" class="img">
<a href="#">网站导航</a>
<i class="wang"><s>▼</s></i>
</li>
</ul>
<div class="fr">
<ul>
<li>
<a href="#">请登录</a>
<a href="#" class="f60">注册有礼</a>
</li>
<li class="down">
<a href="#">我的订单</a>
<i><s>◇</s></i>
</li>
<li class="down">
<a href="#">我的易购</a>
<i><s>◇</s></i>
</li>
<li>
<a href="#">苏宁会员</a>
</li>
<li class="down address">
<img src="" alt="">
<a href="#" class="f60">购物车</a>
<i><s class="f60">◇</s></i>
</li>
<li>
<a href="#">易宝付</a>
</li>
<li>
<a href="#">企业采购</a>
</li>
<li class="down">
<a href="#">手机苏宁</a>
<i><s>◇</s></i>
</li>
</ul>
</div>
</div>
</nav>
<section class="sn-top-search">
<div class="w">
<div class="logo-set">
<a href="#" class="main-logo"></a>
<a href="#" class="sec-logo"></a>
</div>
<form action="" class="search-input">
<input type="text" name="search" placeholder="周年庆赢好礼">
<input type="submit" value="搜 索">
</form>
<div class="search-more-link">
<ul>
<li><a href="">烤箱</a></li>
<li><a href="">老火锅</a></li>
<li><a href="">iPhone 14</a></li>
<li><a href="">空气感拉拉裤</a></li>
<li><a href="">空调立减500</a></li>
<li><a href="">浪琴</a></li>
<li><a href="">手机</a></li>
<li><a href="">冰箱</a></li>
</ul>
</div>
</div>
</section>
<section class="sn-nav">
<div class="w">
<div class="sn-nav-menu">
<div class="sn-nav-menu-all">
<a href="#">全部商品分类</a>
</div>
</div>
<div class="sn-nav-items">
<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>
<li><a href="#">苏宁国际</a></li>
<li><a href="#">苏宁Outlets</a></li>
<li><a href="#">苏宁金融</a></li>
</ul>
</div>
</div>
</section>
<section class="sn-casual">
<div class="w">
<div class="sn-casual-center">
<div class="sn-casual-center-w">
<div class="content">
<img src="" alt="">
</div>
<div class="control">
<a href="#" class="c-prev">
<i class="lk-left"><</i>
</a>
<a href="#" class="c-next">
<i class="lk-right">></i>
</a>
<ul class="c-bottom">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<div class="sn-casual-left">
<ul class="index-list">
<li class="">
<a target="_blank">手机</a><em>/</em>
<a target="_blank">运营商</a><em>/</em>
<a target="_blank">智能数码</a>
</li>
<li class="">
<a target="_blank">电视</a><em>/</em>
<a target="_blank">冰箱</a><em>/</em>
<a target="_blank">空调</a><em>/</em>
<a target="_blank">洗衣机</a>
</li>
<li class="">
<a target="_blank">厨卫大电</a><em>/</em>
<a target="_blank">生活家电</a><em>/</em>
<a target="_blank">厨具</a>
</li>
<li class="">
<a target="_blank">电脑办公</a><em>/</em>
<a target="_blank">相机</a><em>/</em>
<a target="_blank">DIY</a>
</li>
<li class="">
<a target="_blank">家居</a><em>/</em>
<a target="_blank">家具</a><em>/</em>
<a target="_blank">家装</a><em>/</em>
<a target="_blank">家纺</a>
</li>
<li class="">
<a target="_blank">食品</a><em>/</em>
<a target="_blank">酒水</a><em>/</em>
<a target="_blank">生鲜</a><em>/</em>
<a target="_blank">特产</a>
</li>
<li class="">
<a target="_blank">个性护妆</a><em>/</em>
<a target="_blank">纸品清洁</a><em>/</em>
<a target="_blank">宠物</a>
</li>
<li class="">
<a target="_blank">母婴</a><em>/</em>
<a target="_blank">玩具</a><em>/</em>
<a target="_blank">车床</a><em>/</em>
<a target="_blank">童装</a>
</li>
<li class="">
<a target="_blank">运动</a><em>/</em>
<a target="_blank">户外</a><em>/</em>
<a target="_blank">足球</a><em>/</em>
<a target="_blank">跑步机</a>
</li>
<li class="">
<a target="_blank">男装</a><em>/</em>
<a target="_blank">女装</a><em>/</em>
<a target="_blank">内衣</a>
</li>
<li class="">
<a target="_blank">鞋靴</a><em>/</em>
<a target="_blank">箱包</a><em>/</em>
<a target="_blank">钟表</a><em>/</em>
<a target="_blank">珠宝</a>
</li>
<li class="">
<a target="_blank">汽摩</a><em>/</em>
<a target="_blank">二手车</a><em>/</em>
<a target="_blank">汽车用品</a>
</li>
<li class="">
<a target="_blank">图书</a><em>/</em>
<a target="_blank">童书</a><em>/</em>
<a target="_blank">教辅教材</a>
</li>
<li class="">
<a target="_blank">理财</a><em>/</em>
<a target="_blank">分期</a><em>/</em>
<a target="_blank">保险</a><em>/</em>
<a target="_blank">房产</a>
</li>
</ul>
</div>
<div class="sn-casual-right">
<div class="sn-casual-right-top">
<div class="logo">
<a href="#"></a>
</div>
<p>Hi,你好</p>
<div class="new_vip">
<a href="">新人有礼</a>
<a href=""></a>
</div>
<div class="down">
<a href=""><em></em><span>领云钻</span><span>></span></a>
<a href=""><em></em><span>领云钻</span><span>></span></a>
</div>
</div>
<div class="sn-casual-right-middle">
<div class="tag1"><a href=""><span>[活动]</span><span>新丝路少儿型秀大赛</span></a></div>
<div class="tag2"><a href=""><span>[知识]</span><span>别让孩子这样睡觉,可能比同龄人矮</span></a></div>
</div>
<div class="sn-casual-right-bottom">
<ul>
<li><a href=""><i class="sn-4"></i><span>话费</span></a></li>
<li><a href=""><i class="sn-4"></i><span>水电煤</span></a></li>
<li><a href=""><i class="sn-4"></i><span>苏宁卡</span></a></li>
<li><a href=""><i class="sn-4"></i><span>理财</span></a></li>
<li><a href=""><i class="sn-4"></i><span>分期</span></a></li>
<li><a href=""><i class="sn-4"></i><span>苏宁公益</span></a></li>
</ul>
</div>
</div>
</div>
</section>
</body>
</html>