网页设计CSS教程：第3部分

在本教程的第2部分中，我们分析了页面上的主要HTML部分，并使用附有唯一ID的DIV标签建立了分离：

< div  id = “navigation” > ... < / div >  < div  id = “centerDoc” > ... < / div >

使用DIV（定位主要页面部分）是大多数人使用的替代方法：表格。我认为一种方法不一定比另一种更好，但是考虑到CSS是定位页面元素的“官方”方法，并且表格只能用于保存表格数据。另一方面，使用表格的时候简单得多，而CSS只是不切断它。使用我们当前的布局（左侧或右侧导航），CSS更易于使用，是一个更好的解决方案。

现在我们已经涵盖了，从这里一切都变得非常简单。我们已经建立了我们的主要文件，主要部分已经到位，我们需要做的就是添加我们的文本和图像。

打破网页：

这个页面很简单，我们只有一个标题：

< H1 >主标题< / H1 >

和一个单一的段落：

< p >     去网页设计师的杀手手册主页，并采取行动      我们将用作本教程的起始模板的HTML页面。      你可以在标题下找到它：'创建HTML页面的做法      下列：'。按照说明那里创建您的基本的HTML     网页...现在就做！ < / p >

我们在CSS代码中定义段落和标题的外观：

p （ 宽度： 80％;  }  h1 {  font-family ： Georgia ，＆quot ; Times New Roman“ ， Times ， serif ;  font-size ： 18px ;  font-weight ： bold ;  颜色： ＃000000 ;  }

这几乎是不言自明的。唯一需要提及的是我们将<p>标签的宽度设置为80％。这使我们可以在一个易于编辑的地方控制我们所有的文字宽度。

唯一缺少的页面是实际的导航。最好也是最简单的方法是使用list（<li>）标签。这是有道理的，因为导航菜单本质上是一个页面的列表。

我们用这个CSS来设计列表项标签：

li {  list-style-type ： none ;  行高： 150％;  list-style-image ： url （../images/arrowSmall.gif ）;  }

上面的代码使用图像作为列表中的项目符号，并使列出的项目之间的空间比正常大1到1.5倍（我喜欢多一点'呼吸空间'）。你不必有子弹的图像，你可以通过删除属性来让它没有图像和没有子弹：

list-style-image ： url （../images/arrowSmall.gif ）;

或者您可以使用内置的子弹选项之一：“光盘”，“圆形”和“方形”。

接下来，您应该在“主导航”标题下的导航DIV之间向HTML页面添加一个无序列表（<ul> </ ul>）：

< H2 >主导航< / H2 >  < UL >  < 李 > < 一个 HREF = “cssTutorialPage1.php” >壹< / 一 > < / 李 >  < 李 > < 一个 HREF = “cssTutorialPage2.php” >页两个< / a > < / li >  < / ul >

为了使事情变得更简单（就文章而言），更改影响列表项标记（<li>）的CSS，以便使用内置的项目符号：

li {  list-style-type ： disc ;  行高： 150％;  }

现在我们有导航！

这几乎涵盖了本教程的目标，但是我们只是抓了CSS的表面。正如你所看到的，我们创建了一个漂亮的页面，同时使用了很少的类型的HTML标签。目前页面上没有太多的文字，但是我们可以很容易地添加到页面中，将其构建为包含大量信息和图像，而实际上根本没有HTML工作！

济南网站建设概述希望这篇CSS教程对你有用，一开始可能有点难以把你的头围绕在这个主题上，但是最终你会看到你的努力将会得到回报