`
uule
  • 浏览: 6352191 次
  • 性别: Icon_minigender_1
  • 来自: 一片神奇的土地
社区版块
存档分类
最新评论

div按钮CSS

    博客分类:
  • 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;}

 。。。

 

  • 大小: 13.3 KB
  • 大小: 63.3 KB
  • 大小: 53 KB
  • 大小: 55.4 KB
  • 大小: 58.3 KB
分享到:
评论
1 楼 coosummer 2015-09-15  
可以使用在线按钮样式生成器:http://buttoncssgenerator.com 在线生成按钮css,支持各大主流浏览器,款式随心定制,也有丰富的示例可以选择

相关推荐

    经典DIV+CSS模板 经典DIV+CSS模板

    6. `form.html`:此文件可能包含HTML表单,展示如何用&lt;div&gt;和CSS来设计和格式化表单元素,如输入框、按钮、复选框等,以增强用户体验。 7. `images`:这是一个目录,通常包含用于网页设计的图像资源,如背景图片、...

    DIV+CSS漂亮的样式

    本资源包“漂亮样式CSS”包含了几个精心设计的`DIV+CSS`样式示例,特别是3D按钮和层模拟窗口移动的效果,这些都是现代网页设计中非常流行和实用的元素。 首先,3D按钮是提升网页界面视觉吸引力的重要元素。在CSS3的...

    div+css弹出层带关闭按钮

    在网页设计中,"div+css弹出层带关闭按钮"是一种常见的交互设计技术,用于创建弹出式对话框或提示窗口。这种技术利用HTML结构和CSS样式来实现,同时结合JavaScript来添加动态功能,如点击关闭按钮时关闭弹出层。下面...

    DIV+CSS简单登录界面模板

    在网页设计领域,`DIV+CSS`是一种广泛使用的布局技术,它通过定义不同的`Div`(Division,分块)元素并应用相应的`CSS`(Cascading Style Sheets,层叠样式表)样式来构建页面结构和外观。标题提到的“DIV+CSS简单...

    纯div+css轮播图片切换图片

    在网页设计中,纯div+css实现的图片轮播是一种常见的动态效果,它能为网站增添生动性,吸引用户注意力。下面将详细讲解这个主题,包括如何使用div和css创建图片切换、电子相册以及轮播图片的效果。 一、图片切换 ...

    Div+CSS层完美实现拖拽特效

    本篇文章将详细探讨如何利用Div+CSS技术实现完美的层拖拽特效,这种特效常用于创建弹出层或可拖动的对话框,提升用户体验。 首先,要实现Div的拖拽功能,我们需要创建一个可拖动的Div元素,并为其添加CSS样式,使其...

    div+css页面布局,新手入门教材,2天学会div+css

    【div+css页面布局】是Web开发中的基础技术,用于构建网页的结构和样式。新手通过这门教材可以在两天内掌握基本的div+css布局技巧。以下是对标题和描述中涉及知识点的详细说明: 1. **规划网站**:在开始布局前,...

    div CSS3动画带有的按钮_css3样式表属性动画按钮

    本主题将深入探讨“div CSS3动画带有的按钮”这一概念,以及如何利用CSS3样式表属性创建动态、吸引人的按钮。 首先,让我们了解一下“div”元素。在HTML中,div是一个通用的容器标签,用于组织和布局页面内容。通过...

    div+css后台登录模版

    《基于Div+CSS的后台登录模板详解》 在网页设计领域,Div+CSS技术的应用已经十分广泛,尤其在构建后台管理界面时,这种技术能够帮助我们实现清晰的结构、良好的可维护性和高效的页面表现。本篇文章将围绕"div+css...

    基于div与css的登录窗口

    在网页设计中,`div` 和 `CSS` 是构建页面布局和样式的重要工具。`div` 元素是HTML中的一个块级元素,通常用来组织和分隔页面内容,而CSS(Cascading Style Sheets)则负责定义这些元素的外观和布局。本教程将深入...

    div_css.zip

    4. **CSS控件**:简单的控件可能涉及按钮、表单、导航栏等常见UI元素的CSS实现。学习者将了解到如何使用CSS自定义这些元素的样式,以达到所需的设计效果。 5. **实践项目**:压缩包内的“div_css”可能是实际的代码...

    DIV+CSS绿色音乐模板

    《DIV+CSS技术在绿色音乐模板中的应用解析》 在当今的网页设计领域,DIV+CSS已经成为构建网页布局的标准方式,其灵活性和可维护性深受设计师们的喜爱。本篇文章将围绕"DIV+CSS绿色音乐模板"这一主题,深入探讨如何...

    div+css幻灯片效果

    这些可以通过额外的`&lt;div&gt;`和CSS伪类来实现,例如:`:hover`和`:active`状态可以改变按钮的视觉反馈,响应用户的点击操作。 考虑到搜索引擎优化(SEO),使用div+css的幻灯片避免了Flash带来的障碍,因为搜索引擎...

    一款div+css做的网站

    【标题】:“一款div+css做的网站” 这款网站的构建采用了经典的前端布局技术——div+css,这是一种在网页设计中广泛使用的方法,旨在实现结构与表现的分离,提高页面的可维护性和可扩展性。Div(Division)是HTML...

    DIV+CSS案列源代码06

    - **产品展示**:通过CSS实现网格布局展示水果图片,鼠标悬停时显示详细信息和添加到购物车按钮。 - **购物车**:使用CSS和JavaScript实现动态购物车,显示已选择的水果数量和总价。 - **表单**:设计用户登录和注册...

    div+css菜单生成器

    **div+css菜单生成器详解** 在网页设计中,菜单是不可或缺的一部分,它为用户提供直观的导航体验。传统的菜单制作通常需要手动编写HTML和CSS代码,对于非专业开发者来说,这个过程可能较为复杂。"div+css菜单生成器...

    div+css博客

    "div+css博客"是一个基于HTML的网页设计项目,它主要利用了`div`元素和CSS(层叠样式表)来构建一个包含照片展示、论坛功能以及多个小栏目的在线平台。这种技术栈的选择旨在实现网页布局的灵活性和可维护性,同时也...

    Div+Css特效及JavaScript网页特效实例.rar

    例如,使用CSS为Div添加动画效果,配合JavaScript进行事件监听和处理,可以实现鼠标悬停时元素的变化、点击按钮后的反馈等。此外,还可以利用JavaScript操作DOM(文档对象模型),动态改变网页内容,实现更高级的...

    23div+css.rar_DIV_css_css div_div+css_分页

    标题中的“23div+css.rar_DIV_css_css div_div+css_分页”指的是一个关于网页设计的资源包,特别关注使用HTML的`&lt;div&gt;`元素和CSS来实现23种不同的分页导航样式。这个资源包可能包含了示例代码、图片和其他相关文档,...

    ASP.NET源码——网页选项卡(div+CSS).zip

    在这个"ASP.NET源码——网页选项卡(div+CSS).zip"压缩包中,我们主要关注的是如何在ASP.NET中实现基于div和CSS的网页选项卡功能。 选项卡是网页设计中常用的一种交互元素,它帮助用户在有限的空间内组织和展示多个...

Global site tag (gtag.js) - Google Analytics