css操纵UL LI 的款式详解(强烈推荐)

2021-01-20 13:13 jianzhan

拷贝编码
编码以下:

<div id="menu">
<ul>
<li><a href="#">主页</a></li>
<li class="menuDiv"></li>
<li><a href="#">blog</a></li>
<li class="menuDiv"></li>
<li><a href="#">设计方案</a></li>
<li class="menuDiv"></li>
<li><a href="#">相册</a></li>
<li class="menuDiv"></li>
<li><a href="#">论坛</a></li>
<li class="menuDiv"></li>
<li><a href="#">有关</a></li>
</ul>
</div>

CSS:

拷贝编码
编码以下:

#menu ul {list-style:none;margin:0px;}
#menu ul li {float:left;}


解释1下:

#menu ul {list-style:none;margin:0px;}
list-style:none,这1句是撤销目录前点,由于大家不必须这些点。
margin:0px,这1句是删掉UL的缩进,这样做可使全部的目录內容都不缩进。

#menu ul li {float:left;}
这里的 float:left 的上下是让內容都在同1行显示信息,因而应用了波动特性(float)。

CSS中的ul与li款式详解

ul和li目录是应用CSS合理布局网页页面经常用的元素。在CSS中,有专业操纵目录主要表现的特性,常见的有list-style-type特性、list-style-image特性、list-style-position特性和list-style特性。

  1、list-style-type特性

  list-style-type特性是用来界定li目录的新项目标记的,即目录前面的装饰。list-style-type特性是1个可承继的特性。其英语的语法构造以下:(例举1些常见的特性值)

  list-style-type:none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper-roman

  list-style-type特性的特性值有许多,在这里大家只是例举了较为常见的几个。

none:不应用新项目标记。 disc:实心圆。 circle:空心圆。 square:实心方块。 demical:阿拉伯数据。 lower-alpha:小写英文本母。 upper-alpha:大写英文本母。 lower-roman:小写罗马数据。 upper-roman:大写罗马数据。

  应用list-style-type特性的示例编码以下:

li{
list-style-type:square;}

<ul>
<li>这里是目录內容</li>
<li>这里是目录內容</li>
<li>这里是目录內容</li>
</ul>

  该款式运用到网页页面的实际效果以下图所示。

  2、list-style-image特性

  list-style-image特性用来界定应用照片替代新项目标记。它也是1个可承继特性,其英语的语法构造以下:

  list-style-image:none/url

  list-style-image特性能够取两个值:

none:沒有更换的照片。 url:要更换照片的相对路径。

  看来1段编码:

li{
list-style-image:url(images/bg03.gif);}

<ul>
<li>这里是目录內容</li>
<li>这里是目录內容</li>
<li>这里是目录內容</li>
</ul>

  实际效果以下图。

  3、list-style-position特性

  list-style-position特性,是用来界定新项目标记在目录中显示信息部位的特性。它一样是1个可承继的特性,英语的语法构造以下:

  list-style-position:inside/outside

inside:新项目标记置放在文字之内。 outside:新项目标记置放在文字之外。

  应用list-style-position特性的示比如下:

li{
list-style-type:square;
list-style-position:outside;}

<ul>
<li>这里是应用list-style-position特性值为outside的示例。请留意换行之后新项目标记的部位。</li>
<li>这里是目录內容</li>
<li>这里是目录內容</li>
</ul>

  实际效果以下图所示。

  再看来1属下性值为inside的款式。

li{
list-style-type:square;
list-style-position:inside;}

<ul>
<li>这里是应用list-style-position特性值为inside的示例。请留意换行之后新项目标记的部位。</li>
<li>这里是目录內容</li>
<li>这里是目录內容</li>
</ul>

  4、list-style特性

  list-style特性是综合性设定li款式的特性,也是1个能够承继的特性,英语的语法构造以下:

  li-style:list-style-type/list-style-image/list-style-position

  各个值的部位能够互换。例如:

li{
list-style:url(images/bg03.gif) inside;}

<ul>
<li>这里是应用list-style特性的示例。请留意换行之后新项目标记的部位。</li>
<li>这里是目录內容</li>
</ul>

  能够看1下运用到网页页面的实际效果。