|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。
网页制造WEB文章简介：在默许情形下，年夜多半扫瞄器城市将有序列表中的数字序列的与其列表笔墨内容显现为不异的字体。这篇疾速教程将教你怎样利用有序列表(ol)和段落(p)来计划华美的列表数字。
在默许情形下，年夜多半扫瞄器城市将有序列表中的数字序列的与其列表笔墨内容显现为不异的字体。这篇疾速教程将教你怎样利用有序列表(ol)和段落(p)来计划华美的列表数字。
预览
基础上讲，你必要做的只是为ol元素界说Georgia字体，然后为p元素(在ol内)界说Arial字体。
1.HTML源代码
创立一个有序列表，不要忘了将列表中的笔墨放在闭合的<p>标志内。<ol>
<li>
<p>Thisislineone</p>
</li>
<li>
<p>Hereislinetwo</p>
</li>
<li>
<p>Andlastline</p>
</li>
</ol>
2.ol元素
为ol元素增加款式:ol{
font:italic1emGeorgia,Times,serif;
color:#999999;
}
3.olp元素
如今为olp元素增加款式:olp{
font:normal.8emArial,Helvetica,sans-serif;
color:#000000;
}
来看看完全的预览Demo吧
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/><title>OrderedList</title><styletype="text/CSS">/*list1style*/#list1{font:italic1emGeorgia,Times,serif;color:#999999;}#list1p{font:normal.8emArial,Helvetica,sans-serif;color:#000000;}/*list2styles*/#list2{font:italic1emGeorgia,Times,serif;color:#999;list-style:lower-roman;}#list2p{font:normal.85emGeorgia,Times,serif;color:#000;}/*list3styles*/#list3{font:normal1.1emArial,Helvetica,sans-serif;color:#666;}#list3p{font:normal.7emArial,Helvetica,sans-serif;color:#000;border-left:solid1px#999;margin:0;padding:001em1em;}</style></head><body><olid="list1"><li><p>Loremipsumdolorsitamet,consectetueradipiscingelit.Nunceuismodadipiscingmagna.Quisquesollicitudinnisianisifeugiatsuscipit.Praesentmolestie.Curabiturlaoreet,augueinpharetraadipiscing,ipsumlectusblanditleo,quisviverraodiopurusegetlectus.</p></li><li><p>Crasvitaelibero.Duissedpedeideratlaoreetvarius.Utfelisest,aliquetut,dictumat,consectetuersed,ante.Maurisaliquamleoatpedepharetracondimentum.</p></li><li><p>Utarcumauris,blanditat,porttitorvel,scelerisquevitae,nunc.Vivamusconsequattellus.Vivamussedmagnauturnadictumultrices.Curabituratliberomolestieerosimperdietsemper.</p></li></ol><olid="list2"><li><p>Loremipsumdolorsitamet,consectetueradipiscingelit.Nunceuismodadipiscingmagna.Quisquesollicitudinnisianisifeugiatsuscipit.Praesentmolestie.Curabiturlaoreet,augueinpharetraadipiscing,ipsumlectusblanditleo,quisviverraodiopurusegetlectus.</p></li><li><p>Crasvitaelibero.Duissedpedeideratlaoreetvarius.Utfelisest,aliquetut,dictumat,consectetuersed,ante.Maurisaliquamleoatpedepharetracondimentum.</p></li><li><p>Utarcumauris,blanditat,porttitorvel,scelerisquevitae,nunc.Vivamusconsequattellus.Vivamussedmagnauturnadictumultrices.Curabituratliberomolestieerosimperdietsemper.</p></li></ol><olid="list3"><li><p>Loremipsumdolorsitamet,consectetueradipiscingelit.Nunceuismodadipiscingmagna.Quisquesollicitudinnisianisifeugiatsuscipit.Praesentmolestie.Curabiturlaoreet,augueinpharetraadipiscing,ipsumlectusblanditleo,quisviverraodiopurusegetlectus.</p></li><li><p>Crasvitaelibero.Duissedpedeideratlaoreetvarius.Utfelisest,aliquetut,dictumat,consectetuersed,ante.Maurisaliquamleoatpedepharetracondimentum.</p></li><li><p>Utarcumauris,blanditat,porttitorvel,scelerisquevitae,nunc.Vivamusconsequattellus.Vivamussedmagnauturnadictumultrices.Curabituratliberomolestieerosimperdietsemper.</p></li></ol></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
另外如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-16 00:02:52
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
楼主
窥视卡
雷达卡
发表于 2015-3-14 08:13:53