div按钮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;}

 。。。