css巧妙实现分隔线
单个标签实现分隔线
.demo_line_01{
padding: 0 20px 0;
margin: 20px 0;
line-height: 1px;
border-left: 200px solid #ddd;
border-right: 200px solid #ddd;
text-align: center;
}
优点:代码简洁
背景色实现分隔线
.demo_line_02{
height: 1px;
border-top: 1px solid #ddd;
text-align: center;
}
.demo_line_02 span{
position: relative;
top: -8px;
background: #fff;
padding: 0 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{
width:600px;
}
.demo_line_04{
overflow: hidden;
_zoom:;
}
.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>
.demo_line_05{
letter-spacing: -1px;
color: #ddd;
}
.demo_line_05 span{
letter-spacing:;
color: #222;
margin:0 20px;
}
优点:代码简洁
以上转自大前端:http://www.daqianduan.com/4258.html
还有一种利用fieldset标签实现的方法:
html:
<form class="form">
<fieldset class="fieldset">
<legend class="legend"><a href="#">可能感兴趣的人</a></legend>
<div class="btns">
<a href="#">更多</a><a href="#">111</a>
</div>
</fieldset>
</form>
css:
.form{ margin:10px auto; width:800px}
.fieldset{ border-width:1px 0 0; border-color:#ccc; border-style:solid; padding-left:30px;}
.legend{ padding:0 5px;}
.btns{ padding:0 5px; float:right; margin:-18px 10px 0 0; background:#fff; _position:relative }
.btns a{ border-radius:5px; border:1px solid #CCC; padding:3px 7px; margin:0 2px; background:#fff; display:inline-block;}
@
css巧妙实现分隔线的更多相关文章
- CSS巧妙实现分隔线的几种方法
单个标签实现分隔线: 点此查看实例展示 .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: ...
- 文字在线中间,CSS巧妙实现分隔线的几种方法
单个标签实现分隔线: .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: 200px so ...
- CSS实现自适应分隔线的N种方法
分割线是网页中比较常见的一类设计了,比如说知乎的更多回答 这里的自适应是指两边的横线会随着文字的个数和父级的宽度自适应 偷偷的看了一下知乎的实现,很显然是用一块白色背景覆盖的,加一点背景就露馅了 心想 ...
- 【转】CSS实现自适应分隔线的N种方法
1.伪元素+transform:translateX(-100%); 主要原理是设置文本居中text-align: center;,然后给定两个伪元素,分别绝对定位,那么此时伪元素也是跟随着水平居中的 ...
- word 中巧妙添加分隔线
- CSS多种方法实现分隔线
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title&g ...
- 巧用CSS实现分隔线
下面是几种简单实现分隔线的方法,个人比较喜欢第二种,我也给出了最后第五种比较2的写法,请大家拍砖,或者提供其他好的方法. 单个标签实现分隔线: 点此查看实例展示 .demo_line_01{ padd ...
- 如何在html中做圆角矩形和 只有右边的"分隔线"
这个网站满好的,可以常看看 css-matic中有几个很好的写css可视化的工具 其实做css 版式布局等都可以有工具的 推荐40个优秀的免费CSS工具 debugger正则表达式在线 其实是对(理论 ...
- Tips_利用padding实现高度可控的分隔线
一.实现分隔线的方法(未理解:不是说span元素垂直方向设置怕padding不影响吗?) html: <div> 登陆<span></span>注册 </di ...
随机推荐
- 【HDU】2138 How many prime numbers
http://acm.hdu.edu.cn/showproblem.php?pid=2138 题意:给n个数判断有几个素数.(每个数<=2^32) #include <cstdio> ...
- Java_cookie 和session 的区别详解
这些都是基础知识,不过有必要做深入了解.先简单介绍一下. 二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择, 都纪 ...
- 初识GO语言——安装Go语言
本文包括:1)安装Go语言.2)运行第一个Go语言.3)增加vim中对Go语言的高亮支持. 1.安装Go语言 本文采用源码安装Go语言,Go语言的源代码在百度网盘 http://pan.baidu.c ...
- jquery插件之拖拽改变元素大小
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被 ...
- iOS五种本地缓存数据方式
iOS五种本地缓存数据方式 iOS本地缓存数据方式有五种:前言 1.直接写文件方式:可以存储的对象有NSString.NSArray.NSDictionary.NSData.NSNumber,数据 ...
- 关于tag标签系统的实现
实验室的项目,需要做对用户发布的主题进行打标签的功能,纠结甚久,实现思路如下: 一.数据库表的设计 1.tag表 create table qa_tag ( tag_id int primary ke ...
- MySQL数据库基本数据类型
1.整型 2. 浮点数类型和定点数类型 3.日期与时间类型 4.字符串类型 5. 二进制类型
- div自定义的滚动条 (水平导航条)
<!DOCTYPE html> <html> <head> <title></title> <style> div{ /* wi ...
- Bootstrap carousel轮转图的使用
来自:慕课网http://www.imooc.com/code/5395 图片轮播效果在Web中常常能看到,很多人也称之为幻灯片.其主要显示的效果就是多幅图片轮回播放, 从右向左播放,鼠标悬停在图片时 ...
- 禁止北京地区IP访问站点
<script type="text/javascript" src="http://counter.sina.com.cn/ip" charset=&q ...