div旋钮CSS
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;}
。。。