<!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. js实现返回上一页功能

    大家在做 "返回上一页" 这个功能的时候 都是用history.go(-1);来实现的 但这段代码只是简单的使用浏览器的后退功能 从浏览器缓存中取出页面来显示 但我们绝大部分情况都 ...

  2. springmvc @RequestParam @RequestBody @PathVariable 等参数绑定注解详解

    简介: handler method 参数绑定常用的注解,我们根据他们处理的Request的不同内容部分分为四类:(主要讲解常用类型) A.处理requet uri 部分(这里指uri templat ...

  3. IOS学习笔记2—Objective C—类、属性、方法

    以下是我学习IOS开发的一些笔记和心得,贴出来和大家一同分享,也希望大家能补充和纠错,共同进步 有Android和IOS开发问题也希望能和大家交流! Objective-C 1.OC是一门基于C的面向 ...

  4. 智能指针unqiue_ptr

    unique_ptr unique_ptr 对它指向的对象在同一时刻是独占的.它要么在构造的时候使用内置指针初始化,要么使用reset给其赋值.当unique_ptr被销毁时,它所指向的对象也被销毁. ...

  5. Linux内核——进程管理之SMP负载均衡（基于版本4.x）

    <奔跑吧linux内核>3.3笔记,不足之处还望大家批评指正 根据实际物理属性,CPU域分类如图1所示. 图1 CPU域分类 问题一:一个4核处理器中的每个物理CPU拥有独立L1 cach ...

  6. CentOS7安装Tomcat9并配置

    划重点:安装tomcat之前必须先安装jdk  安装教程 1.下载 Tomcat 9 CentOS 7 下创建目录并下载文件:// 链接已更新 cd /usr/local/ mkdir tomcat ...

  7. Linux启动流程CentOS6和7的区别

    目 录 Linux启动流程    I 第1章 CentOS6启动流程    1 1.1 BIOS    1 1.2 MBR    1 1.3 GRUB    1 1.4 kernel(加载内核)    ...

  8. LeetCode（80）Remove Duplicates from Sorted Array II

    题目 Follow up for "Remove Duplicates": What if duplicates are allowed at most twice? For ex ...

  9. [bzoj1022][SHOI2008]小约翰的游戏John （反Nim游戏）

    Description 小约翰经常和他的哥哥玩一个非常有趣的游戏:桌子上有n堆石子,小约翰和他的哥哥轮流取石子,每个人取 的时候,可以随意选择一堆石子,在这堆石子中取走任意多的石子,但不能一粒石子也不 ...

  10. STM32F407 NVIC 中断优先级管理 个人笔记

    内嵌向量中断控制器:Nested Vectored Interrupt Controller (NVIC) 设置中断向量的优先级并使能. 响应优先级& 抢占优先级 抢占优先级:一个中断A还在处 ...