html+css网页制作案例

更新： 2025-02-08 11:50:17 编辑：268网络 归类： 资讯教程 人气：

案例简介

在现代互联网时代，网页制作已经成为一种基本技能。无论是个人博客还是企业官网，HTML和CSS是构建网页的基础。本文将通过一个简单的网页制作案例，帮助读者理解这两种技术是如何协同工作的。

项目需求

本项目的目标是制作一个简洁的个人介绍网页，包含个人照片、简介和联系方式。网页设计要简约大方，适合在手机和电脑端浏览。

HTML结构

首先，我们需要用HTML来创建网页的基本结构。下面是我们项目的HTML代码示例：


<!DOCTYPE html>
<html>
<head>
    <title>个人介绍</title>
    <link rel=stylesheet href=styles.css>
</head>
<body>
    <header>
        <h1>我的个人主页</h1>
    </header>
    <section>
        <h2>关于我</h2>
        <img src=myphoto.jpg alt=我的照片 style=width:200px;>
        <p>你好，我是一个热爱编程和设计的学生。</p>
    </section>
    <section>
        <h2>联系方式</h2>
        <p>邮箱：example@example.com</p>
        <p>电话：123-456-7890</p>
    </section>
    <footer>
        <p>版权所有 © 2023</p>
    </footer>
</body>
</html>

CSS样式

接下来，我们使用CSS来美化我们的网页。下面是相应的CSS代码示例：


body {
    font-family: Arial, sans-serif;
    background-color: #eaeaea;
}
header {
    background-color: #35424a;
    color: white;
    text-align: center;
    padding: 20px;
}
h1 {
    margin: 0;
}
section {
    background-color: white;
    margin: 20px;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
footer {
    text-align: center;
    padding: 10px;
}