文档章节

文字分割线的三种方法

cobish
 cobish
发布于 2016/06/04 15:47
字数 316
阅读 1034
收藏 0

有很多网站都有这么一种实现:就一条分割线的中间有文字的显示,以下则列出三种实现方法。

第一种实现方法的思路是设置 border 和 line-height,看看以下代码:

<div class="line-1">文字分割线-1</div>

样式如下:

.line-1 {
    width: 150px;
    margin: 0 auto;
    line-height: 1px;
    text-align: center;
    border-left: 200px solid red;
    border-right: 200px solid red;
}

 

第二种实现方法则是控制 top 属性,代码如下:

<div class="line-2">
    <span>文字分割线-2</span>
</div>

样式如下:

.line-2 {
    margin: 0 auto;
    width: 550px;
    height: 1px;
    text-align: center;
    background: blue;
}

.line-2 span {
    position: relative;
    top: -13px;
    background: #f7f7f7;
    padding: 0 20px;
}

 

第三种实现方式则是利用 html 中的 fieldset 标签,具体代码如下:

<fieldset class="line-3">
    <legend>文字分割线-3</legend>
</fieldset>

样式如下:

.line-3 {
    width: 550px;
    margin: 0 auto;
    border-style: solid;
    border-width: 1px 0 0 0;
    border-color: green;
    text-align: center;
}

.line-3 legend {
    padding: 0 20px;
}

 

最后比较以下三种方法吧。第一种和第二种方法里的文字和分割线只有 1px 的高度,而第三种所占的高度是文字的高度。如果背景只是纯色的话三种方法均可,但如果是有背景图当背景的话,则第二种方式不适合。

© 著作权归作者所有

cobish
粉丝 33
博文 150
码字总数 45747
作品 0
深圳
私信 提问
HTML设置水平分割线

在Web中使用水平分割线可以分割不同的文字段落或者其它网页组件,轻松地修饰了段落排版,使之更美观。当然,水平分割线还可以更加明显地突出某一段重要的文字,使之更加醒目。 使用<hr>标签可...

qhaiyan
2015/10/14
2.1K
0
UITableVIewCell分割线样式

在使用系统自带的UITableVIewCell的时候你有没有遇到过这样的困惑呢 ? 1.如何修改cell分割线的颜色 ? 2.如何能让cell的分割线左对齐? 3.如何单独让某个cell的分割线消失? 4.既设置了 cell.i...

zh_iOS
2016/08/29
131
0
写出高效布局的一些技巧

【威哥说】当大家都在谈论Android性能的时候,总是会习惯性的说怎么才能写出简洁高效的代码呢。往往总是忽略layout布局文件,布局缓慢的渲染速度对一个app的性能影响也是很大。充满不必要的v...

磨砺营
2016/09/18
28
0
Android ItemDecoration 实现分组索引列表

我们要实现的效果主要涉及三个部分: 分组 GroupHeader 分割线 SideBar 前两个部分涉及到一个类,也是我们接下来的重点,该类是的一个抽象静态内部类,主要作用就是给的绘制额外的装饰效果,...

Othershe
2017/10/26
0
0
tableView使用的各项注意点

1.取消tableView上的分割线。 self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone; 2.设置cell的选中样式。 self.selectionStyle = .None 3. 设置cell滑动 出现 删除的按钮......

如若初见
2016/04/25
57
0

没有更多内容

加载失败,请刷新页面

加载更多

ERC-777以太坊新代币标准解读

ERC777是一个新的高级代币标准,可以视为ERC20的升级版本,因此它解决了ERC20以及ERC223存在的一些问题,开发者可以根据自己的具体需求进行选型。 1、使用ERC820进行合约注册 有别于ERC20的自...

汇智网教程
57分钟前
4
0
代理模式之JDK动态代理 — “JDK Dynamic Proxy“

动态代理的原理是什么? 所谓的动态代理,他是一个代理机制,代理机制可以看作是对调用目标的一个包装,这样我们对目标代码的调用不是直接发生的,而是通过代理完成,通过代理可以有效的让调...

code-ortaerc
今天
5
0
学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
今天
8
0
VMware vSphere的两种RDM磁盘

在VMware vSphere vCenter中创建虚拟机时,可以添加一种叫RDM的磁盘。 RDM - Raw Device Mapping,原始设备映射,那么,RDM磁盘是不是就可以称作为“原始设备映射磁盘”呢?这也是一种可以热...

大别阿郎
今天
14
0
【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部