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

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. LA 6856 Circle of digits 解题报告

    题目链接 先用后缀数组给串排好序.dc3 O(n) 二分答案+贪心check 答案的长度len=(n+k-1)/k 如果起点为i长为len串大于当前枚举的答案,i的长度取len-1 从起点判断k个串的 ...

  2. 仿小米网jQuery全屏滚动插件fullPage.js

    演 示 下 载   简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面,QQ浏 ...

  3. TortoiseGit(乌龟git)保存用户名密码的方法(转）

    转自:http://my.oschina.net/jjyuangu/blog/232798?p=1 windows下比较比较好用的git客户端有2种: 1. msysgit + TortoiseGit ...

  4. js对象的复制，传递，新增，删除和比较

    当我们把一个某个对象拷贝或者传递给某个函数时,往往传递的是该对象的引用. 因此我们在引用上做的任何改动,都将会影响到它所引用的原对象.  复制,拷贝  var o = { add: 'Changdao ...

  5. Canvas实现文字粒子化，并且绕轴旋转（完善）

    1. 之前有放过一个初始版本,但是因为在旋转的时候,有比较大的瑕疵,造成每个点运动到端点后,出现类似撞击的感觉. 2. 所以本文对旋转作了些调整,运用类似水平方向的圆周运动 a. HTML代码,定义c ...

  6. Ubuntu14 或是其他系统当中关于sublimeSFTP超时解决方法

    一直都使用Sublime的SFTP功能,感觉还不错,好用,但是最近不知道怎么了,使用不成了,提示超时了,于是在网上找一下解决方法,没有找到,于是自己想着试试看,于在搞了一会,发现只要把配制文件当中的s ...

  7. 2014/09/30 Learning Note

    Vbird Linux: Vim Learning: http://linux.vbird.org/linux_basic/0310vi.php Bash Shell: http://linux.vb ...

  8. 导出Excel后其他按钮失效

    在SharePoint中,当在页面上点击Export to Excel按钮后,第一次它能实现该功能,当再次点击该按钮时,页面上的所有按钮将失效,仅仅再次刷新该页面时按钮才会有效,首先想到出现该问题肯定 ...

  9. Ruby自学笔记（四）— 数组,Hash,正则表达式简介

    今天学习的是数组和Hash,数组在很多编程语言中都能常常用到. 数组: 数组是存储数据的一种容器,在Ruby中,数组中存储的数据可以是任何类型的数据:这和JAVA不同,在JAVA中,数组是存储同一类型 ...

  10. Asynchronous

    http://sporto.github.io/blog/2012/12/09/callbacks-listeners-promises/ http://www.cnblogs.com/liuning ...