内容生成器: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还有另外一种调用大段内容的方法, ...
随机推荐
- JMeter基础之--元件的作用域与执行顺序
前面有介绍过jmeter的元件类别,对于新手来说,jmeter的元件是还是不少的,如果我们按照每一个元件的每一个参数的含义去学习,无疑会降低学习性能测试的热情,就算我们熟悉了所有元件以及元件上的参数了 ...
- myeclipse激活时cracker2015.jar打不开
myeclipse激活时cracker2015.jar打不开 可能是jdk版本的问题 这是我用的myeclipse版本 myeclipse-2016-ci-7-offline-installer-wi ...
- Python内存数据库/引擎
1 初探 在平时的开发工作中,我们可能会有这样的需求:我们希望有一个内存数据库或者数据引擎,用比较Pythonic的方式进行数据库的操作(比如说插入和查询). 举个具体的例子,分别向数据库db中插入两 ...
- SQLSERVER 复制同一张表的递归结构
CREATE PROCEDURE [dbo].[Pro_Copy] @OLDJiFenSeriesId VARCHAR(), @NEWJiFenSeriesId VARCHAR() AS BEGIN ...
- Linux:删除程序
首先查看程序是否安装,以mariadb 为例 卸载程序 .........
- spring 官方下载地址(Spring Framework 3.2.x&Spring Framework 4.0.x)
spring官方网站改版后,建议都是通过 Maven和Gradle下载,对不使用Maven和Gradle开发项目的,下载就非常麻烦,下给出Spring Framework jar官方直接下载路径: h ...
- sql server 替换特殊符号
--create-- 去掉特殊符号alter function RepSymbol(@str nvarchar(max))returns nvarchar(max)as begin set @str= ...
- dede 二次开发系统迁移到 IIS 时会出现的问题及解决方案
1.IIS 会默认站点所有文件只读,故一开始请打开目录权限,注意赋予权限对象是 webuser 或 IIS user; 若是集群的话,则目录共享给IIS对应的用户 2.后台不能登陆 查看数据库配置文 ...
- makefile 函数集
1 if 函数 语法 $(if CONDITION,THEN-PART[,ELSE-PART]) 功能 第一个参数"CONDITION",在函数执行时忽略其前导和结尾空字符,如果包 ...
- WebStorm注册码
WebStorm注册码User Name:EMBRACE License Key:===== LICENSE BEGIN =====24718-1204201000001h6wzKLpfo3gmjJ8 ...