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以及口令 ...
随机推荐
- db2快速删除大表数据（亲测可用）
一.推荐.删了不可恢复 TRUNCATE TABLE table_name IMMEDIATE 二. DB2 LOAD FROM d:\DB2_BAK\null.del of del REPLACE ...
- js事件默认行为
事件默认行为: 当一个事件发生的时候浏览器自己默认做的事情 怎么阻止? 当前这个行为是什么事件触发的,然后在这个事件的处理函数中使用 return false; 但是return false 阻止的是 ...
- LeetCode01--两数之和
''' 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的 两个 整数. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中同样的元素. 示例: 给 ...
- ASP.NET MVC______VS2012
1,在VS2010中,选中指定的代码段,可以拖拽到工具箱中,形成标签,以后还想书写类似的代码,双击鼠标即可. 2,在VS2012中,可以在注释上标注//TODO:我是注释 这样,注释就会出现在任务列表 ...
- INFO main org.springframework.context.support.AbstractApplicationContext
原因, spring-framework-5.0.2.RELEASE 需要使用 jdk8.
- [HDU3062]Party（2-sat）
传送门 2-sat问题,只需要判断yes或no 所以可以直接连边,缩点,判断同一组的是否在同一个块中. #include <cstdio> #include <stack> # ...
- [NOIP2001] 提高组 洛谷P1025 数的划分
题目描述 将整数n分成k份,且每份不能为空,任意两个方案不相同(不考虑顺序). 例如:n=7,k=3,下面三种分法被认为是相同的. 1,1,5; 1,5,1; 5,1,1; 问有多少种不同的分法. 输 ...
- 牛客网 牛客网暑期ACM多校训练营（第三场）E KMP
链接:https://www.nowcoder.com/acm/contest/141/E 题目描述 Eddy likes to play with string which is a sequenc ...
- React学习及实例开发（二）——用Ant Design写一个简单页面
本文基于React v16.4.1 初学react,有理解不对的地方,欢迎批评指正^_^ 一.引入Ant Design 1.安装antd yarn add antd 2.引入 react-app-re ...
- Codeforces Round #291 (Div. 2) B. Han Solo and Lazer Gun
因为是x,y均为整数因此对于同一直线的点,其最简分数x/y是相同的(y可以为0,这里不做除法)于是将这些点不断求最简分数用pair在set中去重即可. #include <cmath> # ...