初寫專案（音悅2）
前端
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/list.css"/>
</head>
<body>
<!--頭部-->
<div class="content">
<div class="nav">
<div class="text">
<dl>
<dt>分類</dt>
<dd>
<ul>
<li>原版</li>
</ul>
</dd>
</dl>
<dl>
<dt>公司</dt>
<dd>
<ul>
<li>這是列表1</li>
</ul>
</dd>
</dl>
</div>
</div>
<div class="list">
<!--ul>(li>img[src=img/pro/$.jpg]+h3+div>span.money{￥15}+span.love+span.num{787878})*15 emment寫法-->
<ul>
<li>
<img src="img/pro/1.jpg" alt="" />
<h3>123</h3>
<div>
<span class="money">15</span>
<spam class="love"></spam>
<span class="num">23654</span>
</div>
</li>
</div>
<!--尾部-->
</body>
</html>
CSS
.content .nav {
background-color: white;
}
.content .nav .text {
width: 1000px;
margin: 30px auto;
padding: 5px 20px;
border: 1px solid #ccc;
height: 130px;
}
.content .nav .text dl {
position: relative;
}
.content .nav .text dl:first-child{
padding-bottom: 14px;
border-bottom: 1px dotted #CCCCCC;
}
.content .nav .text dl dt{
font-size: 18px;
font-weight: bolder;
}
.content .nav .text dl dd ul li{
display: inline-block;/*列轉行*/
width: 120px;
}
.content .nav .text dl dd {
position: absolute;/*清除浮動*/
top: -14px;
line-height: 2em;
}
.content .list {
background-color: #CCCCCC;
}
.content .list ul {
padding-left: 0;
width: 1042px;
margin: 0 auto;
}
.content .list ul li {
display: inline-block;
background-color: #FFFFFF;
width: 180px;
margin: 15px;
}
.content .list ul li:nth-child(5n+1){
margin-left: 0;
}
.content .list ul li:nth-child(5n){
margin-right: 0;
}
.content .list ul li img{
width: 160px;
padding: 10px;
}
.content .list ul li h3{
padding-left: 10px;
font-size: 16px;
font-weight: normal;/*清除字型高度*/
color: #666;
}
.content .list ul li div{
text-align: center;
font-size: 14px;
}
.content .list ul li div .money {
color: #ff407f;
}
.content .list ul li div .love {
width: 12px;
height: 12px;
display: inline-block;/*轉換為行內塊級元素*/
background-image: url(../img/icon/ico.png);
background-position: 0px -70px;/*修改照片的顯示位置*/
margin: 0 10px;
}
.content .list ul li div .num {
color: #999;
}