CSS中的::after ::before
利用::after和before来清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>利用::after和before来清除浮动</title>
<style>
#box::after,#box::before{
content:"";
height:;
visibility:hidden;
display:block;
clear:both;
}
h1{
width:300px;
height:300px;
background-color:#ccc;
float:left;
}
p{
width:300px;
height:300px;
background-color:#f1f1f1;
}
</style>
</head>
<body>
<div id="box">
<h1>使用clear清除浮动问题</h1>
</div>
<p>我是p标签</p>
</body>
</html>
利用::after或::before玩弄Css计数器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
list-style:none;
/* 初始化CSS计数器 并指定一个名称 我这里指定为count */
counter-reset:count;
}
ul>li{
/* 让 计数器每次自增 */
counter-increment:count;
}
ul>li::before{
/* 在页面输出 */
content:counter(count);
padding-right:20px;
}
</style>
</head>
<body>
<ul>
<li>li_1</li>
<li>li_2</li>
<li>li_3</li>
<li>li_4</li>
<li>li_5</li>
<li>li_6</li>
</ul>
</body>
</html>
页面输出效果
1 li_1
2 li_2
3 li_3
4 li_4
5 li_5
6 li_6
CSS中的::after ::before的更多相关文章
- css中的浮动与三种清除浮动的方法
说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...
- 对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
- 总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- 浅析CSS中的BFC和IFC
1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...
- CSS中一些常见的兼容性问题
CSS中一些兼容性问题就是浏览器兼容,而这些浏览器兼容问题主要是Ie和FF之间的争斗. CSS hack中的一些事: 我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样 ...
- CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...
- CSS 中关于background 属性功能
background 是 css中的核心属性,我们对他应该充分了解. background-image 定义背景图像 这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...
- css中的负边距
css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...
- CSS中不定宽块状元素的水平居中显示
CSS中不定宽块状元素的水平居中显示 慕课网上的HTML/CSS教程 http://www.imooc.com/view/9 其中有三种方法 第一种是加入table标签 任务是实现div元素的水平居中 ...
- Bootstrap.css 中请求googleapis.com/css?family 备忘录
问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open ...
随机推荐
- maven 搜索不到想从本地仓库依赖的jar包--重建本地maven仓库索引
问题:有时候本地仓库有相关的jar包,但是在pom.xml中利用工具搜索不到 菜单栏设置显示Maven Respositorise视图:Windows--Show View--Other.. (对 ...
- android ontouch事件分发机制
最近开发一个项目中,banner图左右切换和下拉刷新手势有冲突,为此去研究了事件分发,网上资料一大抄,有些讲的不对有些讲的不全,结合了网上一些博文以及源码总结如下 一个完整的触摸事件包含down,m ...
- mysql存储图片问题
1. 借鉴http://blog.chinaunix.net/uid-7374279-id-4255927.html 字段名为blob,有四种类型 TinyBlob(255B).Blob(65k).M ...
- 代写assignment
集英服务社,强于形,慧于心 集英服务社,是一家致力于优质学业设计的服务机构,为大家提供优质原创的学业解决方案.多年来,为海内外学子提供了多份原创优质的学业设计解决方案. 集英服务社,代写essay/a ...
- C++内存对齐的理解
程序编译器对结构的存储的特殊处理确实提高CPU存储变量的速度,但是有时候也带来了一些麻烦,我们也屏蔽掉变量默认的对齐方式,自己可以设定变量的对齐方式. 编译器中提供了#pragma pack(n)来设 ...
- 萝卜白菜，给有所爱——C#和JAVA都会终将被时代淘汰
看到园子里又有一波试图掀起C#和JAVA的谁更好的争论,对于这些一直不断的争论,我觉得实在没有必要,黑格尔的存在即合理,中国的老古语说的萝卜白菜各有所爱,大家争论的再多其实卵用也没用,还不如趁着闲暇时 ...
- 基于AutoCAD的ObjectARX之NET扩展(mcnetarx)-AcdbEntGet
1.AcdbEntGet用于获取实体的组码. 示例: ' 定义保存实体名称的变量 Dim ent() As Integer = New Integer() {} ' 获取最后一个实体 mcnetarx ...
- eclipse执行上一次结果
eclipse执行上一次结果,解决方法:Project-clean
- "微空间"免费空间很棒哦，很适合中小网站站长
“微空间”(www.idcbt.com)是最长久的免费云主机 现在在站长圈子里面非常火爆的“微空间”免费空间网(www.idcbt.com)犹如火山爆发一样,瞬间成为了广大站长津津乐道的免费主机空间. ...
- RHEL5.8配置开机自动挂载磁盘
Linux环境中可以通过fstab来设置自动挂载磁盘或者共享存储,操作如下: fstab配置文件路径:/etc/fstab 每行代表一个存储位置. [root@appsrv01 ~]# cat /et ...