一:单个标签实现分隔线:. ; ; line-height: 1px; border-left: 200px solid #ddd; border-right: 200px solid #ddd;   text-align: center; }

二:巧用背景色实现分隔线:. 20px; }

三:inline-block实现分隔线:.demo_line_03{ width:600px; } .demo_line_03 b{ background: #ddd; margin-top: 4px; display: inline-block; width: 180px; height: 1px; _overflow: hidden; vertical-align: middle; } .demo_line_03 span{ display: inline-block; width: 220px; vertical-align: middle; }

四:浮动实现分隔线:.; } .demo_line_04 b{ background: #ddd; margin-top: 8px; float: left; width: 26%; height: 1px; _overflow: hidden; }

五:利用字符实现分隔线:<div class="demo_line_05">———————————<span>小小分隔线 字符来实现</span>————————————</div>

.; 20px; }

效果图:

分割线用CSS样式做出来的效果的更多相关文章

  1. 修改css样式+jq中的效果+属性操作+元素操作

    :checked    选框选中的 一.修改css样式: 1.参数只写属性名,则返回属性值 $(this).css( ' color ');   //300px 2.参数是属性名,属性值,逗号分隔,是 ...

  2. 纯CSS样式写刘海屏效果

    1. 效果: 2. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  3. css样式实现字体删除线效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. iOS 加载本地 HTML 文件 CSS 样式图片无效果

    在开发的过程中,有时候需要加载一些 HTML 页面,对于不太复杂的界面,基本上都可以放到本地用 UIWebview 来加载,但是在开发过程中会碰到 UIWebview 加载出来的 HTML 页面没有图 ...

  5. 精通CSS+DIV网页样式与布局--图片效果

    提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...

  6. Github上html页面(包括CSS样式和JS效果)如何显示出来

    在看Github上项目时,发现有的html页面效果能很好的展现出来,而有的则不能.对这个问题很好奇,因此研究了一下,最终做到了将页面展示出来的目的.下面以我的Github的开源项目bootstrap- ...

  7. 后端数据中含有html标签和css样式,前端如何转译展示样式效果。

    后端含有html标签和css样式的数据: domain="<span style='color:red'>www.baidu.com</span>" (vu ...

  8. chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持,技巧:要在鼠标上的 div上 勾 :hover

    chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持,技巧:要在鼠标上的 div上 勾 :hover

  9. CSS特异性(CSS Specificity)的细节之CSS样式权重的计算与理解(CSS样式覆盖规则)

    本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...

随机推荐

  1. BZOJ5251:[九省联考2018]劈配——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=5251 https://loj.ac/problem/2477  <-可以看数据 https: ...

  2. github clone 指定的tag

    git clone --branch [tags标签] [git地址] 使用branch参数,后面加上tag标签,最后是git仓库的地址

  3. finetune on caffe

    官方例程:http://caffe.berkeleyvision.org/gathered/examples/finetune_flickr_style.html 相应的中文说明:http://blo ...

  4. HDU 1045 dfs

    Fire Net Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...

  5. cin.get()、流和缓冲区

    大家好,这是我在CSDN的第一篇博客.我是一名学习GIS专业的大学生.我从小开始喜欢编程,可是到现在编程水平却长进不大,依然是菜鸟一个.究其原因,虽然这些年乱七八糟的东西学过不少,但是总的来说还是基础 ...

  6. java 反射和new的区别

    关于java 反射和new的区别,在这里我不做多讲,因为网上有大把资料,描述得很详细. 今天我只讲一点,为什么要用反射?直接用new不行么?干嘛弄得那么麻烦! 1.基本上效果差不多,但是new对象,无 ...

  7. Git新手上路,让你快速掌握Git的基本使用

    github是一个基于git的代码托管平台,付费用户可以建私人仓库,我们一般的免费用户只能使用公共仓库,也就是代码要公开.这对于一般人来说公共仓库就已经足够了. 1.注册账户以及创建仓库     要想 ...

  8. 其他:OI竞赛中的文件操作

    本文介绍三种方法进行文件输入输出,都非常实用 第一种方法是采用重定向的形式进行输入输出,很方便 freopen("input.txt","r",stdin); ...

  9. 2015/8/26 Python基础(1):基本规则及赋值

    Python有如下的基本规则: #后表示注释 \n是行分隔符 \是继续上一行,将过长语句分开 :分号将两个语句连接在一行中 :冒号将代码头和体分开 代码块用缩进块的方式体现 不同缩进深度分隔不同的代码 ...

  10. 【C++ STL】Deques

    1.结构 容器deque和vector非常相似,也是采用动态数组来管理元素,提供随机存取,有着和vector几乎一样的接口,不同的是deque的动态数组头尾都开放,因此可以在头尾都可以进行快速的安插和 ...