音乐商城项目/首页

CSS部分:

body{
background-color: lightgrey;
}

.content{
width:1000px;
margin: 0 auto;
}

.content ul{
padding-left: 0;
}

.content ul li{
display: inline-block;/*显示在一行*/
}

.content{
width: 1000px;
margin: 0 auto;
}

.content .banner img{
width: 1000px;
}

.content .star{
margin-top: 20px;
}

.content .star .title{
background-image: url(../img/zhuxing.png);
background-repeat: no-repeat;/*不重复*/
height: 45px;
}

.content .star li{
background-color: white;
vertical-align: bottom;/*水平底部对齐 vertical-align水平对齐*/
}

.content .star li:last-child{
height: 131px;
margin-left: 20px;
}

.content .star li:last-child img{/*:last-child最后*/
height: 135px;
width: 240px;
}

.content .star li img{
width: 180px;
}

.content .star li span{
text-align: center;
display: block;
padding: 10px;

color: #999999;
font-size: 13px;
}

.content .top{
margin-top: 20px;
}

.content .top .title{
height: 25px;
background-image: url(../img/shop_title2.png);
background-repeat: no-repeat;/*不重复*/
background-position: 0 -60px;
}

.content .top li{
margin: 0 3px;
width: 115px;
background-color: white;
text-align: center;
font-weight: bolder;/*加粗*/
}

.content .top li a{
text-decoration: none;/*去除下划线*/
color: black;
font-size: 13px;

}

.content .top li:first-child{
margin-left: 0;
}

.content .top li:last-child{
margin-right: 0;
}

.content .top img{
width: 115px;
}

.content .list .title1{
height: 45px;
background-image: url(../img/shop_title2.png);
background-repeat: no-repeat;/*不重复*/
background-position: 0 -102px;
}

.content .list li{
background-color: #ffffff;
width: 323px;
margin: 10px 5px;
height: 154px;

}

.content .list li:nth-child(3n+1){/*:nth-child(n)匹配属于其父元素的第n个子元素不论元素类型*/
margin-left: 0;
}

.content .list li:nth-child(3n){/*:nth-child(n)匹配属于其父元素的第n个子元素不论元素类型*/
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: #999;
margin: 10px 5px;
width: 150px;
}

.content .list .right .title{
margin-top: 30px;
font-size: 14px;
/*内容过多只显示一行其余用省略号代替*/
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}

.content .list .right .money{
color: #DE4767;
}

.content .list .right div{
margin-top: -7px;
}

.content .list .right div span{
display: inline-block;/*显示在一行*/
}

.content .list .right .love{
height: 12px;
width: 12px;
background-image: url(../img/icon/ico.png);
background-position: 0 -74px;
margin-top: 15px;
}

.content .list .right .num{
width: 100px;
vertical-align: top;
color: #CCCCCC;
font-size: 12px;
}

.tupian{
text-align: center;
background-color: white;
}
.tupian img{
width: 1000px;
margin-left: 40px;
margin-top: 10px;
margin-right: 40px;

}

HTML部分:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/shouye.css"/>
</head>
<body>
<div class="content">
<div class="banner">
<img id="img" src="img/banner/1.jpg" >
</div>

<script type="text/javascript">
window.onload=function(){
var myImg=document.getElementById("img");
var arr=["img/banner/1.jpg","img/banner/2.jpg","img/banner/3.jpg","img/banner/4.jpg"];
var n=0;
setInterval(function(){
n++;
if(n==arr.length){
n=0;
}
myImg.src=arr[n];
},1000);
}
</script>

<div class="star">
<div class="title">

</div>

<ul>
<li><img src="img/necessary-1.png" alt=""><span>官方应援手灯专区</span></li>
<li><img src="img/necessary-2.gif" alt=""><span>官方应援手幅专区</span></li>
<li><img src="img/necessary-3.png" alt=""><span>签名商品专区</span></li>
<li><img src="img/necessary-4.gif" alt=""><span>官方DVD专区</span></li>
<li><img src="img/special.jpg" alt=""><span></span></li>
</ul>
</div>
<div class="top">
<div class="title">

</div>

<ul>
<li><a href="liebiao.html"><img src="img/top/a/toplist_a01.jpg" alt="">薛之谦</a></li>
<li><a href="liebiao.html"><img src="img/top/a/toplist_a02.jpg" alt="">iKON</a></li>
<li><a href="liebiao.html"><img src="img/top/a/toplist_a03.jpg" alt="">鹿晗</a></li>
<li><a href="liebiao.html"><img src="img/top/a/toplist_a04.jpg" alt="">GOT7</a></li>
<li><a href="liebiao.html"><img src="img/top/a/toplist_a05.jpg" alt="">EXO</a></li>
<li><a href="liebiao.html"><img src="img/top/a/toplist_a06.jpg" alt="">Astro(韩国)</a></li>
<li><a href="liebiao.html"><img src="img/top/a/toplist_a07.jpg" alt="">Winner</a></li>
<li><a href="liebiao.html"><img src="img/top/a/toplist_a08.jpg" alt="">BigBang</a></li>
</ul>
</div>
<div class="list">
<div class="title1">

</div>

<ul>
<li>
<img src="img/pro/1.jpg" alt="">
<div class="right">
<span class="title">【现货包邮】加一联创1more bear万魔熊头</span>
<span class="money">￥50</span>
<div><span class="love"></span><span class="num">0</span></div>
</div>
</li>
<li>
<img src="img/pro/2.jpg" alt="">
<div class="right">
<span class="title">【现货包邮】加一联创1more bear万魔熊头</span>
<span class="money">￥50</span>
<div><span class="love"></span><span class="num">0</span></div>
</div>
</li>
<li>
<img src="img/pro/3.jpg" alt="">
<div class="right">
<span class="title">【现货包邮】加一联创1more bear万魔熊头</span>
<span class="money">￥50</span>
<div><span class="love"></span><span class="num">0</span></div>
</div>
</li>
<li>
<img src="img/pro/4.jpg" alt="">
<div class="right">
<span class="title">【现货包邮】加一联创1more bear万魔熊头</span>
<span class="money">￥50</span>
<div><span class="love"></span><span class="num">0</span></div>
</div>
</li>
<li>
<img src="img/pro/5.jpg" alt="">
<div class="right">
<span class="title">【现货包邮】加一联创1more bear万魔熊头</span>
<span class="money">￥50</span>
<div><span class="love"></span><span class="num">0</span></div>
</div>
</li>
<li>
<img src="img/pro/6.jpg" alt="">
<div class="right">
<span class="title">【现货包邮】加一联创1more bear万魔熊头</span>
<span class="money">￥50</span>
<div><span class="love"></span><span class="num">0</span></div>
</div>
</li>
<li>
<img src="img/pro/7.jpg" alt="">
<div class="right">
<span class="title">【现货包邮】加一联创1more bear万魔熊头</span>
<span class="money">￥50</span>
<div><span class="love"></span><span class="num">0</span></div>
</div>
</li>
<li>
<img src="img/pro/8.jpg" alt="">
<div class="right">
<span class="title">【现货包邮】加一联创1more bear万魔熊头</span>
<span class="money">￥50</span>
<div><span class="love"></span><span class="num">0</span></div>
</div>
</li>
<li>
<img src="img/pro/9.jpg" alt="">
<div class="right">
<span class="title">【现货包邮】加一联创1more bear万魔熊头</span>
<span class="money">￥50</span>
<div><span class="love"></span><span class="num">0</span></div>
</div>
</li>
</ul>

</div>
</div>
<div class="tupian">
<img src="img/footer_v180123.png" >
</div>
</body>
</html>

posted @ 2021-10-27 19:01 牵着宇宙来遛弯阅读(81) 评论(0) 收藏举报

刷新页面返回顶部

赐

音乐商城项目/首页

公告