簡單的vip會員特權(quán)頁面布局代碼

使用方法：

1、head引入css文件

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

2、body引入HTML代碼

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

</div>