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

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. CListCtrl 的应用

    CMFCListCtrl实现的功能:比较特别的就是通过CImage来扩展每行的高度 CMFCListCtrl m_lisTestResult; 1.插入列(创建表格) m_lisTestResult. ...

  2. Linux的压缩解压命令快速上手——解压篇

    在Linux系统中,压缩文件通常是先将若干文件(包括目录)打包成一个tar文件,然后再调用压缩程序将tar文件压缩成相应的压缩包,这也就是为什么Linux系的压缩包的后缀通常都是像tar.gz,tar ...

  3. centos 安装vnc服务

    1.安装tigervnc-server yum install tigervnc-server 2.启动vnc服务 vncserver:1 [错误提示待解决bad display name " ...

  4. CentOS中vsftp安装、配置、卸载

    1. 安装VSFTP 1 [root@localhost ~]# yum -y install vsftpd 2. 配置vsftpd.conf文件 [root@localhost ~]# vi /et ...

  5. tbody 滚动条

    ARRIVALS TO BRISTOL - ENGLAND FLIGHT CODE FROM STA ETA Notes T3 4264 ISLE OF MAN 11:40 11:42 LANDED ...

  6. 关于使用iframe标签自适应高度的使用

    在ifrome内设定最小高度,(此方法只适用于页面内切换高度不一.但是会保留最大高度,返回后保持最大高度不再回到最初页面的高度) <iframe id="one4" widt ...

  7. Why Doesn’t Drag-and-Drop work when my Application is Running Elevated? – A: Mandatory Integrity Control and UIPI(转载)

    f you run notepad elevated (Right click | Run as Administrator), and you try and drag-and-drop a fil ...

  8. yii框架的foreach 已经优化好了，可以“$user_model->attributes=$_POST['Admin'];”

    yii框架的foreach 已经优化好了, 以前我们遍历数组的时候是用foreach循环 foreach ( as $key=>$value){                    $user ...

  9. 搭建BCE本地开发环境

    1. 在官网下载VirtualBox & 虚拟机 http://bce.baidu.com/doc/BAE/GUIGettingStarted.html#.E4.B8.8B.E8.BD.BD. ...

  10. 传值 UI考试知识点

    传值: 1. 属性传值:从前往后 2. 代理传值:从后往前 3. block: 4. 单例:普通写法和GCD写法 5 . 通知 NSNotification GCD 单例: static PlayMu ...