DIV教程之CSS：自定多姿多彩的网页链接下划线
DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码CSS是CascadingstyleSheets的简称，中文译作“层叠样式表单”。CSS自己没有间接供应变更HTML链接下划线的功效，但只需使用一些技能，我们仍是可让单调的网页链接下划线变得丰厚多彩。
<p/> 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;
}
<p/> 假如要让自界说下划线只在鼠标停止时呈现，只需把本来间接设置在链接元素上的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>
<p>实例：</p>
<p><ahref="#"id="example1a">波纹线静态下划线</a>，
<ahref="#"id="example1b">鼠标停止时呈现的波纹线</a>。</p>
<p><ahref="#"id="example2a">花朵静态下划线</a>，
<ahref="#"id="example2b">鼠标停止时呈现的花朵下划线</a>。</p>
</body>
</html>
如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。 时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上 是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。 每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。 在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。 在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。 还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。 您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。 Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
页:
[1]