分割线：

让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. 洛谷P1970 [NOIP2013提高组Day2T2] 花匠

    P1970 花匠 题目描述 花匠栋栋种了一排花,每株花都有自己的高度.花儿越长越大,也越来越挤.栋栋决定 把这排中的一部分花移走,将剩下的留在原地,使得剩下的花能有空间长大,同时,栋栋希 望剩下的花排 ...

  2. 洛谷P1855 榨取kkksc03 [2017年4月计划 动态规划 09]

    P1855 榨取kkksc03 题目描述 洛谷的运营组决定,如果一名oier向他的教练推荐洛谷,并能够成功的使用(成功使用的定义是:该团队有20个或以上的成员,上传10道以上的私有题目,布置过一次作业 ...

  3. 洛谷 3398 仓鼠找sugar——树链剖分

    题目:https://www.luogu.org/problemnew/show/P3398 原来只要把值记录成第几次就行了. 别忘了while(top[a]!=top[b])之后还要走一步. #in ...

  4. Vue--使用watch、computed、filter方法来监控

    watch与computed.filter: watch:监控已有属性,一旦属性发生了改变就去自动调用对应的方法 computed:监控已有的属性,一旦属性的依赖发生了改变,就去自动调用对应的方法 f ...

  5. JRE System Library、Referenced Libraries、Web App Libraries的含义

    JRE System Library.Referenced Libraries.Web App Libraries 这三个都是jar包的存放集合. JRE System Library:指Java S ...

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

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

  7. $.ajax中contentType: “application/json” 的用法

    不使用contentType: “application/json”则data可以是对象 $.ajax({ url: actionurl, type: "POST", datTyp ...

  8. RapidMiner Studio 入门

    http://docs.rapidminer.com/studio/getting-started/ RapidMiner Studio 入门 FEIFEI MA 2015-12-07RAPIDMIN ...

  9. IO-01. 表格输出

    本题要求编写程序,按照规定格式输出表格. 输入格式: 本题目没有输入. 输出格式: 要求严格按照给出的格式输出下列表格: ------------------------------------Pro ...

  10. LeetCode169 Majority Element, LintCode47 Majority Number II, LeetCode229 Majority Element II, LintCode48 Majority Number III

    LeetCode169. Majority Element Given an array of size n, find the majority element. The majority elem ...