menu
more_vert
CSS2-3常见的demo列子总结二

作者:dayu







可以看到,在前面插入了一个图片。



浏览器支持程度:firefox,chrome,safari,opera,IE8+等浏览器。



2. 使用content属性来插入项目编号


<元素>: before {content:counter(计算器名)}



并且需要在元素的样式中追加对元素的counter-increment属性的指定。



注意:计数器名可以任意写,但是counter-increment指定的名字要相同。



如下代码:

<h1>我想解决单身问题</h1>
<p>可惜我不帅...没有女孩喜欢我....</p>
<h1>我想解决单身问题</h1>
<p>可惜我不帅...没有女孩喜欢我....</p>
<h1>我想解决单身问题</h1>
<p>可惜我不帅...没有女孩喜欢我....</p>



Css代码如下:

h1:before{content:counter(mycounter)".";}
h1{counter-increment:mycounter;}



效果如下:

技术分享





浏览器支持程度:ie8+,chorme,firefox等;



3. 在项目编号中追加文字;


HTML代码还是如上



css代码如下:

h1:before{content:"第"counter(mycounter)"章"".";}
h1{counter-increment:mycounter;}



效果如下:

技术分享





我们还可以指定编号的样式,我想让颜色变为红色,字体大小为18px,如下代码:



h1:before{content:"第"counter(mycounter)"章"".";color:red;font-size:18px;}

h1{counter-increment:mycounter;}



效果如下:

技术分享





指定编号种类



使用before选择器或者after选择器中的content属性,我们不仅可以追加数字编号,我们还可以追加字母编号或者罗马数字编号,如下方法指定:



content: counter(计算器名,编号种类)



比如指定大写字母编号时,使用”upper-alpha”属性,指定大写罗马字母时,使用”upper-roman”属性。



如下css代码:

h1:before{content:counter(mycounter,upper-alpha);color:red;font-size:36px;}
h1{counter-increment:mycounter;}
p:before{content:counter(longen,upper-roman);color:blue;font-size:36px;}
p{counter-increment:longen;}



效果如下:

技术分享



编号嵌套:



可以在大编号中嵌套中编号,可以在中编号中嵌套小编号。如下代码:

<h1>我想解决单身问题</h1>
<h2>可惜我不帅...没有女孩喜欢我....</h2>
<h2>我想解决单身问题</h2>
<h1>可惜我不帅...没有女孩喜欢我....</h1>
<h2>我想解决单身问题</h2>
<h2>可惜我不帅...没有女孩喜欢我....</h2>



Css代码如下:

h1:before{content:counter(mycounter)".";}
h1{counter-increment:mycounter;}

h2:before{content:counter(longen);}
h2{counter-increment:longen;margin-left:40px;}



效果如下:

技术分享



在上面代码中,6个中标题的编号是连续的,如果要将第二个大标题里中标题重新开始编号的话,需要在大标题中使用counter-reset属性将中编号进行重置。如下代码:


h1:before{content:counter(mycounter)".";}
h1{counter-increment:mycounter;counter-reset:longen;}

h2:before{content:counter(longen);}
h2{counter-increment:longen;margin-left:40px;}



如下效果:

技术分享



我们再来看一个复杂一点的多层嵌入的demo,如下:

<h1>大标题</h1>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>

<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>

<h1>大标题</h1>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>

<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>



CSS代码如下:

h1:before{content:counter(mycounter)".";}
h1{counter-increment:mycounter;counter-reset:subcounter;}

h2:before{content:counter(mycounter) ‘-‘ counter(subcounter)‘.‘;}
h2{counter-increment:subcounter;counter-reset:subsubcounter;margin-left:40px;color:red;}
h3:before{content:counter(mycounter) ‘-‘ counter(subcounter) ‘-‘ counter(subsubcounter) ‘.‘;}
h3{counter-increment:subsubcounter;margin-left:40px;color:blue;}



效果如下:

技术分享





在字符串两边添加嵌套文字符号



可以使用content属性的open-quote属性值与close-quote属性值在字符串两边添加如:括号,单引号,双引号之类的嵌套文字符号,open-quote属性值用于添加开始的嵌套文字符号,close-quote属性值用于添加结尾的嵌套文字符号。



<h1>括号</h1>
<h2>双引号</h2>
<h3>单引号</h3>



Css代码:

h1:before{content:open-quote;}
h1:after{content:close-quote;}
h1{quotes:"(" ")"}

h2:before{content:open-quote;}
h2:after{content:close-quote;}
h2{quotes:"\"" "\""}

h3:before{content:open-quote;}
h3:after{content:close-quote;}
h3{quotes:‘\‘‘ ‘\‘‘}



截图如下:

技术分享





其中双引号和单引号需要使用转义字符 “\”进行转义。



本文转自:http://www.f-z.cn/id/290

CSS2-3常见的demo列子总结二

原文地址:http://www.cnblogs.com/fenzhen/p/7199721.html



Processed Time:0.30306506156921

_REQUEST:
Array
(
    [0] => read
    [1] => 95773
)
_SESSION:
Array
(
    [fid] => 4
)