最近开始研究前端，会不定期更新一些小块代码，写下自己的学习笔记，也希望能和大家一起进步！

1.单个标签实现分隔线：

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .line_01{

            width: 180px;

            padding: 0 20px 0;

            margin: 20px 0;

            line-height: 1px;

            border-left: 200px solid #ddd;

            border-right: 200px solid #ddd;

            text-align: center;

        }

    </style>

</head>

<body>

<div class="line_01">小小分隔线 单标签实现</div>

</body>

</html>

优点：代码简洁

2.巧用背景色实现分隔线：

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .line_02{

            height: 1px;

            border-top: 1px solid #ddd;

            text-align: center;

        }

        .line_02 span{

            position: relative;

            top: -8px;

            background: #fff;

            padding: 0 20px;

        }

    </style>

</head>

<body>

<div class="line_02"><span>小小分隔线 巧用色实现</span></div>

</body>

</html>

　　

优点：代码简洁，可自适应宽度

3.inline-block实现分隔线：

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .line_03{

            width:600px;

        }

        .line_03 b{

            background: #ddd;

            margin-top: 4px;

            display: inline-block;

            width: 180px;

            height: 1px;

            _overflow: hidden;

            vertical-align: middle;

        }

        .line_03 span{

            display: inline-block;

            vertical-align: middle;

            padding: 0px 20px;

        }

    </style>

</head>

<body>

<div class="line_03"><b></b><span>小小分隔线 inline-block实现</span><b></b></div>

</body>

</html>

　　

优点：文字可多行

4.浮动实现分隔线：

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .line_04{

            width:600px;

        }

        .line_04{

            overflow: hidden;

            _zoom: 1;

        }

        .line_04 b{

            background: #ddd;

            margin-top: 8px;

            float: left;

            width: 26%;

            height: 1px;

            _overflow: hidden;

        }

        .line_04 span{

            float: left;

            padding: 0px 20px;

        }

    </style>

</head>

<body>

<div class="line_04"><b></b><span>小小分隔线 浮动来实现</span><b></b></div>

</body>

</html>

　

5.hr实现分割线

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .hr-more {

            height: 20px;

            width: 70px;

            position: relative;

            left: 46%;

            top: -18px;

            font: normal 1.2em/20px 微软雅黑;

            vertical-align: middle;

            text-align: center;

            border-radius: 4px;

            background-color: #ffffff;

        }

        .div-box{

            width: 600px;

        }

    </style>

</head>

<body>

<div class="div-box">

    <hr/>

    <div class="hr-more">更多</div>

</div>

</body>

</html>

　　

6.fieldset 实现分割线

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        fieldset {

            border:none;border-top:1px solid blue;

        }

        legend {

            width: 120px;

            text-align: center;

        }

    </style>

</head>

<body>

<fieldset>

    <legend>fieldset分割线</legend>

</fieldset>

</body>

</html>

　　

7.after伪类实现分割线

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .hot {

            width: 100%;

            height: 20px;

            text-align: center;

            color: #000;

            font-size: 12px;

            line-height: 20px;

            position: relative;

        }

        .hot:after {

            content: "";

            width: 100%;

            height: 1px;

            background-color: #c5c0c0;

            position: absolute;

            bottom: 50%;

            z-index: 1;

            left: 0;

        }

        .hot span {

            z-index: 2;

            position: relative;

            background-color: #ffffff;

            padding: 0 10px;

        }

    </style>

</head>

<body>

<div class="hot">

    <span>伪类实现分割线</span>

</div>

</body>

</html>

　　

css分割线 文字居中的7种实现方式的更多相关文章

  1. 通过CSS实现 文字渐变色 的两种方式

    说明 这次的重点就在于两个属性, background 属性 mask 属性这两个属性分别是两种实现方式的关键. 方式一 解释 <!DOCTYPE html> <html> & ...

  2. 简单说 通过CSS实现 文字渐变色 的两种方式

    说明 这次的重点就在于两个属性, background 属性 mask 属性 这两个属性分别是两种实现方式的关键. 解释 方式一 效果图 代码 <!DOCTYPE html> <ht ...

  3. css 图片文字居中

    1.单行文字居中 2.多行文字居中 3.利用background-position:center;的图片居中 4.利用display:table-cell;属性的图片居中 <!DOCTYPE h ...

  4. 使用CSS完成元素居中的七种方法

    在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至 ...

  5. CSS绝对定位元素居中的几种方法

    转载自-CSS居中绝对https://www.cnblogs.com/skura23/p/6530556.html 作者:PajamaCat 1,div宽度未知1 <body> <d ...

  6. 【前端】使用CSS使元素居中的几种方式

    Precondition: <div class="parent"> <div class="item">居中</div> ...

  7. css布局 - 垂直居中布局的一百种实现方式（更新中...）

    首先将垂直居中的现象和实现方式两大方向细分类如下: 接下来逐条累加不同情况下的垂直居中实现. 目录: 一.父元素高度固定时,单行文本 | 图片的垂直居中 1. line-height行高简单粗暴实现法 ...

  8. css中对position的几种定位方式的最佳诠释

    关于元素的position定位的理解,牛客网的hardy给出了一个比较好的理解: 在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如上图所示   CSS中Positio ...

  9. css文字居中、图片居中、div居中解决方案

    一.文字居中 若文字只有一行 <!--html代码--> <div class="box"> <p class="text"> ...

随机推荐

  1. 完整的 dataType=text/plain jquery ajax 登录验证

    Html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <m ...

  2. 【POJ1442】【Treap】Black Box

    Description Our Black Box represents a primitive database. It can save an integer array and has a sp ...

  3. php学习小技巧

    1.print_r可打印数组 <?php echo '<p class="ajax">This paragraph was loaded with AJAX.&l ...

  4. Linux下安装SVN服务（CentOS7下）

    1. 安装 centos(我这里使用的是CentOS7)下yum命令即可方便的完成安装 测试安装是否成功: 2. 建立版本库 创建svn数据目录(subversion默认是把/var/svn作为数据根 ...

  5. php中文字符串反转

    <?php header("content-type:text/html;charset=utf-8"); /** 此函数的作用是反转中文字符串 mb_strlen() 获取 ...

  6. php实现base64编码

    工作需要,想弄一个加密的串,就想仿照base64的编码方式,写一个加密的方法,所以就有了下面这个用php实现的base64的代码 <?php /** * Base64 编码/解码 * @auth ...

  7. windows下实现uboot的tftp下载功能

    一.原理分析 带有uboot的开发板实际上充当的就是tftp客户端,而PC机扮演的角色就是tftp服务器端,而tftp下载功能实际上就是文件传输.tftp服务器可以建立在虚拟机linux下,也可以建立 ...

  8. spart快速大数据分析学习提纲(一)

    Spart是什么 Spart是一个用来实现快速而而通用的集群计算平台. 在速度方面,Spart扩展了广泛使用的Mapreduce计算模型,而且高效的支持更多的计算模式,包括交互式查询和流处理.Spar ...

  9. bzoj1563: [NOI2009]诗人小G

    Description Input Output 对于每组数据,若最小的不协调度不超过1018,则第一行一个数表示不协调度若最小的不协调度超过1018,则输出"Too hard to arr ...

  10. [Usaco2006 Dec]Milk Patterns

    [Usaco2006 Dec]Milk Patterns Description 农夫John发现他的奶牛产奶的质量一直在变动.经过细致的调查,他发现:虽然他不能预见明天 产奶的质量,但连续的若干天的 ...