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以及口令 ...
随机推荐
- day22 02 面向对象的交互
day22 02 面向对象的交互 一.三种编程方式 1.面向过程编程:核心是过程,流水线式思维 优点:极大降低了写程序的复杂程度,只需要顺着要执行的步骤,堆叠代码即可 缺点:一套流水线或者流程就用来解 ...
- LeetCode（14）Longest Common Prefix
题目 Write a function to find the longest common prefix string amongst an array of strings. 分析 该题目是求一个 ...
- 【HIHOCODER 1509 】 异或排序
描述 给定一个长度为 n 的非负整数序列 a[1..n] 你需要求有多少个非负整数 S 满足以下两个条件: (1).0 ≤ S < 260 (2).对于所有 1 ≤ i < n ,有 (a ...
- 简单的MVC 权限管理
花了3天时间研究了下对于 NHibernate+MVC4+bootstrap+Redis(这个是选配只做了登陆测试)+T4 这些都是第一次使用.用着有些生硬权当鼓励下自己,记录下来有空就继续完善. 思 ...
- MySql查询语句的使用实例
一.设计表 1.设计表 查询语句之前先设计四张表:student.teacher.course.score student:sid(学号).sname(姓名).sage(年龄).ssex(性别) te ...
- Leetcode 299.猜字游戏
猜字游戏 你正在和你的朋友玩 猜数字(Bulls and Cows)游戏:你写下一个数字让你的朋友猜.每次他猜测后,你给他一个提示,告诉他有多少位数字和确切位置都猜对了(称为"Bulls&q ...
- 【优先级队列】Southwestern Europe Regional Contest Canvas Painting
https://vjudge.net/contest/174235#problem/D [题意] 给定n个已知size的帆布,要给这n块帆布涂上不同的颜色,规则是这样的: 每次选择一种颜色C 对于颜色 ...
- 【概率dp】D. Card Collector
https://www.bnuoj.com/v3/contest_show.php?cid=9147#problem/D [题意] 为了集齐n张卡片,必须要买多少袋零食?题目给定每种卡片出现在零食中的 ...
- SSH日志位置
# Redhat or Fedora Core: /var/log/secure # Mandrake, FreeBSD or OpenBSD: /var/log/auth.log # SuSE: / ...
- CodeIgniter框架的缓存原理分解
用缓存的目的:(手册上叙述如下,已经写得很清楚了) Codeigniter 支持缓存技术,以达到最快的速度. 尽管CI已经相当高效了,但是网页中的动态内容.主机的内存CPU 和数据库读取速度等因素直接 ...