DIV教程之CSS：自定多姿多彩的网页链接下划线

只看该作者 · 发表于 2015-1-16 00:25:44

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码CSS是CascadingstyleSheets的简称，中文译作“层叠样式表单”。
　　CSS自己没有间接供应变更HTML链接下划线的功效，但只需使用一些技能，我们仍是可让单调的网页链接下划线变得丰厚多彩。
　　1、基础道理
　　起首，自界说HTML链接下划线的第一步是创立一个图形，在程度偏向反复安排这个图形即构成下划线效果。假如要显现出下划线面前的网页背景，可使用通明的.gif图形。

　　其次，假如下划线图形的高度较年夜，则必需得当增添文本的高度，使得一行文本的底部与下一行文本的顶部之间有较年夜的空间，比方p{line-height:1.5;}。

自界说链接下划线示例
　　第三，为显现出自界说的下划线，必需埋没默许的下划线，即a{text-decoration:none;}。

　　第四，为链接元素设置下划线图形，机关出自界说的下划线。假定下划线图形是underline.gif，则设置下划线图形的CSS代码为a{background-image:url(underline.gif);}。

　　第五，我们要让下划线图形在程度偏向重复呈现，但不克不及在垂直偏向反复呈现，不然它将被埋没到文本的面前。请求下划线只在程度偏向反复呈现的代码为：a{background-repeat:repeat-x;}。

　　第六，为包管图形呈现在链接笔墨的下方（不论字体的巨细），用background-position属性将图形放在链接元素的底部。关于箭头之类的下划线图形，大概还要思索图形在程度偏向的对齐偏向。假定要将下划线图形放在右下角，CSS代码为：a{background-position:100%100%;}。

　　第七，为了在链接文本的下方给自界说图形留出空间，必需到场得当的空缺。下划线图形相对链接笔墨的详细地位与笔墨的巨细有关，但一样平常而言，能够先让底部空缺即是下划线图形的高度，需要时再作调剂。比方：a{padding-bottom:4px;}。

　　第八，因为下划线图形放在链接元素的底部，必需包管链接不折行（如同意链接超过多个行，则只要上面一行的链接文本上面会有自界说的下划线）。用CSS的white-space属性能够避免链接笔墨折行，即a{white-space:nowrap;}。

　　综上所述，为链接元素界说CSS款式属性的完全例子如：

　　a{
　　　text-decoration:none;
　　　background:url(underline.gif)repeat-x100%100%;
　　　padding-bottom:4px;
　　　white-space:nowrap;
　　}
　　假如要让自界说下划线只在鼠标停止时呈现，只需把本来间接设置在链接元素上的CSSbackground属性改到:hover，比方：
　　a{
　　　text-decoration:none;
　　　padding-bottom:4px;
　　　white-space:nowrap;
　　}
　　a:hover{
　　　background:url(underline.gif)repeat-x100%100%;
　　}

　　2、实例浏览

　　假定有两个下划线图形diagonal.gif（波纹线）、flower.gif（花朵）前者的高、宽是3、9，后者的高、宽是11、15。上面是一个设置两种下划线的完全实例：

自界说链接下划线举例　　网页源代码以下：
　　注：diagonal.gif　和　flower.gif已先拷贝到网页地点的统一目次下。

　　<html>
　　<head>
　　<title>ex</title>
　　<styletype="text/css">
　　a#example1a{
　　text-decoration:none;
　　background:url(diagonal.gif)repeat-x100%100%;
　　white-space:nowrap;
　　padding-bottom:2px;
　　}
　　a#example1b{
　　text-decoration:none;
　　white-space:nowrap;
　　padding-bottom:2px;
　　}
　　a#example1b:hover{
　　background:url(diagonal.gif)repeat-x100%100%;
　　}
　　a#example2a{
　　text-decoration:none;
　　background:url(flower.gif)repeat-x100%100%;
　　white-space:nowrap;
　　padding-bottom:10px;
　　}
　　a#example2b{
　　text-decoration:none;
　　white-space:nowrap;
　　padding-bottom:10px;
　　}
　　a#example2b:hover{
　　background:url(flower.gif)repeat-x100%100%;
　　}
　　-->
　　</style>
　　</head>
　　<body>
　　实例：
　　<ahref="#"id="example1a">波纹线静态下划线</a>，
　　<ahref="#"id="example1b">鼠标停止时呈现的波纹线</a>。
　　<ahref="#"id="example2a">花朵静态下划线</a>，
　　<ahref="#"id="example2b">鼠标停止时呈现的花朵下划线</a>。

　　</body>
　　</html>

如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。

只看该作者 · 发表于 2015-1-18 06:37:19

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

只看该作者 · 发表于 2015-1-24 14:37:57

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

只看该作者 · 发表于 2015-2-1 17:33:44

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

只看该作者 · 发表于 2015-2-7 13:54:31

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

只看该作者 · 发表于 2015-2-22 16:29:54

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

只看该作者 · 发表于 2015-3-7 02:27:47

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

只看该作者 · 发表于 2015-3-14 10:43:44

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

只看该作者 · 发表于 2015-3-21 05:20:53

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] DIV教程之CSS：自定多姿多彩的网页链接下划线

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子