<!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. MySQL-06 数据备份和恢复

    学习目标 数据备份 数据恢复 数据库迁移 导入和导出 数据备份 系统意外崩溃或者服务器硬件损坏都有可能导致数据库丢失,因此生产环境中数据备份非常重要. MySQLdump命令备份 该命令可以将数据库备 ...

  2. eclipse android SDK代理跟新

    启动 Android SDK Manager ,打开主界面,依次选择「Tools」.「Options...」,弹出『Android SDK Manager - Settings』窗口: 在『Andro ...

  3. Linux常用命令大全2

    Linux命令是对Linux系统进行管理的命令.对于Linux系统来说,无论是中央处理器.内存.驱动.键盘.鼠标,还是用户等都是文件,Linux命令是它正常运行的核心.接下来,就来看看xp系统下载编辑 ...

  4. spring注解开发-AOP（含原理）

    一:AOP基本使用 AOP指在程序运行期间动态的将某段代码切入到指定方法指定位置进行运行的编程方式: 步骤一:导入aop模块:Spring AOP:(spring-aspects) <depen ...

  5. Shell转大写为小写

    #!/bin/bash # read a a=$(echo "$a" | awk '{print tolower($0)}') #转大写为小写 if [[ $a = 'y' || ...

  6. Shading-jdbc源码分析-sql词法解析

    前言 前有芋艿大佬已经发过相关分析的文章,自己觉的源码总归要看一下,然后看了就要记录下来(记性很差...),所以就有了这篇文章(以后还要继续更

  7. vue 指令---气泡提示(手撸实战)

    菜鸟学习之路//L6zt github 自己在造组件轮子,也就是瞎搞.自己写了个slider组件,想加个气泡提示.为了复用和省事特此写了个指令来解决.预览地址项目地址 github 我叫给它胡博 cs ...

  8. 大数据学习——hive数仓DML和DDL操作

    1 创建一个分区表 create table t_partition001(ip string,duration int) partitioned by(country string) row for ...

  9. mongodb 的创建和使用

    1. sudo apt-get install mongodb 2. 登陆数据库: mongo, 3. 创建数据库:use dbname 4. 插入数据: db.dbname.insert({&quo ...

  10. 71.mybatis 如何获取插入的id【从零开始学Spring Boot】

    [从零开始学习Spirng Boot-常见异常汇总] 在之前的文章已经讲过spring boot集成mybatis了,但是忘记说一个很重要的知识点了,那就是获取获取主键id,这篇文章补充下,sprin ...