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代码
|
#
|
线型
|
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> 表示文件结束。
|
#
|
线型
|
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 像素 |
