Horizontal lines are very useful separating your page to different sections, to add a simple horizontal line just type <hr>, and you will get this:
水平线对于分割页面的不同部分来说非常有用，你只需要通过输入<hr>就可以添加一条简单的水平线，具体如下：

But you can also create customized lines to fit with your webpage and to give you better mastery of the space you are manipulating on your page.
同时，你也可以根据网站的实际需要自定义水平线样式，这样一来，就可以更好地做好页面的空间规划。

Examples:
案例

<hr color="#c7c34c" size="2" width="50%">

gives this :
效果如下：

• Color: color of the line : <hr color="#xxxxxx">
  颜色：水平线颜色<hr color=”#xxxxxx”>
  
  
• Size: Height of Line expressed in pixels : <hr size="x">
  尺寸：水平线的高度以像素为单位计算：<hr size=”x”>
  
  
• Width: Width of the line expresed either in percentage (%) or in pixels (in my example it is 50% of the original size) : <hr width="x%"> or <hr width="x">
  宽度：水平线的宽度以百分比或像素为单位（本例中设定为原始尺寸的50%）。具体格式： <hr width="x%"> 或 <hr width="x">
  
  

More Advanced:
更深入一点：
This :
如下：

<hr width="400" style="border: 3px dotted #0099CC" color="#000000" size="4">

gives:
得到下面这条水平线：



In this case we used style :
本案例中我们所使用到的样式：

• Border width is 3pixels (3 px)
  边框宽度：3像素
  
• It is dotted
  点阵线
  
• Base color is black : #000000
  基准色：黑色（#000000）
  
• Dots colored in blue: #0099CC
  点阵线颜色：蓝色（#0099CC）
  

A last example to explain more, if still needed ;) :
最后一个案例:
This
代码

<hr width="400" style="border: 2px dashed #C0C0C0" color="#FFFFFF" size="6">

gives:
结果



In this case just above :
上述案例解释:

• Border width is 2pixels (2 px)
  边框宽度：2像素
  
• It is dashed
  虚线
  
• Base color is white : #FFFFFF
  基准色：黑色（#000000）
  
• Dashes colored in silver: #C0C0C0
  虚线颜色：银色（#0099CC）
  

Possible styles are:
所有可以使用的样式如下:

• dotted
  点阵线
  
• dashed
  虚线
  
• solid
  实线
  
• double
  双实线
  
• groove
  槽状线
  
• outset
  外凸线
  
• inset
  内嵌线
  
• ridge
  背脊线
  

That's all I have to say about the horizontal lines !!
上述是关于水平线样式叙述的全部内容!

评论 (0) All

登陆 | 还没注册？