<!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. python+selenium自动化登录dnf11周年活动界面领取奖励登录部分采坑总结[1]

    背景: Dnf的周年庆活动之一,游戏在6月22日 06:00~6月23日 06:00之间登陆过游戏后可以于6月25日 16:00~7月04日 06:00领取奖励 目标:连续四天自动运行脚本,自动领取所 ...

  2. Navicat 模型生成表

    打开模型 -> 左上角文件 -> 导出SQL 打开sql文件,将sql在数据库执行,注意主键递增.日期类型 根据当前时间戳更新是否需要(默认选中的)等等

  3. django 127.0.0.1 将您重定向的次数过多

    "GET /?next=/%3Fnext%3D/%253Fnext%253D/ HTTP/1.1" 302 0 solution reference from django.con ...

  4. react笔记汇总

    1.什么是React? a.React 是一个用于构建用户界面的 JAVASCRIPT 库. b.React主要用于构建UI,很多人认为 React 是 MVC 中的 V. c.React 起源于 F ...

  5. 简单DP内容

    1. 最长上升子序列 [题目描述] 给定N个数,求这N个数的最长上升子序列的长度. [样例输入] 7 2 5 3 4 1 7 6 [样例输出] 4 第一种解法:时间复杂度O(n^2), 状态设计:DP ...

  6. poj3710 Christmas Game

    题目描述 题解: 树上删边. 对于奇数长度的环,可以看做一条边. 对于偶数长度的环,可以看做什么都没有. 没有特别好的解释…… 代码: #include<cstdio> #include& ...

  7. Openjudge-2815-城堡问题

    对于这道题目来说的话,我们的思路是这样的,我们首先把数据读进来,然后把color数组清零. 我们的思路是这样的的,给每一个房间设置一个对应的color数组,然后color数组里面填满不同的数字,每一种 ...

  8. 计蒜客 Overlapping Rectangles （离散化）

    题意: 给定一个坐标系, 给出n个矩形的左下角坐标(bx,by)和右上角坐标(tx,ty) , 求矩形覆盖的面积, 有些区域会被多个矩形覆盖, 但只用算一次. n <= 1000,  0 < ...

  9. Vue编写轮播组件引入better-scroll插件无法正常循环轮播

    临近过年还是发个博客表示一下自己的存在感,这段时间公司突然说想搞小程序,想到这无比巨大的坑就只能掩面而泣,于是乎这段时间在学习小程序开发.关于标题所说的是有老铁问的,我也跟着网上的代码码了一遍然后发现 ...

  10. Backspace doesn't delete inner html tags of a contenteditable DIV in Firefox

    https://bugzilla.mozilla.org/show_bug.cgi?id=439808 backspace键 在ff下不能使用  div contenteditable=true时