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以及口令 ...
随机推荐
- svn上传项目
1.桌面右键单击 2.进行项目导入 3.选择项目所在目录 4.
- fstream，sstream的学习记录
fstream: #include<iostream> #include<fstream> using namespace std; int main(){ ofstream ...
- js作用域的几个问题
按照<权威指南>的说法,全局的变量作用域是全局性的,在js代码中,他处处都有定义.而在函数之内声明的变量,就只有在函数体内有定义了.函数的参数也是局部变量,他们只在函数体内部有定义.在函数 ...
- 洛谷P1759 通天之潜水
题目背景 直达通天路·小A历险记第三篇 题目描述 在猴王的帮助下,小A终于走出了这篇荒山,却发现一条波涛汹涌的河拦在了自己的面前.河面上并没有船,但好在小A有n个潜水工具.由于他还要背重重的背包,所以 ...
- [Vijos] 河蟹王国
描述 河蟹王国有一位河蟹国王,他的名字叫羊驼.河蟹王国富饶安定,人们和谐相处.有一天,羊驼国王心血来潮,想在一部分人中挑出最和谐的人.于是,羊驼国王将他的子民排成了一列(==!!b汗~好长呀).每个人 ...
- 《effective C++》：条款37——绝不重新定义继承而来的缺省参数值
引子: 阿里的一道题: #include <IOSTREAM> using namespace std; class A{ public: ) { cout<<"a~ ...
- Codeforces 513G1 513G2 Inversions problem [概率dp]
转自九野:http://blog.csdn.net/qq574857122/article/details/43643135 题目链接:点击打开链接 题意: 给定n ,k 下面n个数表示有一个n的排列 ...
- Linux 端口开放
Linux(CentOS): 系统缺省值为32768-61000. 修改方法: 在/etc/sysctl.conf中,增加以下配置:(开放20000-50000为完成端口) net.ipv4.ip_l ...
- POJ 1780 【手工递归】【欧拉回路】
题意: 1.提供密码的位数. 2.密码的输入可以一直保持,取后n位作为密码.如果密码正确则开锁. 3.设计一种方法使得在输入最少的情况下破译.(即保证每个密码只输入一次) 4.输出输入的数字的序列. ...
- leetcode笔记：Longest Substring Without Repeating Characters
一. 题目描写叙述 Given a string, find the length of the longest substring without repeating characters. For ...