内容生成器:content、计数器、多列
一,内容生成器:content
补充before和after伪类选择器:
1):将内容添加到某个选择器定义的单个或者多个元素的每一个实例之前或者之后
2)与before选择器配合使用(同理大家想下会不会有after?);
content的作用:
1,作用:在被选元素的内容前面插入内容;
2,用法:使用content属性指定要插入的内容;
3,可以设置插入内容的样式;
content的使用作用:对HTML内容修饰;
常用的值:url:添加图像;
文本;
计数器:?
二,计数器:(引导语,大家之前如果想实现给无序列表前面加序号怎么处理???使用list-style-type:的decimal值。现在呢,咱们要get一个新技能用计数器counter-reset属性实现和它相同的效果)
1),counter-reset属性:
作用:设置某个选择器出现次数的计数器的值,默认为 0。利用这个属性可以设置或重置为任何值,可以是正值或负值。如果没有提供 number,则默认为 0。
2),使用注意点:
如果使用display: none,则无法重置计数器。如果使用visibility: hidden,则可以重置计数器。
3),必须结合counter() 函数和counter-increment 属性使用
a,counter()函数:
counter() 函数用于为指定计数器创建计数字符串;
写法:语法为:counter(name) :name 为计数器的名称
b,counter-increment 属性:counter-increment:有三个值:none,id number,inherit(规定应该从父元素继承 counter-increment 属性的值) 属性设置某个选取器每次出现的计数器增量。默认增量是 1。
写法:counter-increment:id number;(id 定义将增加计数的选择器、id 或 class。
number 定义增量。number 可以是正数、零或者负数。)
demo:
HTML:
<h1>1111</h1>
<h1>2222</h1>
<h1>3333</h1>
CSS:
body{
counter-reset: demo;
}
h1:before{
content: "第" counter(demo)"章" ":";
}
h1{
counter-increment: demo;
}
三,多列:
1,(引导语:让文本呈现多列显示。我们知道,当一行文字太长时,读者读起来就比较费劲,有可能读错行或读串行;人们的视点从文本的一端移到另一端、然后换到下一行的行首,如果眼球移动浮动过大,他们的注意力就会减退,容易读不下去。所以,为了最大效率的使用大屏幕显示器,页面设计中需要限制文本的宽度,让文本按多列呈现,就像报纸上的新闻排版一样。)
2,之前换行用什么???
答:长单词换行
word-wrap : normal/break-word;
文本换行
word-break : normal/break-all/keep-all;
3,不管想让一段文本呈多少列显示,你需要的只是两个属性:column-count(列的具体个数) 和 column-width(列宽)column-gap(列之间的缝隙间隔宽度)column-rule(规定列之间的中间分割线宽度、样式和颜色规则)。
内容生成器:content、计数器、多列的更多相关文章
- css中内容生成器
一,内容生成器:content 补充before和after伪类选择器: 1):将内容添加到某个选择器定义的单个或者多个元素的每一个实例之前或者之后 2)与before选择器配合使用(同理大家想下会不 ...
- css内容生成器
一,内容生成器:content 补充before和after伪类选择器: 1):将内容添加到某个选择器定义的单个或者多个元素的每一个实例之前或者之后 2)与before选择器配合使用(同理大家想下会不 ...
- 静态内容生成器——Wyam
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:今天继续静态网站的话题,介绍我选用的一个使用.NET开发的静态内容生成器--Wyam. ...
- easyui datagrid 列的内容超出所定义的列宽时,自动换行
定义表单 nowrap="false"可以使得列中的内容超出所定义的列宽是就会自动换行pagination : true, // 当true时在DataGrid底部显示一个分页工 ...
- 电子商务(电销)平台中内容模块(Content)数据库设计明细
以下是自己在电子商务系统设计中的数据库设计经验总结,而今发表出来一起分享,如有不当,欢迎跟帖讨论~ 文章表 (article)|-- 自动编号|-- 文章标题 (title)|-- 文章类别编号 (c ...
- Confluence 6 数据库表-内容(Content)
这部分的内容描述了有关 Confluence 存储内容所使用的表格.内容是用户在 Confluence 存储和分享的信息. attachmentdata 附件文件的二进制数据.当 Confluence ...
- 深入理解 content 计数器
计数器可以说是content的重点, 因为此功能非常强大, 实用, 并且不具有可替代性, 甚至可以实现连JavaScript都不好实现的效果. 所谓css计数器效果, 就是使用CSS代码实现随元素的数 ...
- 内容提供者Content Provider
*读取联系人 StringBuilder sb = new StringBuilder(); // 1:得到中间人. ContentResolver resolver = getContentReso ...
- dede首页调用栏目内容{dedefield.content}的方法
Dedecms的功能确实很强大,但是dedecms的全局变量有字节限制,使得我们在使用dedecms制作企业站的时候,首页无法调用大段大段的企业站. 其实dedecms还有另外一种调用大段内容的方法, ...
随机推荐
- sqlalchemy 实体属性提前加载
在flask里需要给视图传送数据,肯定需要把模型的实体属性提前加载,可以使用 sqlalchemy.orm.subqueryload 或 sqlalchemy.orm.joinedload 示例: @ ...
- Oracle虚拟索引,大表或生产环境下预估索引效果的好东西
在数据库优化过程中,索引的重要性是不言而喻的,但是在我们进行性能调整过程中, 一个索引是否能够被使用到,在索引创建之前是存在不确定性的. 而创建索引又是一个代价很高的操作,尤其是数据量很大的情况下,在 ...
- RegOpenKeyEx和RegSetValueEx返回ERROR_SUCCESS,但注册表未发生变化。
win7 x64,需要open的时候加上KEY_WOW64_64KEY. lRet = RegOpenKeyEx(HKEY_LOCAL_MACHINE, "Software\\Microso ...
- Python之import
今天写了一个很简单的111.py文件(模块),用命令行直接import 111报错:syntaxerror:invalid systax 从网上查了一下,原因有如下集中: 1,所导入模块没有sys.p ...
- Android 贝塞尔曲线库
最近做的一个小项目需要绘制一些折线图,AChartEngine其实里面包含很多图,虽然是开源的,但毕竟不是自己写的,而且项目稍有点庞大,有些东西修改起来还是得花点时间的,所以最后打算自己写一个,参考了 ...
- React JSX语法说明
原文:http://my.oschina.net/leogao0816/blog/379487 什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代 ...
- Python基础(二)之list
列表:用[]表示 常用方法: list.append,list.insert,list.remove,list.pop,list.count,list.sort,list.reverse,list.i ...
- 1、Android Studio集成极光推送(Jpush) 报错 java.lang.UnsatisfiedLinkError: cn.jpush.android.service.PushProtoco
Android studio 集成极光推送(Jpush) (华为手机)报错, E/JPush: [JPushGlobal] Get sdk version fail![获取sdk版本失败!] W/Sy ...
- Java生成XML文件
我们在数据库中的数据可以将其提取出来生成XML文件,方便传输.例如数据库中有Admin这张表: 我们写一个java类表示admin数据: package xmlDom.vo; import java. ...
- Python 之 threading
创建多线程常用的三种方法: 创建Thread的实例,传给它一个函数 创建Thread的实例,传给它一个可调用的类实例(不推荐) 派生Thread的子类,并创建子类的实例(推荐) 创建Thread的实例 ...