天涯部落

小圈子,大声音!呼朋引伴网聚部落!

创建新部落?

[共享交流]纯代码实现的分割线

楼主:mystery雨 时间:2008-11-15 15:47:27 点击:58411 回复:13
脱水模式给他打赏只看楼主 阅读设置
  提到分割线,大家习惯使用长条形图片,或者用小图片来实现。
  其实简单的“hr”语句同样能够实现多样化的分割效果,试举例如下:

最基本的:


;


进入==》mystery雨的HTML编辑教程
  
楼主mystery雨 时间:2008-11-15 15:49:00
  代码
  <hr width=300 size=1 color=#00ffff align=center noshade>;
  其中 width 规定线条的长度,还可以是百分比;color 是颜色,size 当然就是厚度了。
  align 规定线条位置,left是左、right是右、center居中。
  noshade 是否有立体效果。
  
楼主mystery雨 时间:2008-11-15 15:53:00
  两头渐变透明:
  
  
楼主mystery雨 时间:2008-11-15 15:53:00
  两头渐变透明代码  
    
  <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#00ffff SIZE=3>
楼主mystery雨 时间:2008-11-15 15:54:00
  右边渐变透明:
  
  
楼主mystery雨 时间:2008-11-15 15:55:00
  右边渐变透明代码
    
  <hr width=80% size=3 color=#00ffff style="FILTER: alpha(opacity=100,finishopacity=0,style=1)">
  
  画虚线代码
  
  <hr width=80% size=1 color=#00ffff style="border:1 dashed #00ffff">
楼主mystery雨 时间:2008-11-15 15:56:00
  画虚线效果:
  
  

  
  画双线效果:
  
  

  
  
楼主mystery雨 时间:2008-11-15 15:58:00
  画双线代码
  
  <hr width=80% size=3 color=#00ffff style="border:3 double green">
  
  立体效果代码:
  
  <hr width=80% size=3 color=#00ffff style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15)">
楼主mystery雨 时间:2008-11-15 15:59:00
  立体效果:
  
  

  
  钢针效果:
  
  
楼主mystery雨 时间:2008-11-15 16:01:00
  钢针效果代码:
  
  <hr width=80% size=3 color=#00ffff style="filter:progid:DXImageTransform.Microsoft.Glow(color=#00ffff,strength=10)">
  
  纺棰形代码:
  
  <hr width=80% size=30 color=#00ffff style="filter:alpha(opacity=100,finishopacity=0,style=2)">
楼主mystery雨 时间:2008-11-15 16:02:00
  纺棰形效果:
  
  







  
  
  以上所有效果并不是孤立的,它们可以相互组合,从而产生新的效果。譬如:
  








  这个要看大家的想象力是否丰富了^_^
  
作者 :阳光花蕊 时间:2008-11-15 16:03:00
  学本领来了。
楼主mystery雨 时间:2008-11-15 16:06:00
  最后这个相结合的,它们的代码要连一起,不要换行,否则会拉大它们间的距离,影响美观,起不到组合--分割的效果
  如<HR style="BORDER-RIGHT: #00ffff 3px dashed; BORDER-TOP: #00ffff 3px dashed; FILTER: progid:DXImageTransform.Microsoft.Glow(color=#00ffff,strength=10); BORDER-LEFT: #00ffff 3px dashed; BORDER-BOTTOM: #00ffff 3px dashed" width="80%" color=#00ffff SIZE=3><HR style="BORDER-RIGHT: #00ffff 3px dashed; BORDER-TOP: #00ffff 3px dashed; FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15); BORDER-LEFT: #00ffff 3px dashed; BORDER-BOTTOM: #00ffff 3px dashed" width="80%" color=#00ffff SIZE=3>
  
作者 :阳光花蕊 时间:2009-01-14 21:26:00
  好东西的哦。。

相关推荐

    发表回复

    请遵守天涯社区公约言论规则,不得违反国家法律法规