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 像素 |
2016/04/13 ①html 中各种分割线------------------------------------------ ② 控制文字显示的更多相关文章
- CSS控制文字显示一行，超出显示省略号
这几天在项目需求里面遇到了很多之前没做过的需求,也慢慢更加认识到了css的强大,是真的强大.以后会把自己技术调研的东西都写出来,哪怕只是一点点或者很小的点,重在学习. “CSS控制文字显示一行,超出显 ...
- “耐撕”2016.04.13站立会议
1. 时间 : 19:40--20:00 共计20分钟 2. 人员 : Z 郑蕊 * 组长 (博客:http://www.cnblogs.com/zhengrui0452/), P 濮成林(博客 ...
- 2016.04.13,英语,《Vocabulary Builder》Unit 13
cord, from the Latin word for 'heart'. concord, ['kɑːŋkɔːrd] n. 和睦, 公约 con-,'with'. discord, ['dɪskɔ ...
- 2016/10/13 oracle中的round()
语法: ROUND(number,num_digits) 其中Number是需要进行四舍五入的数字:Num_digits为指定的位数,按此位数进行四舍五入,如果 num_digits 大于 0,则四舍 ...
- 在JSP中使用formatNumber控制要显示的小数位数
先引入标签库 <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> 比 ...
- 使用css控制文字显示几行并且剩余部分隐藏（移动端和PC端同样适用）
前言 有些需求需要我们控制一段文本最多显示几行,就像逛淘宝京东的评价楼层一样,有时可能还需要隐藏剩余部分,这样的需求我们怎么来解决呢? 解决办法 我们完全可以使用css来解决这一需求 1. 解决文本显 ...
- css控制文字显示长度，超过用省略号替代
.line_text { width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } <span cl ...
- css 控制文字显示两行,多余用省略号 手机端
p { width:100px; position:relative; line-height:20px; /*行高为高度的一半,这样就是两行*/ height:40px; overflow:hidd ...
- H3C汇聚层交换机认证在线人数展示系统之CheckList和燃尽图（16/04/06-16/04/13）
一.CheckList(核查表) 序号 事件 计划完成时间 实际完成时间 未延迟 未完成 完成 1 登录口令加密以及解密 16/04/06 16/04/06 Y 2 表的创建和IP以及口令 ...
随机推荐
- openwrt vsftp
vsftp: very security ftp openwrt配置:make menuconfig ==> network ==> file transfer ==> vsftp ...
- tornado框架基础01-路由简介
tornado 小而精 Django 大而全 Web框架 Tornado是一个由Python开发的Web框架 Web服务 利用Tornado,可以快速搭建和一个高性能的Web服务 非阻塞 Tornad ...
- 【HIHOCODER 1325】 平衡树·Treap
描述 小Ho:小Hi,我发现我们以前讲过的两个数据结构特别相似. 小Hi:你说的是哪两个啊? 小Ho:就是二叉排序树和堆啊,你看这两种数据结构都是构造了一个二叉树,一个节点有一个父亲和两个儿子. 如果 ...
- hdu 6201 transaction （最短路变形——带负权最长路）
题意: 给定n个城市的货物买卖价格, 然后给定n-1条道路,每条路有不同的路费, 求出从某两个城市买卖一次的最大利润. 利润 = 卖价 - (买价 + 路费) 样例数据, 最近是从第一个点买入, 第4 ...
- POJ 1006-Biorhythms,中国剩余定理，学信安的路过！
Biorhythms 我竟然1A了, 终于从一天的浑噩中找回点自信了.人生第一次做中国剩余定理的题 ...
- linux centos7 swap 设置 添加 删除
操作 需要 root 用户 权限 dd 命令 创建swap用的分区文件 /var/swap dd if=/dev/zero of=/var/swap bs=1024 count=2048000 ...
- 【Dijstra堆优化】HDU 3986 Harry Potter and the Final Battle
http://acm.hdu.edu.cn/showproblem.php?pid=3986 [题意] 给定一个有重边的无向图,T=20,n<=1000,m<=5000 删去一条边,使得1 ...
- java Web项目Service层通用接口和entityVo对象与entity对象转化问题的解决方案
Service层的接口中有一些比较常用方法,一次又一次的在新的Service层中被书写,所以懒惰的程序员又烦了,他们决定写个通用接口来解决这个问题. 有些项目中,实体类即承担接收表单数据的任务,又承担 ...
- 【ZJOI2017 Round1练习】D2T1 river（二分图）
题意: 思路:这道题并没有官方题解 没有羊驼在所有三元组中出现就是NO 现在考虑不少于1只的情况 删去其中一只,我们得到了两组点和一些边 我们只要判断这是否为一张二分图,使用暴力染色的方法就有60分了 ...
- 混合APP开发框架资料汇总
Ionic(ionicframework)一款接近原生的Html5移动App开发框架 会html css js就可以开发app,Ionic基于angualrjs框架是一个专注于开发移动wap以及app ...