整体效果:
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;}
。。。
相关推荐
6. `form.html`:此文件可能包含HTML表单,展示如何用<div>和CSS来设计和格式化表单元素,如输入框、按钮、复选框等,以增强用户体验。 7. `images`:这是一个目录,通常包含用于网页设计的图像资源,如背景图片、...
本资源包“漂亮样式CSS”包含了几个精心设计的`DIV+CSS`样式示例,特别是3D按钮和层模拟窗口移动的效果,这些都是现代网页设计中非常流行和实用的元素。 首先,3D按钮是提升网页界面视觉吸引力的重要元素。在CSS3的...
在网页设计中,"div+css弹出层带关闭按钮"是一种常见的交互设计技术,用于创建弹出式对话框或提示窗口。这种技术利用HTML结构和CSS样式来实现,同时结合JavaScript来添加动态功能,如点击关闭按钮时关闭弹出层。下面...
在网页设计领域,`DIV+CSS`是一种广泛使用的布局技术,它通过定义不同的`Div`(Division,分块)元素并应用相应的`CSS`(Cascading Style Sheets,层叠样式表)样式来构建页面结构和外观。标题提到的“DIV+CSS简单...
在网页设计中,纯div+css实现的图片轮播是一种常见的动态效果,它能为网站增添生动性,吸引用户注意力。下面将详细讲解这个主题,包括如何使用div和css创建图片切换、电子相册以及轮播图片的效果。 一、图片切换 ...
本篇文章将详细探讨如何利用Div+CSS技术实现完美的层拖拽特效,这种特效常用于创建弹出层或可拖动的对话框,提升用户体验。 首先,要实现Div的拖拽功能,我们需要创建一个可拖动的Div元素,并为其添加CSS样式,使其...
【div+css页面布局】是Web开发中的基础技术,用于构建网页的结构和样式。新手通过这门教材可以在两天内掌握基本的div+css布局技巧。以下是对标题和描述中涉及知识点的详细说明: 1. **规划网站**:在开始布局前,...
本主题将深入探讨“div CSS3动画带有的按钮”这一概念,以及如何利用CSS3样式表属性创建动态、吸引人的按钮。 首先,让我们了解一下“div”元素。在HTML中,div是一个通用的容器标签,用于组织和布局页面内容。通过...
《基于Div+CSS的后台登录模板详解》 在网页设计领域,Div+CSS技术的应用已经十分广泛,尤其在构建后台管理界面时,这种技术能够帮助我们实现清晰的结构、良好的可维护性和高效的页面表现。本篇文章将围绕"div+css...
在网页设计中,`div` 和 `CSS` 是构建页面布局和样式的重要工具。`div` 元素是HTML中的一个块级元素,通常用来组织和分隔页面内容,而CSS(Cascading Style Sheets)则负责定义这些元素的外观和布局。本教程将深入...
4. **CSS控件**:简单的控件可能涉及按钮、表单、导航栏等常见UI元素的CSS实现。学习者将了解到如何使用CSS自定义这些元素的样式,以达到所需的设计效果。 5. **实践项目**:压缩包内的“div_css”可能是实际的代码...
《DIV+CSS技术在绿色音乐模板中的应用解析》 在当今的网页设计领域,DIV+CSS已经成为构建网页布局的标准方式,其灵活性和可维护性深受设计师们的喜爱。本篇文章将围绕"DIV+CSS绿色音乐模板"这一主题,深入探讨如何...
这些可以通过额外的`<div>`和CSS伪类来实现,例如:`:hover`和`:active`状态可以改变按钮的视觉反馈,响应用户的点击操作。 考虑到搜索引擎优化(SEO),使用div+css的幻灯片避免了Flash带来的障碍,因为搜索引擎...
【标题】:“一款div+css做的网站” 这款网站的构建采用了经典的前端布局技术——div+css,这是一种在网页设计中广泛使用的方法,旨在实现结构与表现的分离,提高页面的可维护性和可扩展性。Div(Division)是HTML...
- **产品展示**:通过CSS实现网格布局展示水果图片,鼠标悬停时显示详细信息和添加到购物车按钮。 - **购物车**:使用CSS和JavaScript实现动态购物车,显示已选择的水果数量和总价。 - **表单**:设计用户登录和注册...
**div+css菜单生成器详解** 在网页设计中,菜单是不可或缺的一部分,它为用户提供直观的导航体验。传统的菜单制作通常需要手动编写HTML和CSS代码,对于非专业开发者来说,这个过程可能较为复杂。"div+css菜单生成器...
"div+css博客"是一个基于HTML的网页设计项目,它主要利用了`div`元素和CSS(层叠样式表)来构建一个包含照片展示、论坛功能以及多个小栏目的在线平台。这种技术栈的选择旨在实现网页布局的灵活性和可维护性,同时也...
例如,使用CSS为Div添加动画效果,配合JavaScript进行事件监听和处理,可以实现鼠标悬停时元素的变化、点击按钮后的反馈等。此外,还可以利用JavaScript操作DOM(文档对象模型),动态改变网页内容,实现更高级的...
标题中的“23div+css.rar_DIV_css_css div_div+css_分页”指的是一个关于网页设计的资源包,特别关注使用HTML的`<div>`元素和CSS来实现23种不同的分页导航样式。这个资源包可能包含了示例代码、图片和其他相关文档,...
在这个"ASP.NET源码——网页选项卡(div+CSS).zip"压缩包中,我们主要关注的是如何在ASP.NET中实现基于div和CSS的网页选项卡功能。 选项卡是网页设计中常用的一种交互元素,它帮助用户在有限的空间内组织和展示多个...