html中
的几种不同的语句及效果
HTML中基本的水平线<未完待续……>
1. HTML方法
<hr align="left" width="600px" color="#FF0000" size="15" />
2. CSS方法
<hr style="text-align:left;width:600px;background-color:#CC66CC;height:15px" />
HTML中水平分割线的九种特效
1. 右边渐变透明
<hr style="filter:alpha(opacity=100,finishopacity=0,style=1)" width="90%" color="#FF0000" size="5" />
或
<hr style="filter:alpha(opacity=100,finishopacity=0,style=1);width:600px;background-color:#FF0000;height:5px" />
本例使用了CSS的alpha滤镜。
2. 左边渐变透明
<hr style="filter:alpha(opacity=0,finishopacity=100,style=1)" width="90%" color="#FF0000" size="5" />
或
<hr style="filter:alpha(opacity=0,finishopacity=100,style=1);width:600px;background-color:#FF0000;height:5px" />
3. 纺锤形
<hr style="filter:alpha(opacity=100,finishopacity=0,style=2)" width="90%" color="#FF0000" size="20" />
或
<hr style="filter:alpha(opacity=100,finishopacity=0,style=2);width:600px;background-color:#FF0000;height:20px" />
4. 两头渐变透明
<hr style="filter:alpha(opacity=100,finishopacity=0,style=3)" width="90%" color="#FF0000" size="10" />
或
<hr style="filter:alpha(opacity=100,finishopacity=0,style=3);width:600px;background-color:#FF0000;height:10px" />
5. 虚线
<hr style="border:1px dashed #F00" width="90%" size="1" />
或
<hr style="border:1px dashed #F00;width:600px;height:1px" />
本例使用了CSS的border属性。
6. 双线
<hr style="border:3px double #F00" width="90%" size="3" />
或
<hr style="border:3px double #F00;width:600px;height:3px" />
7. 立体效果
<hr style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#FF0000,direction:145,strength:15)" color="#FF0000" width="90%" size="1" />
或
<hr style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#FF0000,direction:145,strength:15);width:580px;background-color:#FF0000;height:1px" />
本例使用了CSS的Shadow滤镜。
8. 钢针效果
<hr style="filter:progid:DXImageTransform.Microsoft.Glow(color=#FF0000,strength=10)" width="90%" color="#FF0000" size="1" />
或
<hr style="filter:progid:DXImageTransform.Microsoft.Glow(color=#FF0000,strength=10);width:580px;background-color:#FF0000;height:1px" />
本例使用了CSS的Glow滤镜。
9. 垂直分割线
<table border="0" cellpadding="0" cellspacing="0" width="1">
<tr><td height="100">
<hr style="border:1px dashed #F00" width="1" size="100" />
</td></tr>
</table>
或
<hr style="border:1px dashed #F00;width:1px;height:100px" />
注意：本例设置的是垂直虚线分割线。设置的<table>宽度（width）应该与<hr>标签设置的宽度一致；设置的<td>高度（height）应该与<hr />的size值一致。
**************************************************************************************************8
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>html中水平分割线的九种特效示例-baike369.com</title> </head> <body> <h1>html中水平分割线的九种特效示例</h1> <h2>基本的水平分割线</h2> <p>1. html方法</p> <hr align="left" width="500px" color="#FF0000" size="15" /> <p>2. CSS方法</p> <hr style="text-align:left;width:500px;background-color:#C6C;height:15px" /> <h2>html中水平分割线的九种特效</h2> <p>1. 右边渐变透明：</p> <hr style="filter:alpha(opacity=100,finishopacity=0,style=1)" width="90%" color="#FF0000" size="5" /> <p>2. 左边渐变透明：</p> <hr style="filter:alpha(opacity=0,finishopacity=100,style=1)" width="90%" color="#FF0000" size="5" /> <p>3. 纺锤形：</p> <hr style="filter:alpha(opacity=100,finishopacity=0,style=2)" width="90%" color="#FF0000" size="20" /> <p>4. 两头渐变透明：</p> <hr style="filter:alpha(opacity=100,finishopacity=0,style=3)" width="90%" color="#FF0000" size="10" /> <p>5. 虚线：</p> <hr style="border:1px dashed #F00" width="90%" size="1" /> <p>6. 双线：</p> <hr style="border:3px double #F00" width="90%" size="3" /> <p>7. 立体效果：</p> <hr style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#FF0000,direction:145,strength:15)" color="#FF0000" width="90%" size="1" /> <p>8. 钢针效果：</p> <hr style="filter:progid:DXImageTransform.Microsoft.Glow(color=#FF0000,strength=10)" width="90%" color="#FF0000" size="1" /> <p>9. 垂直分割线：</p> <table border="0" cellpadding="0" cellspacing="0" width="1"> <tr><td height="100"> <hr style="border:1px dashed #F00" width="1" size="100" /> </td></tr> </table> </body> </html>