分割线:

让span中的文字覆盖分割线,需要:给div和span设置同样的background-color,并且给span设置z-index。

接下来就是margin和padding的调整了。

效果:

代码:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:300px;
height: 20px;
background-color:#FFFFFF;
text-align: center;
position: relative;
}
div:after {
content: "";
width: 100%;
height: 1px;
background-color: red;
position: absolute;
top: 50%;
left: 0;
}
div span {
z-index:1;
position: relative;
background-color:#FFFFFF;
padding:0 5px;
}
</style>
</head>
<body>
<div class="hot">
<span>茶品营销</span>
</div>
</body>
</html>

分割线一

分隔线:

效果:

代码:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.range {
width: 500px; /*这里不设置div的高度,下边用padding来显示高度*/
background: rgba(0, 0, 0, 0.6);
position:absolute;
}
.range a {
text-decoration: none;
float: left;
text-align: center;
width: 50%;
display: inline-block;
padding: 10px 0; /*设置padding用来撑高盒子的高度*/
color: #fff;
}
.range:after {
content: "";
width: 1px;
height: 70%;
background-color: #fff;
position: absolute;
left: 50%;
top: 5px; /*div的高度是10px,取一半的值*/
}
</style>
</head>
<body>
<div class="range">
<a href=" ">优惠幅度6.8折</a>
<a href=" ">已有999人购买</a>
</div>
</body>
</html>

分隔线

:after选择器-----分割线的更多相关文章

  1. Css3:选择器、字体和颜色样式

    1.私有前缀及其用法 在CSS3模块标准尚未被W3C批准或者标准所提议的特性尚未被浏览器完全实现时,浏览器厂商会使用所谓的私有前缀来测试“试验性的”CSS特性.看看CSS3中实现圆角的代码: .rou ...

  2. jQuery选择器。 5.21 《深夜还在编码的你》

    (之所以字体弄那么大是因为省眼,程序员不容易,程序员的眼睛更不容易,请保护我们的眼睛) 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器. 熟练地使用选 ...

  3. 《CSS3实战》读书笔记 第三章:选择器:样式实现的标记

    第三章:选择器:样式实现的标记 选择器的魔力在于,让你完全实现对网页样式的掌控.不同的选择器可以用在不同的情况下使用.总之把握的原则是:规范的编码,根据合理地使用选择器,比去背选择器的定义有价值的多. ...

  4. HTML 表单 选择器

    表单元素 每个表单都对应一个<form></form>标签    表单内所有元素都写在 <form></form>里面: 1.最重要的属性 <fo ...

  5. xib连线出错,模型保存cell状态(最后个Cell隐藏分割线),

    一个.m文件中有好几个cell类,拖线,要看看该控件对应的是哪个类,否则点击事件不响应,因为归属的xib错了 拖不过来线,因为是view拖不动,加了个button就行了   使用模型属性记录是否隐藏c ...

  6. 仿照微信的效果,实现了一个支持多选、选原图和视频的图片选择器,适配了iOS6-9系统,3行代码即可集成.

    提示:如果你发现了Bug,请尝试更新到最新版.目前最新版是1.6.4,此前的版本或多或少存在一些bug的~如果你已经是最新版了,请留一条评论,我看到了会尽快处理和修复哈~ 关于升级iOS10和Xcdo ...

  7. 【jQuery基础学习】01 jQuery选择器

    关于CSS选择器 jQuery选择器涉及到CSS,CSS技术使得网页的结构与表现样式完全分离. 同样CSS也需要找到某个网页的结构才能改变其样式,这就是CSS选择器. 常用的CSS选择器如下: 标签选 ...

  8. Android NumberPicker和DatePicker分割线颜色设置

    NumberPicker /** * * 设置选择器的分割线颜色 * * @param numberPicker */ private void setDatePickerDividerColor(N ...

  9. listview去掉条目间的分割线

    未去掉前: 去掉后: java代码可以这么写: 1          listView.setDivider(null);//去掉条目间的分割线 PS:ListView的几个常用操作 listView ...

随机推荐

  1. Spring Boot Redis 集成配置(转)

    Spring Boot Redis 集成配置 .embody{ padding:10px 10px 10px; margin:0 -20px; border-bottom:solid 1px #ede ...

  2. day37 08-Hibernate的反向工程

    反向工程:先创建表,创建好表之后,就是持久化类和映射文件可以不用你写,而且你的DAO它也可以帮你生成.但是它生成的DAO可能会多很多的方法.你可以不用那么多方法,但是它里面提供了这种的.用hibern ...

  3. Laravel 5.2 使用 JWT 完成多用户认证 | Laravel China 社区 - 高品质的 Laravel 开发者社区 - Powered by PHPHub

    Json Web Token# JWT代表Json Web Token.JWT能有效地进行身份验证并连接前后端. 降地耦合性,取代session,进一步实现前后端分离 减少服务器的压力 可以很简单的实 ...

  4. 【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人(详解步骤)

    [二次元的CSS]—— 用 DIV + CSS3 画咸蛋超人(详解步骤) 2016-05-17 HTML5cn 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的 ...

  5. 2018.8.10 提高B组模拟赛

    T1 阶乘 Time Limits: 1000 ms Memory Limits: 262144 KB Detailed Limits Goto ProblemSet Description 有n个正 ...

  6. HDU - 1724 Ellipse 自适应辛普森模板

    OJ 题解传送门 //Achen #include<algorithm> #include<iostream> #include<cstring> #include ...

  7. 26718汉字,gbk是23940个汉字,gb18030有76556个汉字

    1 a 厑 吖 呵 啊 嗄 嬶 腌 錒 锕 阿 仰 卬 岇 昂 昻 枊 盎 肮 腌 軮 醠 雵 骯 侒 俺 儑 匎 匼 厂 厈 唵 啽 垵 埯 堓 媕 安 屵 岸 峎 峖 广 庵 按 揞 晻 暗 案 ...

  8. 数据库Mysql监控及优化

    在做 性能测试的时候数据最重要,数据来源于哪里呢,当然是数据库了,数据库中,我们可以知道,数据从磁盘中要比从缓存中读取数据的时间要慢的多的多,还可以知道,同样的一个sql语句,执行的效率也不一样,这是 ...

  9. 移动端适配之二:visual viewport、layout viewport和ideal viewport介绍

    上一篇博文,可算把像素这个东西讲清楚了.在这篇博文里面,将继续介绍viewport相关的内容. 很多博客都会提到PPK所讲的三个viewport,有的讲的比较复杂,看的云里雾里,我这里也大概介绍一下, ...

  10. 【JZOJ3854】【NOIP2014八校联考第2场第2试9.28】分组(group)

    MEi Bsny所在的精灵社区有n个居民,每个居民有一定的地位和年龄,ri表示第i个人的地位,ai表示第i个人的年龄. 最近社区里要举行活动,要求几个人分成一个小组,小组中必须要有一个队长,要成为队长 ...