zoukankan      html  css  js  c++  java
  • 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>


    9.垂直分割线

    <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("
    ","</p>
    <p>",$str); // 用p标签取代换行符
     $str.="</p>
    "; // 文本尾加入</p>
     $str=str_replace("<p></p>","",$str); // 去除空段落
     $str=str_replace("
    ","",$str); // 去掉空行并连成一行
     $str=str_replace("</p>","</p>
    ",$str); //整理html代码

    HTML4/HTML5 用 CSS 修改 <hr> 线条样式
    #
    线型
    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> 表示文件结束。

    HTML4/HTML5 用 style 属性修改 <hr> 线条样式
    #
    线型
    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 像素
  • 相关阅读:
    leetcode_24. 两两交换链表中的节点
    Mysql大数据量分页优化
    MySQL 默认排序是什么
    spring注入map,spring注入一个接口的多个实现类在map里
    eureka缓存细节以及生产环境的最佳配置
    MySQL 5.7性能调优
    安装后的十个MySQL性能调整设置(版本:5.1、5.5 和5.6)
    docker部署tomcat应用和MySQL数据库
    MySQL热备工具Xtrabackup
    MySQL数据库的冷备方式
  • 原文地址:https://www.cnblogs.com/haodayikeshu/p/5388869.html
Copyright © 2011-2022 走看看