仓酷云

标题: 带来一篇CSS制造网页技能:单图片按钮实例 [打印本页]

作者: 飘灵儿 时间: 2015-1-15 23:26
标题: 带来一篇CSS制造网页技能:单图片按钮实例
业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。
网页制造poluoluo文章简介：一样平常我们做按钮基础上都必要两张图片，一张一般形态的图片，一张按下往最终效果片做这类按钮思绪就是，设置链接a的背景为第一张图片，a:hover的背景为第二章图片.
一样平常我们做按钮基础上都必要两张图片，一张一般形态的图片，一张按下往最终效果片
做这类按钮思绪就是，设置链接a的背景为第一张图片，a:hover的背景为第二章图片

代码以下：

HTML代码：
<aid="theLink"></a>

CSS代码：
#theLink{
display:block;/*由于标签a是内链元素，以是使用这句话将内链元素转化成块状元素，前面的width和height才起感化*/
width:120px;
height:41px;
margin:0auto;
background:url(../images/normal.gif)no-repeat;
}
#theLink:hover{background:url(../images/press.gif)no-repeat;}

源代码：两张图片按钮的源代码.rar(5.2KB)
=========================================================

这节课，次要给人人先容第二种思绪，实在也很复杂，起首我们将下面的两个图片兼并成一张图片，以下

其次，将下面的图片设置成按钮的背景
最初，将a:hover的背景向上挪动41个像素就OK了

HTML代码：
<aid="buttonBlock"></a>

CSS代码：
#theLink{
display:block;
width:120px;
height:41px;
margin:0auto;
background:url(../images/buttonBG.gif)no-repeat;
}
#theLink:hover{background:url(../images/buttonBG.gif)no-repeat0-41px;}

大概我讲到这里，你不克不及完整了解，不妨
下载上去源代码，保你一看就分明源代码：单张图片按钮的源代码.rar(4.48KB)
</p>
你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。

作者: 透明 时间: 2015-1-17 22:40
还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

作者: 不帅 时间: 2015-1-25 19:22
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

作者: 只想知道 时间: 2015-2-3 19:56
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

作者: 若相依 时间: 2015-2-9 05:52
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 柔情似水 时间: 2015-2-27 04:34
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

作者: 乐观 时间: 2015-3-8 22:38
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 蒙在股里 时间: 2015-3-23 06:09
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

欢迎光临仓酷云 (http://www.ckuyun.com/)