繁體中文当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 制作虚线效果的水平线
- HTML/XHTML教程
- Web浏览器模式的选择机制
- XHTML+CSS建站如何调用样式表
- HTML5和CSS3新的WEB标准和浏览器支持
- HTML代码:网页头部代码全清楚
- 网页制作:HTML代码编写的30条技巧
- HTML教程:link标记的rel属性
- 网页设计参考:firefox的默认样式
- 网页设计初学者必看的30个网页制作秘笈
- 网页制作推荐使用的XHTML标记
- 网页HTML代码讲解:有序列表和无序列表
- IE8开发人员工具的菜单讲解
- 提高用户体验与新窗口打开网页的关系
- 解决IE支持HTML5的问题
- 了解如何减少 reflow 次数
- 平面设计理论:创造视觉冲击力作品
- 网页HTML 有序列表ol 和无序列表 ul
- HTML Frameset 例子代码
- 让输入框关闭自动完成（AutoComplete）功能
- IE支持HTML5的解决方法
- 基础 HTML之目录问题(相对路径和绝对路径区别)
HTML/XHTML教程 中的 制作虚线效果的水平线
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-11-04 浏览: 98 ::
收藏到网摘: n/a
在网页中，一般要实现虚线效果。制作方法很多，在我们网站中，也介绍使用Fireworks制作虚线的效果。如果我们改用水平线制作虚线效果呢？制作方法就是使用CSS定义：
在<head>中预先定义好CSS：
<STYLE type=text/css>
.dotline {
BORDER-BOTTOM-STYLE: dotted; BORDER-LEFT-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted
}
</STYLE>
然后修改水平线的代码为：<hr class=dotline color=#000000 size=1>。按F12看看吧，效果是不是很不错！
或者不预定义好CSS样式，直接在<hr>中加入代码：
<hr style="BORDER-BOTTOM-STYLE: dotted; BORDER-LEFT-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted" color=#000000 size=1>
更为简单的方法（借鉴于经典论坛上的介绍）：<hr style="border:1px dashed red; height:1px">
评论 (0) All
