Dreamweaver入门之更改项目符号
作者:本站整理 时间:2015-02-10
如何管理一些无序列表和有序列表中的项目符号呢?Dreamweaver CSS可以帮助我们实现。下面我们就具体来看看更改项目符号的CSS代码。
1.无序列表项目样式属性(list-style-type)
……
<style type="text/css">
.w1 { list-style-type:circle;}
.w2 { list-style-type:square;}
.w3 { list-style-type:disc ;}
</style>
……
<ul class="w1">
<li>无序列表项目1</li>
<li>无序列表项目2</li>
<li>无序列表项目3</li>
</ul>
<ul class="w2">
<li >无序列表项目1</li>
<li >无序列表项目2</li>
<li >无序列表项目3</li>
</ul>
<ul class="w3">
<li >无序列表项目1</li>
<li >无序列表项目2</li>
<li >无序列表项目3</li>
</ul>
……
2.有序列表项目样式属性
……
<style type="text/css">
.y1 { list-style-type:decimal ;}
.y2 {list-style-type:upper-roman ;}
.y3 {list-style-type:lower-roman ;}
</style>
……
<ol class="y1">
<li>有序列表项目1</li>
<li>有序列表项目1</li>
<li>有序列表项目1</li>
</ol>
<ol class="y2">
<li>有序列表项目1</li>
<li>有序列表项目1</li>
<li>有序列表项目1</li>
</ol>
<ol class="y3">
<li>有序列表项目1</li>
<li>有序列表项目1</li>
<li>有序列表项目1</li>
</ol>
……
3.用图片做列表项目符号(list-style-image)
……
<style type="text/css">
.xing { list-style-image:url(../../images/list.gif);}
</style>
……
<ul class="xing" >
<li>无序列表项目1</li>
<li>无序列表项目2</li>
<li>无序列表项目3</li>
</ul>
……
相关文章
相关推荐
-
ASP.NET Maker英文免费版 v2017.0.2
-
FotoSketcher中文版(图片素描化工具) v3.20
-
Win8codecs 2.43(视频解码器)官方版
-
有道云协作mac版 v1.1.0
-
暴风影音5 V5.54.1029.1111官方正式版(影音播放器)
-
速拓家纺管理系统辉煌版 v14.0103
-
PDFZilla(pdf格式转换器)免费版 v3.0.7
-
路由优化大师 V3.2.18.121官方版(原路由卫士)
-
PPTV网络电视电脑版 v4.0.3.0056
-
豪迪qq群发器破解版2016.12.30
-
腾讯会议个人免费版 V2.5.1.403
-
CorelDRAW X8 32位官方版 v18.0.0.448
-
新浪手游助手 V2.3.0官方版(安卓模拟器)
-
极速浏览器官方版
-
商贸财神进销存软件 2015(商贸管理专家)
-
CorelCAD2017 32位中文版 v17.0.0.1310