使用方法：

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會員獨享專有特權</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">
						現價 ￥
						<a style="font-size: 46px;">298</a>
						
					</p>
				</div>
				<div class="buyright-bottom">
					<button class="bindBtns">購買會員</button>
				</div>
				
			</div>
		</div>
		
	</div>
	
	
	<!--vip會員特權圖標列表布局-->
	<div class="wrap right">
		<div class="right title">
			
			<p><img src="img/titleright.png" />  會員特權  <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>測適合專業</p></div>
				<div class="fun-content"><p>根據你的性格和興趣愛好推薦適合專業</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>目前應用最廣泛的應用測試工具</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>包含了各個行業與職業的全部信息內容的資料庫</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>根據專業選職業</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>測試目標大學的錄取風險</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>從這里了解每個省份各批次的錄取最低控制分數線</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>從這里了解自己意向高校歷年錄取分數線</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>看看往年和自己同樣分數的考生都去了哪里</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>根據您的分數為您推薦合適的大學</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>結合海量權威大數據為您量身打造合適志愿</p></div>
			</div>
			
			
		</div>
		
	</div>
	
	

</div>