分割线用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)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...
随机推荐
- bzoj 1221: [HNOI2001] 软件开发 (网络流)
注意说如果直接从每天的新的连向旧的,那整个图的最大流还是不变,答案就一直会是Σni*f type arr=record toward,next,cap,cost:longint; end; const ...
- BZOJ1911:[Apio2010]特别行动队——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=1911 又是一个显然的dp……好吧我懒得讲了. s[i]是战斗力前缀和. 我们仍然设k<j< ...
- pg_basebackup: invalid tar block header size
问题: 在使用pg_basebackup搭建备节点时,由于pg_basebackup本身使用的是int整型来保存传输的数据大小,当传输的数据大于4G的话,整数就会溢出,进而报出:pg_baseback ...
- git与svn与github与码云的区别
1.git与github(https://www.oschina.net/)的区别 Git(https://git-scm.com/)是一个版本控制工具 github是一个用git做版本控制的项目托管 ...
- [lottery anayliser]lottery anayliser
抓取网页,获得获奖信息 #!/usr/bin/python import urllib2 import re import time def spider(url): ""&quo ...
- 题解【bzoj1010 [HNOI2008]玩具装箱TOY】
斜率优化动态规划可以用来解决这道题.同时这也是一道经典的斜率优化基础题. 分析:明显是动态规划.令\(dp[i]\)为前\(i\)个装箱的最小花费. 转移方程如下: \[dp[i]=\min\limi ...
- linux查看内存cpu占用
linux查看内存cpu占用top 命令 按q退出 可以添加额外选项选择按进程或按用户查看如: top -u gitu PID:进程idPR:进程的优先级别,越小越优先被执行NInice:值VIRT ...
- 【Android】Android之Copy and Paste
Android为复制粘贴提供了一个强大的基于剪切板的框架,它支持简单和复杂的数据类型,包括纯文本,复杂的数据结构,二进制流,甚至app资源文件.简单的文本数据直接存储在剪切板中,而复杂的数据则存储的是 ...
- python 基础--pip(转)
感谢:http://www.cnblogs.com/csucat/p/4897695.html python需要用到一些其他的库,可以手动去各个库的官网下载,自己安装:也可以安装pip,使用pip可以 ...
- JS之document例题讲解2
例题三.图片轮播 <body> <div style="width:1000px; height:250px; margin-top:30px"> < ...