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>

---

９．垂直分割线

<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("\r\n","</p>\n<p>",$str); // 用p标签取代换行符
 $str.="</p>\n"; // 文本尾加入</p>
 $str=str_replace("<p></p>","",$str); // 去除空段落
 $str=str_replace("\n","",$str); // 去掉空行并连成一行
 $str=str_replace("</p>","</p>\n",$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 像素