商品 左边分割线,使用css伪类实现,before or  after

<style>
*{
margin:;
padding:;
} .clearfix {
*zoom:;
} .clearfix:before,
.clearfix:after {
content: '';
display: block;
} .clearfix:after {
clear: both;
} dl{
border: 1px solid red;
}
dt{
float: left;
padding: 0 20px;
}
dt:before
{
content: '';
width: 1px;
height: 10px;
display: inline-block;
background-color: #FFA500;
margin-right: 5px;
}
dt:after{
content: '';
width: 1px;
height: 10px;
display: inline-block;
background-color: #FFA500;
}
dd{
background-color: yellow;
margin-left: 80px;
}
dd:before{
content: '';
width: 1px;
height: 10px;
display: inline-block;
background-color: #FFA500;
margin-right: 5px;
}
</style>
<dl class="clearfix">
<dt>计算机</dt>
<dd>托尔斯泰1</dd>
</dl>

css :before 内容左边 分割线(四)的更多相关文章

  1. css基础内容

    css基础内容 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离 ...

  2. CSS进阶内容—盒子和阴影详解

    CSS进阶内容 在学习了CSS基本知识之后,我们需要进一步了解CSS,因此写下了这篇文章 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS三大特性 首先我们先 ...

  3. CSS进阶内容—浮动和定位详解

    CSS进阶内容-浮动和定位详解 我们在学习了CSS的基本知识和盒子之后,就该了解一下网页的整体构成了 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS的三种布 ...

  4. CSS进阶内容——布局技巧和细节修饰

    CSS进阶内容--布局技巧和细节修饰 我们在之前的文章中已经掌握了CSS的大部分内容,但仍有一些内容我们没有涉略,这篇文章就是为了补充前面没有涉及的内容,为我们的知识做出补充并且介绍一些布局技巧 当然 ...

  5. Python开发【第十篇】:CSS --无内容点击-不进去(一)

    Python开发[第十篇]:CSS  --无内容点击-不进去(一)

  6. 使用CSS为内容设定特定的鼠标样式(cursor)介绍

    相信大家都知道我们的鼠标在网页中不同的元素中有不同的显示(例如 a 元素就显示为“箭头指针”),但是其实我们还可以自定义这些有趣的东西哦!今天“畅想资源”就来教大家如何使用CSS为内容设定特定的鼠标样 ...

  7. jQuery 往table添加新内容有以下四个方法:

    Query 添加新内容有以下四个方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() ...

  8. div+css隐藏内容样式方法

    div css隐藏内容样式方法     div+css隐藏内容方法 一般情况下,css隐藏的用途,如下: 1.对文本的隐藏 2.隐藏超链接(另类黑链) 3.对统计代码隐藏 4.隐藏超出图片 5.css ...

  9. 使用CSS隐藏HTML元素的四种常用方法

    CSS隐藏HTML元素的四种常用方法 1.opacity:设置opacity: 0可以使一个元素变得完全透明. 设置的透明度会被子元素继承,而且无法取消. 通常可以使用opacity属性来制作元素的淡 ...

随机推荐

  1. [可行]setoolkit生成木马软件远程控制实例

    查看原文 选1,social-ensineering attacks 选4,create a payload and listener 选2,Windows Reverse_TCP Meterpret ...

  2. iPhone Development – core data relationships tutorial part 1

    I’m going to start a short series on Core Data relationships and maybe throw in some general Core Da ...

  3. 编写高质量代码改善C#程序的157个建议——建议90:不要为抽象类提供公开的构造方法

    建议90:不要为抽象类提供公开的构造方法 首先,抽象类可以有构造方法.即使没有为抽象类指定构造方法,编译器也会为我们生成一个默认的protected的构造方法.下面是一个标准的最简单的抽象类: abs ...

  4. JavaScript执行顺序

    当JavaScript引擎解析脚本时,它会在预编译期对所有声明的变量和函数进行处理.所以,就会出现当JavaScript解释器执行下面脚本时不会报错: alert(a);                ...

  5. ExecutorService的submit方法的坑

    先看一段代码: public Future<?> submit(Runnable task) { if (task == null) throw new NullPointerExcept ...

  6. mysql中四种存储引擎的区别和选择

    前言 数据库存储引擎是数据库底层软件组织,数据库管理系统(DBMS)使用数据引擎进行创建.查询.更新和删除数据.不同的存储引擎提供不同的存储机制.索引技巧.锁定水平等功能,使用不同的存储引擎,还可以 ...

  7. ubuntu 编译安装 mod_wsgi

    在编译过程中遇到一些问题,记录下来方便别人使用. step1: 下载.windows下面会有编译好的包,Ubuntu没有需要自己编译. 地址: https://github.com/GrahamDum ...

  8. 在 LINQ to Entities 查询中无法构造实体或复杂类型“Mvc_MusicShop_diy.Models.Order”

      错误代码: var orders = db.Orders.Where(o => o.UserId == userid).Select(c => new Order {   OrderI ...

  9. 判断客户端是iOS还是Android,判断是不是在微信浏览器打开

    bool flag = false; string agent = System.Web.HttpContext.Current.Request.UserAgent.ToLower(); string ...

  10. c#设计模式系列:状态模式(State pattern)

    引言 我们在编程的时候,有时候会遇到,一个对象的行为动作会由对象的状态来决定的,也就是对象的行为是由状态来决定,如果对象的状态很多,那么也会由很多不同的行为,这时候我们一班会 if –else if- ...