创建CSS布局页面(上机实训任务).pdf

在本上机实训任务中，我们将学习如何使用CSS（层叠样式表）创建布局丰富的网页。CSS是网页设计中至关重要的部分，它负责控制网页的样式、布局和呈现。以下是一些关键的知识点： 1. **创建站点和HTML页面**： 在开始布局之前，我们需要先创建一个站点并建立HTML页面。例如，可以使用Dreamweaver 8.0创建名为`index.html`的文件。在文件中，我们可以通过`<div>`标签定义不同的内容区域。如在例子中，我们创建了一个id为"header"的`<div>`，用于存放头部内容。 2. **CSS基础样式设置**： 使用CSS来设置`<div>`的样式，如颜色、背景色、高度、宽度和溢出处理等。例如，`#header`的样式设置如下： ```css #header { color: #FFFFFF; background-color: #666666; height: 100px; width: 700px; overflow: hidden; } ``` 同时，我们可以对`<div>`内的子元素进行样式调整，如`<h1>`标签的样式： ```css #header h1 { font-size: 20px; margin-left: 20px; margin-top: 20px; display: block; } ``` 3. **创建二栏式布局**： 要实现两栏布局，我们可以创建两个`<div>`，分别用id"left"和"right"标识。通过浮动和宽度设置，使它们并排显示： ```css #layout { width: 700px; } #layout #left { background-color: #8dad1f; float: left; width: 150px; } #layout #right { padding: 10px; float: left; width: 530px; } ``` 4. **设计无序列表**： 对于列表，我们可以创建一个`<ul>`标签，并用`<li>`表示列表项。同时，通过CSS清除默认样式并添加边距和边框，使列表更美观： ```css #layout #left #titlelist { margin: 0px; padding: 0px; list-style-type: none; } #layout #left #titlelist li { color: #FFFFFF; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #a3c431; } ``` 5. **创建导航栏**： 导航栏通常由一个`<ul>`和多个`<li>`组成，每个`<li>`包含一个链接`<a>`。通过浮动和块级显示，我们可以让链接横向排列： ```css #header #nav li { float: left; list-style-type: none; } #header #nav a { display: block; background-color: #999999; color: #FFFFFF; padding: 5px; margin-left: 3px; text-decoration: none; } #header #nav a:hover { background-color: #787878; } #header #nav #current { color: #666666; background-color: #FFFFFF; } ``` 在这个例子中，我们还设置了一个当前选中的链接样式`#current`。 通过这些基本步骤，我们可以创建一个具有清晰布局和导航功能的网页。在实际应用中，还可以根据需求进一步添加响应式设计、浏览器兼容性处理和其他高级CSS技巧，以确保在各种设备和浏览器上都能良好地展示网页。