2016/04/13 ①html 中各种分割线------------------------------------------ ② 控制文字显示

①各种分割线Html代码

1、<HR>


2、<HR align=center width=300 color=#987cb9 SIZE=1>
align 线条位置(可选left、right、center);width 线条长度;color 颜色;size 厚度


二、特效(效果并不是孤立的,可相互组合)
1、两头渐变透明:
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3>


2、纺锤形:
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=2)" width="80%" color=#987cb9 SIZE=10>


3、右边渐变透明:
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=1)" width="80%" color=#987cb9 SIZE=3>


4、左边渐变透明:
<HR style="FILTER: alpha(opacity=0,finishopacity=100,style=1)" width="80%" color=#987cb9 SIZE=3>


5、虚线:
<HR style="border:1 dashed #987cb9" width="80%" color=#987cb9 SIZE=1>


6、双线:
<HR style="border:3 double #987cb9" width="80%" color=#987cb9 SIZE=3>


7、立体效果:
<HR style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)" width="80%" color=#987cb9 SIZE=1>


8、钢针效果:
<HR style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#987cb9,strength=10)" width="80%" color=#987cb9 SIZE=1>


9.垂直分割线

<table border="1px" cellpadding="0" cellspacing="0" style="height:265px;border-left-style:solid; border-bottom-style:none;border-right-style:none;border-top-style:none">

 

 

②控制文字显示:

$str=trim($design_str); // 取得字串同时去掉头尾空格和空回车
 //$str=str_replace("<br>","",$str); // 去掉<br>标签
 $str="<p>".trim($str); // 在文本头加入<p>
 $str=str_replace("
","</p>
<p>",$str); // 用p标签取代换行符
 $str.="</p>
"; // 文本尾加入</p>
 $str=str_replace("<p></p>","",$str); // 去除空段落
 $str=str_replace("
","",$str); // 去掉空行并连成一行
 $str=str_replace("</p>","</p>
",$str); //整理html代码

HTML4/HTML5 用 CSS 修改 <hr> 线条样式
#
线型
EN 名称
HTML4
HTML5
说明
备注
01 实线 solid hr{border:0;border-top:1px solid #eee} hr{border:0;border-top:1px solid #eee} 1 像素实线顶边框,颜色#eee  
02 虚线 dashed hr{border:0;border-top:1px dashed #eee} hr{border:0;border-top:1px dashed #eee} 1 像素虚线顶边框,颜色#eee  
03 点线 dotted hr{border:0;border-top:1px dotted #eee} hr{border:0;border-top:1px dotted #eee} 1 像素点线顶边框,颜色#eee  
04 双实线 double hr{border:0;border-top:1px double #eee} hr{border:0;border-top:1px double #eee} 1 像素单实线顶边框,颜色#eee 1 像素两实线完全重合
hr{border:0;border-top:2px double #eee} hr{border:0;border-top:2px double #eee} 2 像素单实线顶边框,颜色#eee 1 像素两实线并排
hr{border:0;border-top:3px double #eee} hr{border:0;border-top:3px double #eee} 1 像素双实线顶边框,颜色#eee 1 像素两实线并排,间隔 1 像素
hr{border:0;border-top:4px double #eee} hr{border:0;border-top:4px double #eee} 1 像素双实线顶边框,颜色#eee 1 像素两实线并排,间隔 2 像素
hr{border:0;border-top:5px double #eee} hr{border:0;border-top:5px double #eee} 2 像素双实线顶边框,颜色#eee 2 像素两实线并排,间隔 1 像素
hr{border:0;border-top:6px double #eee} hr{border:0;border-top:6px double #eee} 2 像素双实线顶边框,颜色#eee 2 像素两实线并排,间隔 2 像素

HTML 是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。HTML 文件是由 HTML 语言命令组成的描述性文本,HTML 命令可说明文字、图形、动画、声音、表格、链接等。HTML 文件的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。

一个网页可对应多个 HTML 文件,HTML 文件以 .htm 或 .html 为扩展名。可使用任何能生成 TXT 类型源文件的文本编辑器产生 HTML 文件,只要修改文件后缀即可。开始标记 <html> 表示文件开头,结尾标记 </html> 表示文件结束。

HTML4/HTML5 用 style 属性修改 <hr> 线条样式
#
线型
EN 名称
HTML4
HTML5
说明
备注
01 实线 solid <hr style="border:0; border-top:1px solid #222;"> <hr style="border:0; border-top:1px solid #222;"> 1 像素实线顶边框,颜色#222  
02 虚线 dashed <hr style="border:0; border-top:1px dashed #222;"> <hr style="border:0; border-top:1px dashed #222;"> 1 像素虚线顶边框,颜色#222  
03 点线 dotted <hr style="border:0; border-top:1px dotted #222;"> <hr style="border:0; border-top:1px dotted #222;"> 1 像素点线顶边框,颜色#222  
04 双实线 double <hr style="border:0; border-top:1px double #222;"> <hr style="border:0; border-top:1px double #222;"> 1 像素单实线顶边框,颜色#222 1 像素两实线完全重合
<hr style="border:0; border-top:2px double #222;"> <hr style="border:0; border-top:2px double #222;"> 2 像素单实线顶边框,颜色#222 1 像素两实线并排
<hr style="border:0; border-top:3px double #222;"> <hr style="border:0; border-top:3px double #222;"> 1 像素双实线顶边框,颜色#222 1 像素两实线并排,间隔 1 像素
<hr style="border:0; border-top:4px double #222;"> <hr style="border:0; border-top:4px double #222;"> 1 像素双实线顶边框,颜色#222 1 像素两实线并排,间隔 2 像素
<hr style="border:0; border-top:5px double #222;"> <hr style="border:0; border-top:5px double #222;"> 2 像素双实线顶边框,颜色#222 2 像素两实线并排,间隔 1 像素
<hr style="border:0; border-top:6px double #222;"> <hr style="border:0; border-top:6px double #222;"> 2 像素双实线顶边框,颜色#222 2 像素两实线并排,间隔 2 像素
原文地址:https://www.cnblogs.com/haodayikeshu/p/5388869.html