本作品展示了利用HTML和CSS技术构建的精美网页设计。页面布局合理、色彩搭配和谐，展现了网页设计的专业水准与创意。
本教程详细介绍了如何使用HTML和CSS创建一个简单的网页，并涵盖了网页的基本结构和样式设计。通过本教程的学习，读者可以掌握设计网页的头部、导航栏、主内容区以及脚部的方法，并学会运用CSS进行相应的样式设置。无论您是前端开发的新手还是有一定经验的专业人士，都可以从中学到实用的知识和技术。
### HTML与CSS网页制作知识点详解
#### 一、项目背景及目标
在数字化的时代背景下，掌握HTML和CSS等前端技术对于构建美观且功能强大的网站至关重要。本次教程旨在为初学者以及有经验的开发者提供一份全面的指南，帮助大家了解如何使用HTML与CSS来创建一个简洁而实用的网页。无论您是对此感兴趣的爱好者还是希望提升技能的专业人士，这份教程都将为您提供有价值的指导。
#### 二、基础知识介绍
1. **HTML**（HyperText Markup Language）：一种标记语言，用于构建网页的基本结构。
2. **CSS**（Cascading Style Sheets）：一种样式表语言，用于定义网页元素的布局和外观。
#### 三、项目概述
我们将创建一个包含以下几个主要部分的简单网页：
- **头部（Header）**：显示网站名称或标语。
- **导航栏（Navigation）**：包括网站的主要链接。
- **主内容区（Main Content）**：展示核心信息或服务。
- **脚部（Footer）**：通常含有版权信息和联系方式等。
#### 四、HTML文件详解
##### 1. 文档类型声明
```html
```
此行告知浏览器这是一个HTML5文档。
##### 2. 根标签 ``
这是HTML文档的根元素，用于包裹整个文档。
```html
```
`lang` 属性指定了文档的语言为简体中文。
##### 3. `` 部分
包含元数据和其他不直接显示在页面上的信息。
- **字符集 ``**：设置文档的字符编码为UTF-8。
- **视口 ``**：确保页面在不同设备上正确显示。
- **标题 `
我的简单网页<title>`**：设置浏览器标签页的标题。
- **外部样式表 `<link rel=stylesheet href=styles.css>`**：引用外部的CSS文件。
##### 4. `<body>` 部分
包含实际显示在页面上的内容。
- **头部 `<header>`**：通常用于展示网站名称或标语。
- **导航栏 `<nav>`**：包括网站的主要链接。
- **主内容区 `<main>`**：用于展示核心信息或服务。
- **脚部 `<footer>`**：通常含有版权信息和联系方式等。
#### 五、CSS文件详解
##### 1. 通用样式重置
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
```
这段代码重置了所有元素的外边距和内边距，并设置了`box-sizing`属性为`border-box`，使得元素宽度包含内边距和边框。
##### 2. 元素样式定义
- **字体样式 `body`**：
```css
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
}
```
- **头部样式 `header`**：
```css
header {
background: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
```
- **导航栏样式 `nav`**：
```css
nav {
background: #444;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
```
- **主内容区样式 `main`**：
```css
main {
padding: 20px;
background: #fff;
margin: 20px auto;
max-width: 800px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
section {
margin-bottom: 20px;
}
section h2 {
margin-bottom: 10px;
}
```
- **脚部样式 `footer`**：
```css
footer {
background: #333;
color: #fff;
text-align: center;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
}
```
#### 六
</div><!---->
</div>
</li>
<li data-v-abd0b829=""
class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle"
style="cursor: pointer;">
<div data-v-abd0b829=""
class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize">
<svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55"
height="110">
<path data-v-abd0b829=""
d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z"
p-id="26447" fill="#707070"></path>
<path data-v-abd0b829=""
d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z"
p-id="26448" fill="#707070"></path>
</svg>
</div>
<div data-v-abd0b829=""
class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden">
<a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..."
title="<span style=color: #f73131>网</span><span style=color: #f73131>页</span><span style=color: #f73131>设</span><span style=color: #f73131>计</span>作业完<span style=color: #f73131>成</span><span style=color: #f73131>品</span>"
href="https://d.itadn.com/i0_69231118256/B/1193892" target="_blank"><span style=color: #f73131>网</span><span style=color: #f73131>页</span><span style=color: #f73131>设</span><span style=color: #f73131>计</span>作业完<span style=color: #f73131>成</span><span style=color: #f73131>品</span></a>
</div>
<div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span
data-v-abd0b829="" class="onestyle">优质</span></div>
<div data-v-abd0b829=""
class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white">
<div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ...">
本作品为课程结束时的网页设计作业成品，集成了HTML, CSS与JavaScript等技术，旨在展示个人的设计理念和技术能力。
完整的网页设计作品，您可以放心使用。
</div><!---->
</div>
</li>
<li data-v-abd0b829=""
class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle"
style="cursor: pointer;">
<div data-v-abd0b829=""
class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize">
<svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55"
height="110">
<path data-v-abd0b829=""
d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z"
p-id="26447" fill="#707070"></path>
<path data-v-abd0b829=""
d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z"
p-id="26448" fill="#707070"></path>
</svg>
</div>
<div data-v-abd0b829=""
class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden">
<a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..."
title="<span style=color: #f73131>网</span><span style=color: #f73131>页</span><span style=color: #f73131>设</span><span style=color: #f73131>计</span>与制作 完<span style=color: #f73131>成</span><span style=color: #f73131>品</span>"
href="https://d.itadn.com/i0_97461966873/B/356593" target="_blank"><span style=color: #f73131>网</span><span style=color: #f73131>页</span><span style=color: #f73131>设</span><span style=color: #f73131>计</span>与制作 完<span style=color: #f73131>成</span><span style=color: #f73131>品</span></a>
</div>
<div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span
data-v-abd0b829="" class="onestyle">优质</span></div>
<div data-v-abd0b829=""
class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white">
<div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ...">
《网页设计与制作》是一本全面介绍如何创建精美实用网站的指南书，通过实际案例教授读者掌握最新的网页设计理念和工具。
网页设计与制作 小猫咪完整版 选修课 活泼可爱
</div><!---->
</div>
</li>
<li data-v-abd0b829=""
class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle"
style="cursor: pointer;">
<div data-v-abd0b829=""
class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize">
<svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55"
height="110">
<path data-v-abd0b829=""
d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z"
p-id="26447" fill="#707070"></path>
<path data-v-abd0b829=""
d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z"
p-id="26448" fill="#707070"></path>
</svg>
</div>
<div data-v-abd0b829=""
class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden">
<a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..."
title="学生Dreamweaver<span style=color: #f73131>网</span><span style=color: #f73131>页</span><span style=color: #f73131>设</span><span style=color: #f73131>计</span>作业完<span style=color: #f73131>成</span><span style=color: #f73131>品</span>"
href="https://d.itadn.com/i0_22980070613/B/4023" target="_blank">学生Dreamweaver<span style=color: #f73131>网</span><span style=color: #f73131>页</span><span style=color: #f73131>设</span><span style=color: #f73131>计</span>作业完<span style=color: #f73131>成</span><span style=color: #f73131>品</span></a>
</div>
<div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span
data-v-abd0b829="" class="onestyle">优质</span></div>
<div data-v-abd0b829=""
class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white">
<div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ...">
这是一份由学生独立完成的Dreamweaver网页设计课程作业，展示了基本网页布局、CSS样式应用及JavaScript交互效果等技能。
学生完成的Dreamweaver网页设计作业采用HTML+CSS布局，是一个不错的学习案例和源代码参考，希望能对大家有所帮助。
</div><!---->
</div>
</li>
<li data-v-abd0b829=""
class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle"
style="cursor: pointer;">
<div data-v-abd0b829=""
class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize">
<svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55"
height="110">
<path data-v-abd0b829=""
d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z"
p-id="26447" fill="#707070"></path>
<path data-v-abd0b829=""
d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z"
p-id="26448" fill="#707070"></path>
</svg>
</div>
<div data-v-abd0b829=""
class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden">
<a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..."
title="Web前端<span style=color: #f73131>网</span><span style=color: #f73131>页</span><span style=color: #f73131>设</span><span style=color: #f73131>计</span><span style=color: #f73131>成</span><span style=color: #f73131>品</span>（自制）.rar"
href="https://d.itadn.com/i0_66240975933/B/34553" target="_blank">Web前端<span style=color: #f73131>网</span><span style=color: #f73131>页</span><span style=color: #f73131>设</span><span style=color: #f73131>计</span><span style=color: #f73131>成</span><span style=color: #f73131>品</span>（自制）.rar</a>
</div>
<div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span
data-v-abd0b829="" class="onestyle">优质</span></div>
<div data-v-abd0b829=""
class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white">
<div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ...">
该文件包含一系列由作者自主完成的Web前端网页设计作品。内含多种风格和功能的网页成品，展示了设计师在布局、交互和视觉效果方面的创新与技术能力。
纯静态网页！无后台！一个多肉植物的网站，包含十一个页面，代码简单易懂，可以使用Dreamweaver进行编辑。
</div><!---->
</div>
</li>
</body>
</html>
5星
