emment快捷语法
ul>(li>img[src=img/pro/$.jpg]+h3+div>span.money{￥15}+span.love+span.num{787878})*15
$为递增,输出效果为：
<ul>
<li>
<img src="img/pro/1.jpg" alt="">
<h3></h3>
<div>
<span class="money">￥15</span>
<span class="love"></span>
<span class="num">718157</span>
</div>
<ul>
三个px第一个上 第二个左右 第三个下
四个px上右下左
ul padding-lift默认距离为40px
html代码:
<!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>
<li>签名版</li>
<li>内地引进版</li>
<li>演唱会DVD/LIVE</li>
<li>贴纸/文件夹/笔记本</li>
</ul>
</dd>
</dl>
<dl>
<dt>公司</dt>
<dd>
<ul>
<li>MBK Entertainment</li>
<li>环球唱片</li>
<li>艺人工作室</li>
<li>英皇娱乐</li>
<li>Fantagio</li>
<li>乐华娱乐</li>
<li>Woolim</li>
<li>WM Entertainment</li>
<li>相信音乐</li>
<li>TS Entertainment</li>
<li>环球中国</li>
<li>华纳唱片</li>
<li>天娱传媒</li>
<li>LOEN Entertainment</li>
</ul>
</dd>
</dl>
</div>
</div>
<div class="list">
<ul>
<li>
<img src="img/pro/1.jpg" alt="">
<h3>这里是标题</h3>
<div>
<span class="money">￥15</span>
<span class="love"></span>
<span class="num">718157</span>
</div>
</li>
<li>
<img src="img/pro/2.jpg" alt="">
<h3>这里是标题</h3>
<div>
<span class="money">￥15</span>
<span class="love"></span>
<span class="num">718157</span>
</div>
</li>
<li>
<img src="img/pro/3.jpg" alt="">
<h3>这里是标题</h3>
<div>
<span class="money">￥15</span>
<span class="love"></span>
<span class="num">718157</span>
</div>
</li>
<li>
<img src="img/pro/4.jpg" alt="">
<h3>这里是标题</h3>
<div>
<span class="money">￥15</span>
<span class="love"></span>
<span class="num">718157</span>
</div>
</li>
<li>
<img src="img/pro/5.jpg" alt="">
<h3>这里是标题</h3>
<div>
<span class="money">￥15</span>
<span class="love"></span>
<span class="num">718157</span>
</div>
</li>
<li>
<img src="img/pro/6.jpg" alt="">
<h3>这里是标题</h3>
<div>
<span class="money">￥15</span>
<span class="love"></span>
<span class="num">718157</span>
</div>
</li>
<li>
<img src="img/pro/7.jpg" alt="">
<h3>这里是标题</h3>
<div>
<span class="money">￥15</span>
<span class="love"></span>
<span class="num">718157</span>
</div>
</li>
<li>
<img src="img/pro/8.jpg" alt="">
<h3>这里是标题</h3>
<div>
<span class="money">￥15</span>
<span class="love"></span>
<span class="num">718157</span>
</div>
</li>
<li>
<img src="img/pro/9.jpg" alt="">
<h3>这里是标题</h3>
<div>
<span class="money">￥15</span>
<span class="love"></span>
<span class="num">718157</span>
</div>
</li>
<li>
<img src="img/pro/1.jpg" alt="">
<h3>这里是标题</h3>
<div>
<span class="money">￥15</span>
<span class="love"></span>
<span class="num">718157</span>
</div>
</li>
<li>
<img src="img/pro/1.jpg" alt="">
<h3>这里是标题</h3>
<div>
<span class="money">￥15</span>
<span class="love"></span>
<span class="num">718157</span>
</div>
</li>
<li>
<img src="img/pro/2.jpg" alt="">
<h3>这里是标题</h3>
<div>
<span class="money">￥15</span>
<span class="love"></span>
<span class="num">718157</span>
</div>
</li>
<li>
<img src="img/pro/3.jpg" alt="">
<h3>这里是标题</h3>
<div>
<span class="money">￥15</span>
<span class="love"></span>
<span class="num">718157</span>
</div>
</li>
<li>
<img src="img/pro/4.jpg" alt="">
<h3>这里是标题</h3>
<div>
<span class="money">￥15</span>
<span class="love"></span>
<span class="num">718157</span>
</div>
</li>
<li>
<img src="img/pro/5.jpg" alt="">
<h3>这里是标题</h3>
<div>
<span class="money">￥15</span>
<span class="love"></span>
<span class="num">718157</span>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
css代码:
.content .nav{
background-color: white;
}
.content .nav .text{
width: 1000px;
margin: 10px auto;
padding: 10px 20px;
border: 1px solid #ccc;
height: 120px;
}
.content .nav .text dl{
position: relative;
}
.content .nav .text dl:first-child{
border-bottom: 1px dotted #CCCCCC;
padding-bottom: 5px;
}
.content .nav .text dl dt{
font-size: 19px;
font-weight: bolder;
}
.content .nav .text dl dd{
padding-left: -40px;
font-weight: 100;
font-size: 12px;
position: absolute;
top: -10px;
line-height: 2em;
}
.content .nav .text dl dd ul{
padding-left: 20px;
}
.content .nav .text dl dd ul li{
display: inline-block;
width: 120px;
}
.content .list {
background-color: #ededed;
}
.content .list ul{
padding-left: 0;
width: 1042px;
margin: 0 auto;
}
.content .list ul li{
display: inline-block;
background-color: #FFFFFF;
width: 160px;
margin: 15px;
padding: 10px;
}
.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;
}
.content .list ul li h3{
font-size: 16px;
font-weight: normal;
color: #666;
}
.content .list ul li div .money{
color: deeppink;
}
.content .list ul li div .love{
width: 12px;
height: 12px;
display: inline-block;
background-image:url(../img/icon/ico.png);
background-position: 0px -72px;
margin: 0 10px;
}
.content .list ul li div .num{
color: #999;
}