分割线用CSS样式做出来的效果
一:单个标签实现分隔线:. ; ; 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样式做出来的效果的更多相关文章
- 修改css样式+jq中的效果+属性操作+元素操作
:checked 选框选中的 一.修改css样式: 1.参数只写属性名,则返回属性值 $(this).css( ' color '); //300px 2.参数是属性名,属性值,逗号分隔,是 ...
- 纯CSS样式写刘海屏效果
1. 效果: 2. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- css样式实现字体删除线效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- iOS 加载本地 HTML 文件 CSS 样式图片无效果
在开发的过程中,有时候需要加载一些 HTML 页面,对于不太复杂的界面,基本上都可以放到本地用 UIWebview 来加载,但是在开发过程中会碰到 UIWebview 加载出来的 HTML 页面没有图 ...
- 精通CSS+DIV网页样式与布局--图片效果
提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...
- Github上html页面(包括CSS样式和JS效果)如何显示出来
在看Github上项目时,发现有的html页面效果能很好的展现出来,而有的则不能.对这个问题很好奇,因此研究了一下,最终做到了将页面展示出来的目的.下面以我的Github的开源项目bootstrap- ...
- 后端数据中含有html标签和css样式,前端如何转译展示样式效果。
后端含有html标签和css样式的数据: domain="<span style='color:red'>www.baidu.com</span>" (vu ...
- chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持,技巧:要在鼠标上的 div上 勾 :hover
chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持,技巧:要在鼠标上的 div上 勾 :hover
- CSS特异性(CSS Specificity)的细节之CSS样式权重的计算与理解(CSS样式覆盖规则)
本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...
随机推荐
- BZOJ1509 & 洛谷4408:[NOI2003]逃学的小孩——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=1509 https://www.luogu.org/problemnew/show/P4408 sb ...
- 洛谷 P1653 猴子 解题报告
P1653 猴子 题目描述 有N只猴子,第一只尾巴挂在树上,剩下的N-1只,要么被其他的猴子抓住,要么抓住了其他的猴子,要么两者均有.当然一只猴子最多抓两只另外的猴子.现在给出这N只猴子抓与被抓的信息 ...
- bzoj3224: Tyvj 1728 普通平衡树(打个splay暖暖手)
(其实今天好热啊? 题目大意:插入,删除,k小,前驱后继,数的排名. splay和treap裸题...过几天补个treap的 splay: #include<iostream> #incl ...
- 怎样去面试JavaScript开发者
面试 Javascript 工程师难吗?Javascript 工程师的水平参差不齐,如何评定他们技术水平的高低?如何确定 Javascript 工程师适合承担哪方面的任务?我在腾讯时的面试经验是,通过 ...
- 爬虫实例——爬取淘女郎相册(通过selenium、PhantomJS、BeautifulSoup爬取)
环境 操作系统:CentOS 6.7 32-bit Python版本:2.6.6 第三方插件 selenium PhantomJS BeautifulSoup 代码 # -*- coding: utf ...
- POJ3694:Network(并查集+缩点+lca)
Network Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 13172 Accepted: 4774 题目链接:htt ...
- Matrix.(POJ-2155)(树状数组)
题目是让每次对一个子矩阵进行翻转(0变1,1变0), 然后有多次询问,询问某个点是0还是1 这题可以用二维的树状数组来解决,考虑传统的树状数组是改变某个点,然后查询某一段, 而这个题是改变某一段,查询 ...
- lvs学习总结
看的马哥的视频 NAT1.Director的DIP地址与集群节点必须在同一个网络中[vlan或者subnat] .RIP地址通常是私有地址,仅用于和DIP进行通信 .Director处理进出的所有通信 ...
- 大道至简第一章伪代码读后感o(╯□╰)o
import.java.io*; import class duhougan; public static void main(Striing arges[]){ system.out.println ...
- [LeetCode] Merge Interval系列,题:Insert Interval,Merge Intervals
Interval的合并时比较常见的一类题目,网上的Amazon面经上也有面试这道题的记录.这里以LeetCode上的例题做练习. Merge Intervals Given a collection ...