整理css（一）：背景可滚动样式；双层长短不一的下划线；li的前面加一个背景小图标

一：背景可滚动样式

html 

<div class="intro-box" style="background-image: url(图片地址);">
	<h2>标题</h2>
	<p>内容</p>
	<a href="" class="btn-info">VIEW ALL</a>
</div>

css

.intro-box{background-size: cover;background-attachment: fixed;background-color: #1A1A1A;text-align: center;color: #fff;padding: 60px 20px 60px 20px;background-position: center;background-repeat: no-repeat;}
.intro-box h2 {font-size: 30px;font-weight: 300;}
.intro-box p {line-height: 26px;margin-top: 20px;}
.btn-info {margin-top: 20px;color: #fff;background: transparent;border-radius: 0px;border: 3px solid #fff;transition: background 0.4s;padding: 7px 36px;display: inline-block;}
.btn-info:hover{color: #000000;background-color: #fff;}

二：双层长短不一的下划线

html

<div class="mg-b-s pos-r">
	<p class="size-20 txt-p on2">CATEGORIES</p>
</div>

css

.pos-r{position: relative;}
.mg-b-s{margin-bottom: 10px;}
.txt-p::after{content: '';position: absolute;left: 0;top: auto;bottom: 0;right: 0;height: 1px;width: 100px;background-color: #2C2B2B;}
.txt-p{border-bottom: 1px solid #cbcaca;padding-bottom: 10px;}

图示： 

三：li的前面加一个背景小图标

.nav-left li{position: relative;border-bottom: 1px solid #f2f2f2;background: url(images/left_sli.gif) 6px 15px no-repeat;padding: 8px 0px 8px 18px;font-size: 0.875rem;}