1、首先新建html文档,输入html5标准声明,如图所示。
2、然后输入html基本网页结构,如图所示。
3、接着输入hr标签<hr>是水平线,是单边标记,如图所示。
4、hr标签的常用属性,Size:设置水平线的粗细。
5、Width:设置水平线的宽度, Color:设置水平线的颜色,noshade:纯色显示,不带阴影效果。
6、最后运行网页,查看效果,如图所示,就完成了。
背景不随网页滚动,在CSS文件中添加:body{
background-image:url("URL")
background-position:100% 0%
background-repeat :no-repeat
background-attachment:fixed
}
url位置写你的背景图片位置,可以是绝对地址也可以是相对地址。
position是定义位置,可以写具体位置,也可以使用left.right或者center或左右中。
repeat是重复方式,可以不重复,或者垂直重复、水平重复或者全部重复。
background-attachment:fixed是用来固定图片不随鼠标滚动。
水平线的代码:
<hr color="red" size="2">
其中color属性是颜色,可以直接输入颜色的英文单词,也可以使用16位颜色代码,比如#000000.
有些人会使用一个div的边框来作横线,比如:
p { border-bottom:5px solid red}
就是把P标签的下边框定义为5像素高的红色,red表示颜色,同样可以使用16位的代码代替,这种方法适合装饰一个元素,但如果为了加一条横线而建立一个div再去把边框定义颜色,这样是不推荐的。
在HTML中设计水平线的方法如下1
在网页设计过程中,如果随意利用缺省水平线,常常会出现插入的水平线与整个网页颜色不协调的情况。打开水平线属性面板也只有宽、高、对齐以及阴影方面的设置。
2,对水平线颜色的设置,怎么办?
其实,你只要仔细看一下水平线的属性设置面板,就会发现一个“快速标签编辑器”,点击此标签并在后面输入color=颜色。这里的“颜色”可以是任何颜色,一般格式为:<
hr
color=#FF0000>。
3,用这个方法设置后,在Dreamweaver中无法直接看到效果,我们可以点击“F12”键,在浏览器里浏览水平线的颜色变化。
最后,再告诉你个小技巧
诸如“#FF0000”这样的颜色代码对于初级朋友来说不容易分辩,你可以这样做:给网页中的字体加上颜色此颜色是你想给水平线所要加的颜色,然后把颜色代码复制并粘贴到水平线的“快速标签编辑器”即可。