//================================================html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>首页</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css"/>
</head>
<body>
<div class="content">
<div class="banner">
<!-- 轮播图 -->
<!-- <img src="img/banner/1.jpg" > -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/banner/1.jpg" ></div>
<div class="swiper-slide"><img src="img/banner/2.jpg" ></div>
<div class="swiper-slide"><img src="img/banner/3.jpg" ></div>
<div class="swiper-slide"><img src="img/banner/4.jpg" ></div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<script src="./js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>
<script>
var swiper = new Swiper(".mySwiper", {
cssMode: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
},
mousewheel: true,
keyboard: true,
});
</script>
</div>
<div class="star">
<div class="title"></div>
<ul>
<li><a href=""><img src="img/necessary-1.png" alt=""><span>官方应援手灯专区</span></a></li>
<li><a href=""><img src="img/necessary-2.gif" alt=""><span>官方应援手稿专区</span></a></li>
<li><a href=""><img src="img/necessary-3.png" alt=""><span>签名商品专区</span></a></li>
<li><a href=""><img src="img/necessary-4.gif" alt=""><span>官方DVD专区</span></a></li>
<li><a href=""><img src="img/special.jpg" alt=""></a></li>
</ul>
</div>
<div class="top">
<div class="title">
</div>
<ul>
<li><a href="list.html"><img src="img/top/a/toplist_a01.jpg" alt=""></a></li>
<li><a href="list.html"><img src="img/top/a/toplist_a02.jpg" alt=""></a></li>
<li><a href="list.html"><img src="img/top/a/toplist_a03.jpg" alt=""></a></li>
<li><a href="list.html"><img src="img/top/a/toplist_a04.jpg" alt=""></a></li>
<li><a href="list.html"><img src="img/top/a/toplist_a05.jpg" alt=""></a></li>
<li><a href="list.html"><img src="img/top/a/toplist_a06.jpg" alt=""></a></li>
<li><a href="list.html"><img src="img/top/a/toplist_a07.jpg" alt=""></a></li>
<li><a href="list.html"><img src="img/top/a/toplist_a08.jpg" alt=""></a></li>
</ul>
</div>
<div class="list">
<div class="title">
</div>
<ul>
<li><a href="">
<img src="img/pro/1.jpg" alt="">
<div class="right">
<span class="title">【现货包邮】加一联创1 more bear 万魔熊头</span>
<span class="money">￥50</span>
<div><span class="love"></span><span class="num">0</span></div>
</div>
</a></li>
<li><a href="">
<img src="img/pro/2.jpg" alt="">
<div class="right">
<span class="title">【现货包邮】加一联创1 more bear 万魔熊头</span>
<span class="money">￥50</span>
<div><span class="love"></span><span class="num">0</span></div>
</div>
</a></li>
<li><a href="">
<img src="img/pro/3.jpg" alt="">
<div class="right">
<span class="title">【现货包邮】加一联创1 more bear 万魔熊头</span>
<span class="money">￥50</span>
<div><span class="love"></span><span class="num">0</span></div>
</div>
</a></li>
<li><a href="">
<img src="img/pro/4.jpg" alt="">
<div class="right">
<span class="title">【现货包邮】加一联创1 more bear 万魔熊头</span>
<span class="money">￥50</span>
<div><span class="love"></span><span class="num">0</span></div>
</div>
</a></li>
<li><a href="">
<img src="img/pro/5.jpg" alt="">
<div class="right">
<span class="title">【现货包邮】加一联创1 more bear 万魔熊头</span>
<span class="money">￥50</span>
<div><span class="love"></span><span class="num">0</span></div>
</div>
</a></li>
<li><a href="">
<img src="img/pro/6.jpg" alt="">
<div class="right">
<span class="title">【现货包邮】加一联创1 more bear 万魔熊头</span>
<span class="money">￥50</span>
<div><span class="love"></span><span class="num">0</span></div>
</div>
</a></li>
<li><a href="">
<img src="img/pro/7.jpg" alt="">
<div class="right">
<span class="title">【现货包邮】加一联创1 more bear 万魔熊头</span>
<span class="money">￥50</span>
<div><span class="love"></span><span class="num">0</span></div>
</div>
</a></li>
<li><a href="">
<img src="img/pro/8.jpg" alt="">
<div class="right">
<span class="title">【现货包邮】加一联创1 more bear 万魔熊头</span>
<span class="money">￥50</span>
<div><span class="love"></span><span class="num">0</span></div>
</div>
</a></li>
<li><a href="">
<img src="img/pro/9.jpg" alt="">
<div class="right">
<span class="title">【现货包邮】加一联创1 more bear 万魔熊头</span>
<span class="money">￥50</span>
<div><span class="love"></span><span class="num">0</span></div>
</div>
</a></li>
</ul>
</div>
</div>
<div class="di">
<div class="jio">
</div>
</div>
</body>
</html>
//==========================================================css
body{
background-color: #CCCCCC;
}
a{
text-decoration: none;
}
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* ==== */
.content ul{
padding-left: 0;
}
.content ul li{
display: inline-block;
}
.content {
/* text-align: center; */
width: 1000px;
margin: 0 auto;
}
.content .banner img{
width: 1000px;
}
.content .star{
margin-top: 20px;
}
.content .star .title{
background: url(../img/zhuxing.png);
background-repeat: no-repeat;
height: 45px;
}
.content .star li{
background-color: #FFFFFF;
vertical-align: bottom;
height: 135px;
}
.content .star li img{
width: 180px;
/* height: 1; */
}
.content .star li:last-child{
height: 135px;
margin-left: 20px;
}
.content .star li:last-child img{
height: 135px;
width: 240px;
}
.content .star li span{
text-align: center;
display: block;
color: #999;
margin-top: 5px;
}
.content .top{
margin-top: 20px;
}
.content .top .title{
height: 25px;
background-image: url(../img/shop_title2.png);
background-repeat: no-repeat;
background-position: 0 -10px;
}
.content .top li{
margin: 0 3px;
width: 115px;
/* margin: 10px; */
/* background-color: #DE4767; */
}
.content .top li:first-child{
margin-left: 0;
}
.content .top li:last-child{
margin-right: 0;
}
.content .top img{
width: 115px;
}
.content .list li{
background-color: #FFFFFF;
width: 323px;
margin: 10px 5px;
height: 154px;
/* display: inline-block; */
}
.content .list li:nth-child(3n+1){
margin-left: 0;
}
.content .list li:nth-child(3n){
margin-right: 0;
}
.content .list img{
width: 154px;
height: 154px;
}
.content .list .right{
display: inline-block;
vertical-align: top;
}
.content .list .right span{
display: block;
color: #999999;
font-size: 13px;
}
.content .list .right .title{
margin-top: 35px;
display: block;
margin-left: 5px;
width: 150px;
margin-bottom: 10px;
}
.content .list .right .money{
color: #DE4767;
margin-bottom: 10px;
}
.content .list .right div span{
display: inline-block;
}
.content .list .love{
width: 12px;
height: 12px;
background-image: url(../img/icon/ico.png);
background-repeat:no-repeat ;
background-position: 0px -73px ;
margin: 10px 5px;
}
.content .list .num{
display: inline-block;
vertical-align: top;
margin-top: 7px;
}
.di{
width: 100%;
background: #FFFFFF;
text-align: center;
}
.jio {
background: url(../img/footer_v180123.png);
background-position:-80px 0px;
background-repeat: no-repeat;
width: 1024px;
height: 60px;
/* background: #DE4767; */
margin: 0 auto;
}
posted on
浙公网安备 33010602011771号