整体效果:
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;}
。。。
相关推荐
整理div+css弹出层,带关闭按钮供大家参考
DIV+CSS简单登录界面模板,DIV+CSS布局,有用户名、密码登录框,登录按钮。
几款不错的DIV+CSS样式 里面有3D按钮 层模拟窗口移动
div CSS3动画带有的按钮_css3样式表属性动画按钮
DIV+CSS制作的CSS的下拉菜单,用着方便,简单易用
div css移动鼠标改变样式弹出div层
50个按钮样式css+div 非常值得学习,也可用来放到你的项目中
原来的网站是TABLE搭建的,现在选择网页,轻松按下按钮,一个全新的DIV+CSS网页重新构建完成了。 Table2CSS是一款可以将表格布局网页完美转换成DIV+CSS方式的软件。支持外部CSS,支持网页及目录 批量转换。 这个...
div CSS样式表实现中英文双语切换导航条 div CSS样式表实现中英文双语切换导航条 div CSS样式表实现中英文双语切换导航条 div CSS样式表实现中英文双语切换导航条
圆滑按钮的CSS+DIV导航菜单 网页设计推荐使用
JS+CSS实现带关闭按钮的DIV弹出窗口
所用语言有:Div+Css , Sql 2000 , C# , ASP.net 1.使用是类库,这样一来使得本系统相对来说安全一点; 2.用户注册使用了非中文用户名注册的验证,这样就避免了编码错误等让用户感到无助的后果; 3.弹出对话框...
纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存
DIV CSS简单登录界面模板,DIV CSS布局,有用户名、密码登录框,登录按钮。
使用css实现多种特效 全部效果: 1.默认三种主题:确认、取消、警告,适用于以下所有特效 2.流光效果:流光背景、流光边框 3.边框效果:双旋转边框、单旋转边框、呼吸效果边框 4.滑动效果:反光滑动、箭头滑动、中央...
大学生美食网页——日料寿司网页设计采用DIV CSS布局制作,使用jquery制作了图片轮播特效。共6个页面,包括首页、寿司介绍、餐厅推荐、食谱介绍、注册页面、登录页面。顶部导航使用CSS制作了鼠标经过效果,首页寿司...
精通CSS+DIV网页样式与布局 视频教材主要内容 迅雷下载地址: 目录 第1部分 CSS基础知识篇 第1章 CSS的初步体验 1.1 CSS的概念 1.1.1 标记的概念 1.1.2 传统HTML的缺点 1.1.3 CSS的引入 1.1.4...
Jquery模板蓝色模板html一套若干页,相当漂亮,对象比较全(进度条,按钮,标签等)基本上html中用到的对象都有了.(支持html5的浏览器可以正常访问)
div+css3实现的多款漂亮且具有创意的按钮动态特效源码.zip
网站中有多个单选按钮,想让其均匀分布,这样会比较好看一点,网上的方法,大都不实用,下面是经测试比较成功的方法,大家可以看看