一:单个标签实现分隔线:. ; ; 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. 【BZOJ1031】字符加密(后缀数组)

    [BZOJ1031]字符加密(后缀数组) 题面 BZOJ 洛谷 题解 把字符串倍长 然后直接求后缀数组, 拍好序之后直接输出就行了. (我只是复习一下\(SA\)而已) #include<ios ...

  2. BZOJ1853:[SCOI2010]幸运数字 & BZOJ2393:Cirno的完美算数教室——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=1853 https://www.lydsy.com/JudgeOnline/problem.php? ...

  3. BZOJ1034 [ZJOI2008]泡泡堂BNB 【贪心】

    1034: [ZJOI2008]泡泡堂BNB Time Limit: 10 Sec  Memory Limit: 162 MB Submit: 3531  Solved: 1798 [Submit][ ...

  4. 仅此一文让你明白ASP.NET MVC 之View的显示

    有些人要问题,为什么我要学框架?这里我简单说一下,深入理解一个框架,给你带来最直接的好处: 使用框架时,遇到问题可以快速定位,并知道如何解决: 当框架中有些功能用着不爽时,你可以自由扩展,实现你想要的 ...

  5. Using CORS(译)

    原文地址:https://docs.webplatform.org/wiki/tutorials/using_cors 总结 一篇对"Cross Origin Resource Sharin ...

  6. 单线程的redis为什么达到每秒万级的处理速度?

    纯内存访问,redis将所有数据都放在内存中,内存响应时间大约为100纳秒,这是redis达到每秒万级级别访问的重要基础. 非阻塞IO,redis使用epoll作为IO多路复用技术的实现,再加上red ...

  7. C# 枚举的初始化

    3.2 枚举类型(Enum types)的默认值 对于枚举类型(Enum types),.NET会自动将字面值0(literal 0)隐式地转换为对应的枚举类型. 3.2.1 有一个0值成员 如果枚举 ...

  8. JS设计模式之装饰者模式

    装饰者模式概述 在不改变原对象的基础上,通过对其进行包装拓展(添加属性或者方法)使原有对象可以满足用户更复杂的需求 实际需求 在已有的代码基础上,为每个表单中的input默认输入框上边显示一行提示文案 ...

  9. python基础---输入输出

    1.输入字符串. name=input()   or name=input('please input a string') 这样可以接收一个字符串,包括空格,都可以输入.只有回车不接受,作为结束符, ...

  10. Different Integers(牛客多校第一场+莫队做法)

    题目链接:https://www.nowcoder.com/acm/contest/139/J 题目: 题意:给你n个数,q次查询,对于每次查询得l,r,求1~l和r~n元素得种类. 莫队思路:1.将 ...