div按鈕CSS

cbjcry發表於2015-02-12
CSS

整體效果：


 

HTML：

<div class="sav">
	<span class="left"><div class="btn3"><a href="javascript:void(0)" onclick="thxFriend()">感謝好友</a></div></span>
	<span class="right"><div class="btn"><a href="/activity/2015love/toAddLove.html">表白好友</a></div></span>				
</div>
<div class="sav">
	<div class="btn_tnk"><a href="/activity/2015love/thxList.html">檢視接受感謝好友</a></div>
</div>

 

分析： 

一、

 

sav區域為圖中深色部分，中間淺色部分為其內兩個span間距，黃色陰影為外邊距

外層DIV設定width：90%，然後再設定margin-left:5%，即可使其居中

 

二、span



 

外層 DIV sav寬度為90%，裡面兩個span若都為50%，則其中就沒有間距，所以設定每個span為48%，其中左span向左浮動，右span向右浮動

 

三、DIV模擬按鈕


外層同樣是樣式為sav的DIV（黑色陰影部分）。 



 

 

1、按鈕都使用DIV模擬

外層一個DIV定位，內層用DIV模擬按鈕，如圖中下方按鈕樣式為 btn_tnk，上方按鈕樣式為btn和btn3

 

2、div設定height/line-height:

height是DIV的高度

line-height是行高

line-height等於height時，可使DIV中字垂直居中

 

 

整體CSS：

<div class="sav">
	<span class="left"><div class="btn3"><a href="javascript:void(0)" onclick="thxFriend()">感謝好友</a></div></span>
	<span class="right"><div class="btn"><a href="/activity/2015love/toAddLove.html">表白好友</a></div></span>				
</div>
<div class="sav">
	<div class="btn_tnk"><a href="/activity/2015love/thxList.html">檢視接受感謝好友</a></div>
</div>

總結：
.sav { width: 90%; margin-left: 5%; margin-top: 10px; float: left;}
.sav span.left { width: 48%; float:left;}
.sav span.right { width: 48%; float:right;}

.btn { 
	width: 100%;
	height: 36px;
	line-height: 36px;
	text-align: center;
	background: #fe8855;
	color:#fff;
	font-size: 18px;
	/*border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;*/
	}
.btn a:link, .btn a:visited { color:#fff; text-decoration: none; height: 36px; display: block;}

.btn3 { 
	width: 100%;
	height: 36px;
	line-height: 36px;
	text-align: center;
	background: #7de1bb;
	color:#fff;
	font-size: 18px;
	/*border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;*/
	}
.btn3 a:link, .btn3 a:visited { color:#fff; text-decoration: none; height: 36px; display: block;}

.btn_tnk { 
	width: 100%;
	height: 36px;
	line-height: 36px;
	text-align: center;
	background: #3bca94;
	color:#fff;
	font-size: 18px;
	/*border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;*/
	}
.btn_tnk a:link, .btn_tnk a:visited { color:#fff; text-decoration: none; height: 36px; display: block;}

 。。。

 

相關文章