css 步骤条

html-css024

css 步骤条,第1张

你说的应该是有序列表和无序列表。

有序列表代码:

<ol><li>步骤1</li><li>步骤2</li>

</ol>

运行效果:

1、步骤1

2、步骤2

无序列表代码:

<ul><li>步骤1</li><li>步骤2</li>

</ul>

运行效果:

·步骤1

·步骤2

解决这个问题的方法如下：

1、新建一个html文件，命名为test.html，用于讲解div+css布局的基本流程。

2、在test.html文件内，对body进行样式初始化，设置外边距margin为0，内边距padding为0，同时使用text-align设置文字居中。

3、在test.html文件内，为了讲解方便，设置所有的div高度为200px，内容的颜色为红色。

4、在test.html文件内，使用div创建网页的头部，使用margin:0 auto设置div居中，同时设置其宽度为800px，背景颜色为灰色。

5、在test.html文件内，使用div创建网页的中部，使用margin:0 auto设置div居中，同时设置其宽度为800px。

6、在test.html文件内，在网页的中部，创建两个div，用于将中部为两部分，每一个部分宽度为50%，左部分使用float:left设置左浮动，右部分使用float:right设置右浮动。

7、在test.html文件内，使用div创建网页的底部，使用clear:both清除上面div的浮动，避免影响底部的布局。同时，使用margin:0 auto设置div居中，同时设置其宽度为800px，背景颜色为#000fff。

8、在浏览器打开test.html文件，查看实现的效果，这样问题就解决了。

一、定义一个盒子（“menu”）,用来装这个导航的。

二、用无序列表（ul）中的列（li）放导航的内容。

三、把li的浮动（float）设置为向左浮动（float：left；），这样，就实现了水平导航条了。

四、在做其他的一些修饰。（下面我给我弄的一个简单的导航条给你理解）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

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

<style type="text/css">

#menu{

width:500px

margin:0 auto/*令盒子居中*/

font-size:20px /*定义字体的大小*/

}

ul{

margin:0padding:0/*把浏览器默认的间隔去掉*/

list-style:none /*把前面的序列号去掉*/

}

li{

float:left /*向左浮动，这个是实现水平的重要步骤！！*/

padding:0 15px /*li里面的字体和边框的距离*/

}

a{

text-decoration:none /*去掉超链接的下划线*/

color:#333 /*超链接的字体颜色*/

}

a:hover{

color:#696

}

</style>

</head>

<body>

<div id="menu">

<ul>

<li><a href="#">菜单1</a></li>

<li><a href="#">菜单1</a></li>

<li><a href="#">菜单1</a></li>

<li><a href="#">菜单1</a></li>

</ul>

</div>

</body>

</html>