分割线：

让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. tp5.1 本地正常, 线上route.php不起作用的问题

    由于本项目 的.htaccess文件是放在根目录的, 上传没有覆盖,重新编辑 <IfModule mod_rewrite.c> Options +FollowSymlinks -Multi ...

  2. js实现HashTable

    1.哈希表使用键值对进行的数据储存,在数据的存储位置和它的关键字之间建立一一对应的关系,从而使关键字和结构中的一个唯一的存储位置相对应,所以在检索数据时 只需要根据这个关系便可以快速定位到要找的数据. ...

  3. WCF 无管理员权限下启用服务

    1 使用 netsh.exe 工具 C:\Windows\system32>netsh http add urlacl url=http://+:8733/WcfServiceLibrary1 ...

  4. Lavavel 程序报错 MassAssignmentException in Model.php line 452: _token

    Lavarel 用类似于下面命令插入数据时候出错 Comment::create($request->all()) 错误页面截图如下: 错误原因:下面这行代码应该写到对应的Model里面,而不是 ...

  5. 【JZOJ5064】【GDOI2017第二轮模拟day2】友好城市 Kosarajo算法+bitset+ST表+分块

    题面 在Byteland 一共有n 座城市,编号依次为1 到n,这些城市之间通过m 条单向公路连接. 对于两座不同的城市a 和b,如果a 能通过这些单向道路直接或间接到达b,且b 也能如此到达a,那么 ...

  6. 笔试面试记录-字符串转换成整型数等（aatoi,itoa）

    C语言中经常用到字符串与数字之间的相互转换,常见的此类库函数有atof(字符串转换成浮点数).atoi(字符串转换成整型数).atol(字符串转换成长整形).itoa(整型数转换成字符串).ltoa( ...

  7. 洛谷 P2955 [USACO09OCT]奇数偶数Even? Odd?【字符串/易错】

    题目描述 Bessie's cruel second grade teacher has assigned a list of N (1 <= N <= 100) positive int ...

  8. SimpleDateFormat 以及java8 - DateTimeFormatter

    https://www.cnblogs.com/zhisheng/p/9206758.html 在看的过程中有这么一条: [强制]SimpleDateFormat 是线程不安全的类,一般不要定义为 s ...

  9. NOIP模拟 17.8.17

    NOIP模拟17.8.17 A 小 G 的字符串文件名 输入文件 输出文件 时间限制 空间限制str.pas/c/cpp str.in str.out 1s 128MB[题目描述]有一天,小 L 给小 ...

  10. Pod在多可用区worker节点上的高可用部署

    一. 需求分析 当前kubernetes集群中的worker节点可以支持添加多可用区中的ECS,这种部署方式的目的是可以让一个应用的多个pod(至少两个)能够分布在不同的可用区,起码不能分布在同一个可 ...