<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8" />

<title>CSS实现分隔线的几种方法</title>

<style>

[url=home.php?mod=space&uid=597245]@charset[/url] "utf-8";

body,h1,h2,h3,h4,p,ul,li,ol,dl,dt,dd,input,textarea,figure,form{margin:0;padding:0}

body,input,textarea{font-size:12px;font-family:microsoft yahei}

body{text-align:center;color:#33383D;}

ul,ol{list-style:none}

img{border:0}

button,input {line-height:normal;*overflow:visible}

input,textarea{outline:none}

a{color:#3B8DD1;text-decoration:none}

a:hover{color:#8CAC52}

.demo-header{position:relative;height:22px;background-color:#33363B;line-height:22px;padding:2px 10px;text-align: left;}

.demo-name{color: #ccc;}

.demo-title,.demo-footer{height:0;overflow:hidden}

.demo-container{clear: both;padding:40px 10px 20px;text-align:left;margin:0 auto;line-height: 18px;}

.demo h2{font-size: 15px;padding-bottom: 6px;margin-bottom: 20px;border-bottom: solid 1px #ddd;}

</style>

</head>

<body>

<div class="demo-container demo">

<style type="text/css">

.demo{

width: 600px;

}

.line_01{

    padding: 0 20px 0;

    margin: 20px 0;

    line-height: 1px;

    border-left: 200px solid #ddd;

    border-right: 200px solid #ddd;

    text-align: center;

}

.line_02{

    height: 1px;

    border-top: 1px solid #ddd;

    text-align: center;

}

.line_02 span{

    position: relative;

    top: -12px;

    background: #fff;

    padding: 0 20px;

}

.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;

    width: 220px;

    vertical-align: middle;

text-align: center;

}

.line_04{

    width:600px;

}

.line_04{

    overflow: hidden;

    _zoom: 1;

}

.line_04 b{

    background: #ddd;

    margin-top: 12px;

    float: left;

    width: 26%;

    height: 1px;

    _overflow: hidden;

}

.line_04 span{

    padding: 0 10px;

    width: 32%;

    float: left;

    text-align: center;

}

.line_05{

    letter-spacing: -1px;

    color: #ddd;

}

.line_05 span{

    letter-spacing: 0;

    color: #222;

    margin:0 20px;

}

</style>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

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

<br>

<br>

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

<br>

<br>

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

<br>

<br>

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

<br>

<br>

<div class="line_05">———————————<span>小小分隔线 字符来实现</span>————————————</div>

</div>

</body>

</html>

CSS多种方法实现分隔线的更多相关文章

  1. css多种方法实现已知宽度和未知宽度的元素水平垂直居中

    // html <div class="box-wrapper"> <div class="box"> 内部box <p>更 ...

  2. CSS实现自适应分隔线的N种方法

    分割线是网页中比较常见的一类设计了,比如说知乎的更多回答 这里的自适应是指两边的横线会随着文字的个数和父级的宽度自适应 偷偷的看了一下知乎的实现,很显然是用一块白色背景覆盖的,加一点背景就露馅了 心想 ...

  3. 【转】CSS实现自适应分隔线的N种方法

    1.伪元素+transform:translateX(-100%); 主要原理是设置文本居中text-align: center;,然后给定两个伪元素,分别绝对定位,那么此时伪元素也是跟随着水平居中的 ...

  4. CSS巧妙实现分隔线的几种方法

    单个标签实现分隔线: 点此查看实例展示 .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: ...

  5. 文字在线中间，CSS巧妙实现分隔线的几种方法

    单个标签实现分隔线: .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: 200px so ...

  6. css 分割线样式_css实现文章分割线的多种方法总结

    这篇文章整理css如何实现文章分割线的多种方式,分割线在页面中可以起到美化作用,那么就来看看使用css实现分割线样式的多种方法.效果如下: 方式一:单个标签实现分隔线: html: <div c ...

  7. css巧妙实现分隔线

    单个标签实现分隔线 .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: 200px sol ...

  8. CSS导航菜单水平居中的多种方法

    CSS导航菜单水平居中的多种方法 在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知 ...

  9. 巧用CSS实现分隔线

    下面是几种简单实现分隔线的方法,个人比较喜欢第二种,我也给出了最后第五种比较2的写法,请大家拍砖,或者提供其他好的方法. 单个标签实现分隔线: 点此查看实例展示 .demo_line_01{ padd ...

随机推荐

  1. vue中状态管理vuex的使用分享

    一.main.js中引入 store import store from './store' window.HMO_APP = new Vue({ router, store, render: h = ...

  2. web中的$多种意思

    $符号在php中是表示变量的特征字符, 在js中它也有很多作用, 一般我们用来命名一个函数名称,获取id的1.首先可以用来表示变量, 比如变量 var s='asdsd'或var $s='asdasd ...

  3. viewport移动端适配，读文笔记

    文章地址: viewport移动端适配 笔记: 移动端适配目的: 希望在屏幕尺寸大小不同的手机上进行访问页面时,页面显示的效果能合理的展示,我们期望的是在手机屏幕较大时显示的内容比较大一些,手机屏幕小 ...

  4. es6（三set和map数据结构）

    es6中提供了一个新的数据结构Set,他有点类似数组,但和数组不同的是,在里面你如果写入重复的值的话,他不会显示重复值. const s =new Set(); [2,3,4,5,6,6,6,7,8, ...

  5. 秋招复习-C++（三）

    • 数据库 1.数据库的索引有哪些? (1)B树索引:利用B树作为底层数据结构的索引,在B树索引中保存索引列的值和数据表的对应行的ID,每一个叶子结点都存放着一个索引列的值和数据表对应行的ID,通过这 ...

  6. 秋招复习-C++（二）

    1.Segmentation Fault是什么?什么情况下会导致它的出现?怎么解决? Segmentation Fault中文是段错误,在Linux系统中,段错误一般是是由用户程序非法访问内存引起的( ...

  7. 关于C/C++的一些思考（5）

    运算符重载函数的限制: 五个不能实现重载的符号:".", ".*", "::", "?", "sizeof&q ...

  8. [LUOGU] P3871 [TJOI2010]中位数

    题目描述 给定一个由N个元素组成的整数序列,现在有两种操作: 1 add a 在该序列的最后添加一个整数a,组成长度为N + 1的整数序列 2 mid 输出当前序列的中位数 中位数是指将一个序列按照从 ...

  9. 「BZOJ1537」Aut – The Bus（变形Dp+线段树/树状数组 最优值维护）

    网格图给予我的第一反应就是一个状态 f[i][j] 表示走到第 (i,j) 这个位置的最大价值. 由于只能往下或往右走转移就变得显然了: f[i][j]=max{f[i-1][j], f[i][j-1 ...

  10. 利用OpenXml读取、导出Excel

    OpenXml是通过 XML 文档提供行集视图.由于OPENXML 是行集提供程序,因此可在会出现行集提供程序(如表.视图或 OPENROWSET 函数)的 Transact-SQL 语句中使用 OP ...