簡(jiǎn)單的vip會(huì)員特權(quán)頁(yè)面布局代碼

使用方法：

1、head引入css文件

<link href="css/style.css" type="text/css" rel="stylesheet" />

2、body引入HTML代碼

<div class="wrap">
	
	<!--vip會(huì)員卡部分-->
	<div class="wrap banner">
		<div class="title01">
			<p>您還不是VIP會(huì)員，VIP會(huì)員獨(dú)享專有特權(quán)</p>
		</div>
	
		<div class="buyVip">
			<div class="buyLeft">
				<div style="width: 100%;height: 15%;"></div>
				<div class="buyLeft-top">
					<img width="100%" height="100%" src="img/vip.png" />
				</div>
				<div class="bindVip">
					<button class="bindBtn">綁定會(huì)員</button>
				</div>
			</div>
			<div class="buyMiddle"></div>
			<div class="buyright">
				<div class="buyright-top">
					<p>暖春特惠</p>
				</div>
				<div class="buyright-middle">
					<p class="buyright-middle01">原價(jià) <span style="text-decoration: line-through;">￥698</span></p>
					<p class="buyright-middle02">
						現(xiàn)價(jià) ￥
						<a style="font-size: 46px;">298</a>
						
					</p>
				</div>
				<div class="buyright-bottom">
					<button class="bindBtns">購(gòu)買(mǎi)會(huì)員</button>
				</div>
				
			</div>
		</div>
		
	</div>
	
	
	<!--vip會(huì)員特權(quán)圖標(biāo)列表布局-->
	<div class="wrap right">
		<div class="right title">
			
			<p><img src="img/titleright.png" />  會(huì)員特權(quán)  <img src="img/titleleft.png" /></p>
			
		</div>
		<div class="right content">
			<div class="fun">
				<div class="fun-picture"><img width="40%" src="img/testMajor.png" /></div>
				<div class="fun-title"><p>測(cè)適合專業(yè)</p></div>
				<div class="fun-content"><p>根據(jù)你的性格和興趣愛(ài)好推薦適合專業(yè)</p></div>
			</div>
			<div class="fun">
				<div class="fun-picture"><img width="40%" src="img/testMajor.png" /></div>
				<div class="fun-title"><p>職業(yè)傾向測(cè)試</p></div>
				<div class="fun-content"><p>目前應(yīng)用最廣泛的應(yīng)用測(cè)試工具</p></div>
			</div>
			<div class="fun">
				<div class="fun-picture"><img width="40%" src="img/testMajor.png" /></div>
				<div class="fun-title"><p>職業(yè)信息庫(kù)</p></div>
				<div class="fun-content"><p>包含了各個(gè)行業(yè)與職業(yè)的全部信息內(nèi)容的資料庫(kù)</p></div>
			</div>
			<div class="fun">
				<div class="fun-picture"><img width="40%" src="img/testMajor.png" /></div>
				<div class="fun-title"><p>專業(yè)職業(yè)通</p></div>
				<div class="fun-content"><p>根據(jù)專業(yè)選職業(yè)</p></div>
			</div>
			<div class="fun">
				<div class="fun-picture"><img width="40%" src="img/testMajor.png" /></div>
				<div class="fun-title"><p>錄取風(fēng)險(xiǎn)評(píng)估</p></div>
				<div class="fun-content"><p>測(cè)試目標(biāo)大學(xué)的錄取風(fēng)險(xiǎn)</p></div>
			</div>
			<div class="fun">
				<div class="fun-picture"><img width="40%" src="img/testMajor.png" /></div>
				<div class="fun-title"><p>省控分?jǐn)?shù)線</p></div>
				<div class="fun-content"><p>從這里了解每個(gè)省份各批次的錄取最低控制分?jǐn)?shù)線</p></div>
			</div>
			<div class="fun">
				<div class="fun-picture"><img width="40%" src="img/testMajor.png" /></div>
				<div class="fun-title"><p>高校分?jǐn)?shù)線</p></div>
				<div class="fun-content"><p>從這里了解自己意向高校歷年錄取分?jǐn)?shù)線</p></div>
			</div>
			<div class="fun">
				<div class="fun-picture"><img width="40%" src="img/testMajor.png" /></div>
				<div class="fun-title"><p>同分考生去向</p></div>
				<div class="fun-content"><p>看看往年和自己同樣分?jǐn)?shù)的考生都去了哪里</p></div>
			</div>
			<div class="fun">
				<div class="fun-picture"><img width="40%" src="img/testMajor.png" /></div>
				<div class="fun-title"><p>智能選學(xué)校</p></div>
				<div class="fun-content"><p>根據(jù)您的分?jǐn)?shù)為您推薦合適的大學(xué)</p></div>
			</div>
			<div class="fun">
				<div class="fun-picture"><img width="40%" src="img/testMajor.png" /></div>
				<div class="fun-title"><p>志愿定制報(bào)告</p></div>
				<div class="fun-content"><p>結(jié)合海量權(quán)威大數(shù)據(jù)為您量身打造合適志愿</p></div>
			</div>
			
			
		</div>
		
	</div>
	
	

</div>