随着互联网的快速发展，网站的建设逐渐成为了现代生活中不可或缺的一部分。对于许多人来说，学习如何制作一个网页，已经不再是遥不可及的梦想。特别是静态网页，它简单、直观，且具有广泛的应用场景。无论是个人博客、产品展示页面，还是小型企业官网，静态网页都能够提供稳定的解决方案。
静态网页，是指内容在服务器端生成后，直接通过浏览器呈现给用户的网页。这类网页的内容在浏览器加载后不会发生改变，用户的操作不会影响到网页的显示效果。因此，静态网页通常由HTML（超文本标记语言）和CSS（层叠样式表）构建，且不涉及数据库交互和动态脚本。对于初学者而言，静态网页制作不仅简单易学，而且是进入前端开发的基础。
我们通过一个静态网页制作实例，带你从零开始制作一个简单的网页。假设你希望制作一个个人简介页面，这个页面展示了你的个人照片、联系方式以及一些社交媒体链接。通过HTML来组织页面结构，用CSS来美化页面的样式。
第1步：创建HTML文件
我们需要创建一个HTML文件，所有网页的内容都写在这个文件中。在HTML文件中，我们会使用标签来定义网页的各个部分，比如标题、段落、图片和链接。以下是一个简单的HTML代码示例：
个人简介
欢迎来到我的个人主页
关于我
我是一个热爱编程的年轻人，目前学习前端开发，希望能在未来成为一名优秀的开发者。
联系方式
电话:123-456-7890
社交媒体
版权所有©2025我的个人主页
在这个HTML文件中，我们创建了网页的基本结构，包括：
header部分：包含页面的标题和个人照片。
section部分：分别展示关于我、联系方式、社交媒体等内容。
footer部分：展示版权信息。
值得注意的是，在标签中，我们引入了外部的CSS文件styles.css，用来定义页面的样式。我们就来看看如何通过CSS让这个页面看起来更加美观。
第2步：创建CSS文件
在HTML文件中，我们只是定义了页面的内容和结构，页面的外观则依赖于CSS。CSS控制了网页的颜色、布局、字体和排版等，帮助我们打造一个具有吸引力的界面。以下是一个简单的CSS代码示例，用来美化刚才的HTML页面：
/*styles.css*/
body{
font-family:Arial,sans-serif;
margin:0;
padding:0;
background-color:#f4f4f4;
}
header{
background-color:#333;
color:#fff;
text-align:center;
padding:20px0;
}
headerimg{
border-radius:50%;
width:150px;
height:150px;
margin-top:20px;
}
section{
padding:20px;
margin:20px;
background-color:#fff;
border-radius:8px;
box-shadow:02px4pxrgba(0,0,0,0.1);
}
h2{
color:#333;
}
ul{
list-style-type:none;
padding:0;
}
ulli{
font-size:16px;
}
a{
color:#007bff;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
footer{
background-color:#333;
color:#fff;
text-align:center;
padding:10px;
margin-top:20px;
}
通过这个CSS文件，我们为网页中的各个元素设置了样式，例如：
设置了header部分的背景色和字体颜色，使标题更加突出。
为个人照片添加了圆形的边框，并调整了大小。
设置了section部分的内边距、背景色以及阴影，使内容更加立体和清晰。
调整了ul和li标签的样式，使列表更加简洁美观。
这样，页面的外观就得到了很好的优化，整体看起来简洁而专业。
