<!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-07 日志管理

    学习目标 MySQL日志 二进制日志 错误日志 查询通用日志 慢查询日志 MySQL日志 MySQL日志分为四类,说明如下: 错误日志:记录MySQL服务的启动.运行或者停止时出现的问题. 查询日志: ...

  2. 第 6 章 Cinder - 061 - Boot from Volume

    Boot from Volume Volume 除了可以用作 instance 的数据盘,也可以作为启动盘(Bootable Volume). 打开 instance 的 launch 操作界面. 这 ...

  3. modify django app models.py adn settings.py

    from django.db import models from django.contrib import admin # from personal import models class Us ...

  4. C语言中函数参数传递的本质是值传递

    数组名做函数参数进行传递时,实际上是是一份该指针的拷贝. 给形参赋予其他值,并不影响实参的值. 类似于: int *p = a;    //a为数组名 p = b;          //b为数组名 ...

  5. IOS学习笔记3—Objective C—简单的内存管理

    今天简述一下简单的内存管理,在IOS5.0以后Apple增加了ARC机制(Automatic Reference Counting),给开发人员带来了不少的方便,但是为了能更好的理解IOS内存管理机制 ...

  6. vue 项目部署

    vue项目部署到PHP项目 入口目录 vue项目打包后, 是一个单文件html 我们只需要把打包后的文件夹放在php项目的public下面 访问 xxx.com/h5/index.html 就可以访问 ...

  7. SpringMVC的删除功能

    Dao层 package net.roseindia.dao; import java.util.Date; import java.util.List; import net.roseindia.m ...

  8. zoj 2772 Quick Change

    Quick Change Time Limit: 2 Seconds      Memory Limit: 65536 KB J.P. Flathead's Grocery Store hires c ...

  9. 认识Linux文件系统的架构

    本文主要研究一下storm的OpaquePartitionedTridentSpoutExecutor TridentTopology.newStream storm-core-1.2.2-sourc ...

  10. 【dfs】codeforces Journey

    http://codeforces.com/contest/839/problem/C [AC] #include<iostream> #include<cstdio> #in ...