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

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. JavaScript_变量的自动转换和语句

    JS自动类型转换 var a = 1; var b = true; "==" 表示 可以自动类型转换,比较的是数值 "===" 表示可以自动类型转换,先比较数值 ...

  2. MYSQL根据分类分组取每组一条数据且按条件能排序的写法

    之前在一个项目的开发中,有遇到要根据分类来分组获取每组一条按某个条件字段排序的数据结果,于是先自己写了一条语句: select * from `表A` GROUP BY `c`; 上面这个语句有可以根 ...

  3. git学习小结 (笔记)

    Modesty helps one to go forward, whereas conceit makes one lag behind. "虚心使人进步,骄傲使人落后" 注:本 ...

  4. 浅说prop与attr的区别

    jquery中attr和prop的区别   在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答 ...

  5. 网站开发常用jQuery插件总结(三）拖拽插件gridster

    1.gridster插件功能 实现类似于win8 磁贴拖拽的功能 2.gridster官方地址 http://gridster.net/ 在官方的网站上也有插件的帮助和实例,但是按照官方的说明,我在本 ...

  6. &nbsp; 与 空格的区别

    nbsp 是 Non-Breaking SPace的缩写,即“不被折断的空格”,当两个单词使用   连接时,这两个单词就不会被分隔为2行,如下面 <div id="div1" ...

  7. [转] 翻译-高质量JavaScript代码书写基本要点 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1173 原文作者:St ...

  8. PHP 用户注册与登录

    网站用户注册与登录是很常用的一个功能,本节教材就以此来演示一下 PHP 中如何开发用户注册与登录模块. 本节需要用到的重点 PHP 基础知识: PHP 中预定义 $_POST 和 $_GET 全局变量 ...

  9. css 中 的 float :left 和 clear :both

    float:left;(左浮动)他使得指定元素脱离普通的文档流而产生的特别的布局特性.并且FLOAT必需应用在块级元素之上,也就是说浮动并不应用于内联标签.或者换句话来说当应用了FLOAT那么这个元素 ...

  10. .Echo 命令中经常提到回显,是什么意思?

    C:\>echo on C:\>date /t2006-08-06 星期日 C:\>以上内容是在打开回显的情况下执行的,其实我们想看到的只有2006-08-06 星期日这一行内容,但 ...