div+css如何编写有序列表??有序列表如何让它01..02..03..排列

html-css031

div+css如何编写有序列表??有序列表如何让它01..02..03..排列,第1张

CSS2.0没有办法自动改变为,将序列号改为01、02、03。

如果你懂得PHP或者JS,我可以再和你说怎么改变成你要的效果。

前提是你懂得点动态脚本的基础理念才可以。

你要明白,CSS不过是个定义好的样式,等着你调用的样式。

即是是XML,它现在也不能扩展到自动定义你喜欢的样式列表。

你在下面运用的是ol样式,上面却定义ul的样式,是肯定没用的。

他们是两种列表。

建议楼主把书静下心来,哪怕简单的看上两天,把基础看好,这样后,你再去尝试模仿者写些CSS样式。否则你以后写这个会遇到很问题。

nth-child可以选择单个元素,也可以实现一个范围,如:

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

</ul>

上面是一个列表

1.选择单个标签元素(指定序列的单个元素).

li:nth-child(1)

{

    color: red

}

执行上面的CSS,<li>1</li>在界面上面表现为红色

2.选择一个范围的标签元素(偶数序列的元素).

li:nth-child(2n)

{

    color: red

}

执行上面的CSS,<li>2</li><li>4</li><li>6</li>在界面上显示红色

上面的CSS还可以如下面这样写:

li:nth-child(even)

{

    color: red

}

这两个CSS都代表选择li所在的顺序为偶数位置的标签元素。

3.奇数序列的元素使用odd或者2n+1

直接上个实例吧:

第一步,打开软件Adobe Dreamweave CS6,创建一个新的HTML。

第二步,在工作区域(body)用标签 ul 和 li 输入导航的内容。

第三,编辑样式CSS。在标签<head></head>之间写入样式表。,

第四,紧接上一步。由于无线序列具有默认样式,前面的圆点(),所以先写去除默认样式的样式。样式为:ul,li { list-style:nonelist-style-type:nonepadding:0margin:0} /*清除ul,li的默认样式*/

第五,由于默认的无序列表是竖排的,所以需要为其添加浮动,同时编辑宽度和距离等样式。添加样式为:  ul li { float:leftwidth:80pxheight:30pxbackground:#900line-height:30pxtext-align:centermargin-right:2pxcolor:#fff} 效果,

第六,如果需要为导航添加链接(),同时获得鼠标滑过效果,即需要对 "a"为标签编写样式。样式为:   ul li a { display:blockheight:30pxtext-decoration:nonecolor:#fff} ul li a:hover { background:#999}

最终预览效果。

完整代码:

<html><head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>无标题文档</title>

<style>  ul,li { list-style:none list-style-type:none padding:0 margin:0} /*清除ul,li的默认样式*/  

ul li { float:leftwidth:100px height:30px background:#900 line-height:30px text-align:center margin-right:2px }  

ul li a { display:block height:30px text-decoration:none color:#fff}  ul li a:hover { background:#999}

</style></head>

<body>  <ul>       

<li><a href="#">导航一</a></li>    <li><a href="#">导航二</a></li>    <li><a href="#">导航三</a></li>    <li><a href="#">导航四</a></li>    <li><a href="#">导航五</a></li>    </ul></body></html>