分割线用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)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...
随机推荐
- Retrofit工具类
package com.example.week2.retrofitUtils; import android.util.Log; import com.example.week2.model.Con ...
- BZOJ4355:Play with sequence——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=4355 维护一个长度为N的序列a,现在有三种操作: 1)给出参数U,V,C,将a[U],a[U+1] ...
- jQuery考试
No1: 分析:首先A答案是正确的jQuery中删除元素的方法有a,c,d所以排除B,另外c是清空,d虽然能删除但是不能删除元素所绑定的事件等等. No2: 分析:A是正确的通过get(index)的 ...
- bzoj2144: 跳跳棋(二分/倍增)
思维好题! 可以发现如果中间的点要跳到两边有两种情况,两边的点要跳到中间最多只有一种情况. 我们用一个节点表示一种状态,那么两边跳到中间的状态就是当前点的父亲,中间的点跳到两边的状态就是这个点的两个儿 ...
- [转]Android 如何根据网络地址获取网络图片方法
http://blog.csdn.net/xiazdong/article/details/7724103 目录(?)[-] h2pre namecode classhtml stylefont-we ...
- 调整KVM虚拟机硬盘大小
KVM虚拟机的硬盘映像默认存放在“/var/lib/libvirt/images/”中,先查看你的硬盘映像格式是不是RAW格式: qemu-img info /var/lib/libvirt/imag ...
- Widows与linux关于隐形文件和非隐形文件の对比
Widows与linux关于隐形文件和非隐形文件の对比 对于windows来说 ,它本身有一些隐藏文件,为了防止一些菜鸟不小心把电脑的主要文件删除,还有就是里面存放一些你不知道的后门. 对此我们一些同 ...
- JNA的用法
JNA(Java Native Access):建立在JNI之上的Java开源框架,SUN主导开发,用来调用C.C++代码,尤其是底层库文件(windows中叫dll文件,linux下是so[shar ...
- SCU 4527 NightMare2 最短路+二分 好题
可怜的又做噩梦了..但是这次跟上次不大一样,虽然他又被困在迷宫里,又被装上了一个定时炸弹,但是值得高兴的是,他发现他身边有数不清的财宝,所以他如果能带着这些财宝并活着逃出去的话,他就发财啦.不过,这次 ...
- [技巧篇]11.JavaScript原生态如何获取浏览器请求地址中的参数
var getAccessParams = function(){ var i,ilen,strs,keyName,keyValue, params={}, path = window.locatio ...