简单网页制作成品和代码

制作一个简单的网页是一项既有趣又实用的技能，无论是为了个人展示、项目演示还是学习实践，都是一个非常不错的选择。下面，我将通过一个具体的例子，向大家展示如何制作一个简单的个人介绍网页，并附上相应的HTML和CSS代码。

一、网页成品概述

本次制作的网页是一个个人简介页面，包含个人信息、兴趣爱好和简单自我介绍三个部分。整个网页风格简约，采用了清晰的排版和柔和的色调，以便让浏览者能够轻松快速地了解个人信息。

二、HTML代码

    
    
    
    


    

        
欢迎来到我的个人空间
    
    
    

        
个人信息
        
姓名：张三
        
职业：软件工程师
        
邮箱：zhangsan@example.com
    
    

        
兴趣爱好
        

            
编程
            
阅读
            
旅行
        
    
    

        
关于我
        
我是一名充满热情的软件工程师，热爱技术，喜欢不断挑战自我，追求卓越。平时喜欢探索新的编程语言和框架，不断提升自己的技术水平。
    
    

三、CSS代码（保存为styles.css文件）

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    color: #333;
}

header {
    background-color: #4CAF50;
    color: white;
    padding: 1em 0;
    text-align: center;
}

nav ul {
    list-style-type: none;
    padding: 0;
    text-align: center;
    background-color: #333;
}

nav ul li {
    display: inline;
    margin-right: 1em;
}

nav ul li a {
    color: white;
    text-decoration: none;
    padding: 0.5em 1em;
    display: inline-block;
}

section {
    padding: 2em;
    margin: 1em auto;
    max-width: 800px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

footer {
    text-align: center;
    padding: 1em 0;
    background-color: #333;
    color: white;
}

四、制作步骤解析

1. HTML结构搭建：首先通过

   定义网页的标题部分，然后使用

2. CSS样式设计：使用外部CSS文件（styles.css）进行样式定义。设置了整体页面的字体、行高、背景色等基本属性。通过不同的选择器，分别为

   、

3. 链接与互动：在导航栏中使用了标签，通过href属性指向页面内部的不同部分（如#info、#hobbies、#about），实现了页面内部的快速跳转。