音悦3

转载

mob604756eae43b 2021-10-27 19:34:00

文章标签 html css ico 块级元素 it技术 文章分类 代码人生

前端

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/Index.css"/>
</head>
<body>
<div class="content">
<div class="banner">
<img src="img/banner/1.jpg"/>
</div>
<div class="star">
<div class="title"></div>
<ul>
<li>
<img src="img/necessary-1.png" alt="" />
<div>官方应援手灯专区</div>
</li>
<li>
<img src="img/necessary-2.gif" alt="" />
<div>官方应援手灯专区</div>
</li>
<li>
<img src="img/necessary-3.png" alt="" />
<div>官方应援手灯专区</div>
</li>
<li>
<img src="img/necessary-4.gif" alt="" />
<div>官方应援专区</div>
</li>
<li>
<img src="img/special.jpg" alt="" />
<div></div>
</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="" />
<h3>薛之谦</h3>
</a></li>
<li><a href="list.html">
<img src="img/top/a/toplist_a02.jpg" alt="" />
<h3>薛之谦</h3>
</a></li>
<li><a href="list.html">
<img src="img/top/a/toplist_a03.jpg" alt="" />
<h3>薛之谦</h3>
</a></li>
<li><a href="list.html">
<img src="img/top/a/toplist_a04.jpg" alt="" />
<h3>薛之谦</h3>
</a></li>
<li><a href="list.html">
<img src="img/top/a/toplist_a05.jpg" alt="" />
<h3>薛之谦</h3>
</a></li>
<li><a href="list.html">
<img src="img/top/a/toplist_a06.jpg" alt="" />
<h3>薛之谦</h3>
</a></li>
<li><a href="list.html">
<img src="img/top/a/toplist_a07.jpg" alt="" />
<h3>薛之谦</h3>
</a></li>
<li><a href="list.html">
<img src="img/top/a/toplist_a08.jpg" alt="" />
<h3>薛之谦</h3>
</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">
<div class="title">现货包邮，熊现货包邮，熊现货包邮，熊现货包邮，熊</div>
<div class="money">￥50</div>
<div><span class="love"></span><span class="num">999</span></div>
</div>
</a></li>
<li><a href="#">
<img src="img/pro/2.jpg" alt="" />
<div class="right">
<div class="title">现货包邮，熊现货包邮，熊现货包邮，熊现货包邮，熊</div>
<div class="money">￥50</div>
<div><span class="love"></span><span class="num">999</span></div>
</div>
</a></li>
<li><a href="#">
<img src="img/pro/3.jpg" alt="" />
<div class="right">
<div class="title">现货包邮，熊现货包邮，熊现货包邮，熊现货包邮，熊</div>
<div class="money">￥50</div>
<div><span class="love"></span><span class="num">999</span></div>
</div>
</a></li>
<li><a href="#">
<img src="img/pro/4.jpg" alt="" />
<div class="right">
<div class="title">现货包邮，熊现货包邮，熊现货包邮，熊现货包邮，熊</div>
<div class="money">￥50</div>
<div><span class="love"></span><span class="num">999</span></div>
</div>
</a></li>
<li><a href="#">
<img src="img/pro/5.jpg" alt="" />
<div class="right">
<div class="title">现货包邮，熊现货包邮，熊现货包邮，熊现货包邮，熊</div>
<div class="money">￥50</div>
<div><span class="love"></span><span class="num">999</span></div>
</div>
</a></li>
<li><a href="#">
<img src="img/pro/6.jpg" alt="" />
<div class="right">
<div class="title">现货包邮，熊现货包邮，熊现货包邮，熊现货包邮，熊</div>
<div class="money">￥50</div>
<div><span class="love"></span><span class="num">999</span></div>
</div>
</a></li>
<li><a href="#">
<img src="img/pro/7.jpg" alt="" />
<div class="right">
<div class="title">现货包邮，熊现货包邮，熊现货包邮，熊现货包邮，熊</div>
<div class="money">￥50</div>
<div><span class="love"></span><span class="num">999</span></div>
</div>
</a></li>
<li><a href="#">
<img src="img/pro/8.jpg" alt="" />
<div class="right">
<div class="title">现货包邮，熊现货包邮，熊现货包邮，熊现货包邮，熊</div>
<div class="money">￥50</div>
<div><span class="love"></span><span class="num">999</span></div>
</div>
</a></li>
<li><a href="#">
<img src="img/pro/9.jpg" alt="" />
<div class="right">
<div class="title">现货包邮，熊现货包邮，熊现货包邮，熊现货包邮，熊</div>
<div class="money">￥50</div>
<div><span class="love"></span><span class="num">999</span></div>
</div>
</a></li>
</ul>

</div>

</div>
<div id="di" style="text-align: center;">
<img src="img/footer_v180123.png"/>
</div>
</body>
</html>

CSS(注意，写的时候一定要注意前后顺序)

body{
background-color: #cccccc;
}
.content{
width:1000px ;
margin: 0 auto;
}
.content ul{
padding-left: 0px;
}
.content ul li{
display: inline-block;/*转换为行内块级元素*/
}
.content a{
text-decoration: none;
color: #333333;
}
.content .banner{
width: 1000px;
height: 325px;
}

.content .banner img{
width: 1000px;
height: 325px;
}
.content .star{
margin-top: 30px;
}
.content .star .title{
background-image: url(../img/zhuxing.png);
background-repeat: no-repeat;
height: 50px;
}
.content .star li{
background-color: #FFFFFF;
width: 180px;
margin: 0;
}
.content .star img{
width: 180px;
}
.content .star li:first-child{
margin-left: 0;
}
.content .star li:last-child{
margin-right: 0;
}
.content .star li div{
margin: 10px 0;
text-align: center;
}
.content .star li:last-child{
margin-left: 20px;
height: 135px;
vertical-align: top;
}
.content .star li:last-child img{
height: 135px;
width: 225px;
}
.content .star li div{
margin: 10px 0;
text-align: center;
}
.content .star li:last-child{
margin-left: 20px;
height: 135px;
vertical-align: top;
}
.content .star li:last-child img{
height: 135px;
width: 225px;
}
.content .top{
margin-top: 30px;
}
.content .top .title{
background-image: url(../imgop_title2.png);
background-repeat: no-repeat;
background-position: 0 -50px;
height: 50px;
}
.content .top li{
background-color: #FFFFFF;
width: 112px;
margin: 0 5px;
}
.content .top li:first-child{
margin-left: 0;
}
.content .top li:last-child{
margin-right: 0;
}

.content .top img{
width: 112px;
}
.content .top h3{
font-size: 16px;
text-align: center;
margin: 10px 0px;
}
.content .list{
margin-top: 30px;
}
.content .list > .title{
background-image: url(../imgop_title2.png);
background-repeat: no-repeat;/*平铺不重复*/
background-position: 0 -100px;
height: 50px;
}
.content .list li{
margin: 0 5px;
width: 320px;
background-color: #FFFFFF;
height: 154px;
}
.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;
width: 150px;
vertical-align: top;
margin-top: 30px;
}
.content .list .right .title{
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: #FF407F;
margin: 10px 0;
}
.content .list .right .love{
height: 12px;
width: 12px;
display: inline-block;
background-image: url(../img/icon/ico.png);
background-position: 0 -73px;
}
.content .list .right .num{
color: #999999;
margin-left: 10px;
/* vertical-align:middle ; */
}