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

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. OPENGL 地形

    用OPNEGL弄了好久,终于有个地形的样子了! 看起来还是很糟糕....

  2. Adapter 模式

    在实际软件系统设计和开发中,会经常遇到这种问题:我们为了完成某项工作购买了一个第三方的库来加快开发. 这就带来了一个问题: 我们在应用程序中已经设计好了接口,与这个第三方提供的接口不一致,为了使得这些 ...

  3. opencv 常用函数介绍

    ××××××××××××××××××××××××××××××××××××××× CvScalar imgmean,imgstd; double imgmax,imgmin; cvAvgSdv(img, ...

  4. 【POJ3468】【树状数组区间修改】A Simple Problem with Integers

    Description You have N integers, A1, A2, ... , AN. You need to deal with two kinds of operations. On ...

  5. Idea中运行Testng时，报SAXParseException：parallel为none的问题原因及解决

    今天更新了testng的版本为6.9.10, 在idea中运行测试案例时,报错如下: org.testng.TestNGException: org.xml.sax.SAXParseException ...

  6. 学C++不得不看的一篇文章[转]

    1. 扎实的基础.数据结构.离散数学.编译原理,这些是所有计算机科学的基础,如果不掌握他们,很难写出高水平的程序.据我的观察,学计算机专业的人比学其他专业的人更能写出高质量的软件.程序人人都会写,但当 ...

  7. java 按天创建文件夹

    按天创建文件夹,也就是每天创建一个,适合上传文件服务使用,文件数量较多时可以按文件夹区分. public static final String FMT = "yyyy-MM-dd" ...

  8. Windows Open with Sublime Text

    Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\shell\Open with Sublime Text] "Icon&q ...

  9. __attribute__ ((section(".text")))的测试

    一.测试原因 在学习u-boot的环境变量过程中,看到有如此的代码,现对涉及到的内容进行实验测试. 二.测试目的 1.了解gcc允许对段的属性进行更改的方法. 2.解决”ENV_IS_EMBEDDED ...

  10. Ajax 的同步与异步

    1.Ajax的工作原理如图: 2.同步 XMLHttpRequest 对象用于和服务器交换数据. XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参 ...