css内容多栏Word格式.docx
《css内容多栏Word格式.docx》由会员分享，可在线阅读，更多相关《css内容多栏Word格式.docx（44页珍藏版）》请在冰豆网上搜索。
content：
normal|none|[<
attr>
|<
url>
string>
|counter（name）|counter（name,list-style-type）|counters（name,string）|counters（name,string,list-style-type）|no-close-quote|no-open-quote|close-quote|open-quote]+
默认值：
normal
取值：
normal：
默认值。
表现与none值相同
none：
不生成任何值。
<
：
插入标签属性值
使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）
插入字符串
counter（name）：
使用已命名的计数器
counter（name,list-style-type）：
使用已命名的计数器并遵从指定的list-style-type属性
counters（name,string）：
使用所有已命名的计数器
counters（name,string,list-style-type）：
使用所有已命名的计数器并遵从指定的list-style-type属性
no-close-quote：
并不插入quotes属性的后标记。
但增加其嵌套级别
no-open-quote：
并不插入quotes属性的前标记。
但减少其嵌套级别
close-quote：
插入quotes属性的后标记
open-quote：
插入quotes属性的前标记
-->
style>
.stringp:
after{
margin-left:
-16px;
background:
#fff;
content:
"
是"
;
color:
#f00;
}
.attrp:
attr（title）;
.urlp:
before{
url（skin/flower4.jpg）;
.testol{
margin:
16px0;
padding:
0;
list-style:
none;
.counter1li{
counter-increment:
testname;
.counter1li:
counter（testname）;
font-family:
georgia,serif,sans-serif;
.counter2li{
testname2;
.counter2li:
counter（testname2,lower-roman）;
.counter3olol{
00028px;
.counter3li{
2px0;
testname3;
.counter3li:
counter（testname3,decimal）"
."
.counter3lili{
testname4;
.counter3lili:
counter（testname4,decimal）"
.counter3lilili{
testname5;
.counter3lilili:
counter（testname5,decimal）"
/style>
/head>
body>
ulclass="
test"
<
liclass="
string"
strong>
string：
/strong>
p>
你的浏览器是否支持content属性：
否<
/p>
/li>
attr"
attr：
ptitle="
如果你看到我则说明你目前使用的浏览器支持content属性"
url"
url（）：
如果你看到文字前面的图标则说明你目前使用的浏览器支持content属性<
counter1"
counter（name）：
ol>
<
li>
列表项<
/ol>
counter2"
counter（name,list-style-type）：
counter3"
counter（name）拓展应用：
列表项
<
<
<
<
/ul>
/body>
/html>
2increment
content-increment<
.testlili:
counter（testname）"
testname22;
counter（testname2）"
testname3-1;
counter（testname3）"
默认时的计数器：
修改计数器每次增加的值为2：
修改计数器每次增加的值为-1：
3reset
content-reset<
counter-reset:
testname220;
默认时被复位的计数器：
将计算器复位为20：
将计算器复位为-1：
4检索对象是否多行
column-break-after<
设置或检索对象之后是否断行。
column-break-after：
auto|always|avoid|left|right|page|column|avoid-page|avoid-column
auto
auto：
既不强迫也不禁止在元素之后断行并产生新列
always：
总是在元素之后断行并产生新列
avoid：
避免在元素之后断行并产生新列
body{
font:
14px/1.5georgia,serif,sans-serif;
.testp,
.testdiv{
5px10px;
#eee;
h1{
10px0;
font-size:
16px;
.test{
width:
600px;
border:
10pxsolid#000;
-moz-column-count:
4;
-moz-column-gap:
20px;
-moz-column-rule:
3pxsolid#090;
-webkit-column-count:
-webkit-column-gap:
-webkit-column-rule:
column-count:
column-gap:
column-rule:
-moz-column-break-after:
always;
-webkit-column-break-after:
column-break-after:
h1>
column-break-after:
always<
/h1>
divclass="
Thismoduledescribesmulti-columnlayoutinCSS.Byusingfunctionalitydescribedinthisdocument,stylesheetscandeclarethatthecontentofanelementistobelaidoutinmultiplecolumns.<
div>
不管本列有没有填满，后面新建一列<
/div>
5对象之前是否断行
column-break-before<
设置或检索对象之前是否断行。
column-break-before：
既不强迫也不禁止在元素之前断行并产生新列
总是在元素之前断行并产生新列
避免在元素之前断行并产生新列
1pxsolid#090;
-moz-column-break-before:
-webkit-column-break-before:
column-break-before:
column-break-before:
不管上一列有没有填满，我都另起一列<
html>
UTF-8"
设置或检索对象内部是否断行。
column-break-inside：
auto|avoid|avoid-page|avoid-column
既不强迫也不禁止在元素内部断行并产生新列
避免在元素内部断行并产生新列
6检索对象的列数
u
升级会员 