第三次作业

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的简单页面</title>
<style>
body {
font-family: sans-serif;
margin: 20px;
background-color: #f5f5f5;
}
header {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
nav {
margin-top: 10px;
text-align: center;
}
nav a {
margin: 0 15px;
color: #4CAF50;
text-decoration: none;
}
main {
margin-top: 30px;
background: white;
padding: 20px;
border-radius: 5px;
}
footer {
margin-top: 40px;
text-align: center;
font-size: 0.8em;
color: #777;
}
</style>
</head>
<body>
<header>
<h1>欢迎来到我的网站</h1>
</header>

<nav>
<a href="#">首页</a>
<a href="#">关于我</a>
<a href="#">联系我</a>
</nav>

<main>
<h2>今日简介</h2>
<p>今日无事。</p>
</main>

<footer>
<p>&copy; 2025 我的简单页面</p>
</footer>
</body>
</html>

代码解释
  1. <!DOCTYPE html>：告诉浏览器使用 HTML5 标准解析页面。
  2. <html lang="zh-CN">：根标签，设置语言为简体中文。
  3. <head>：放元数据，如字符集、标题、样式。
    • <meta charset="UTF-8">：使用 UTF-8 编码，支持中文。
    • <title>：浏览器标签上显示的标题。
    • <style>：内联 CSS，给页面加简单样式。
  4. <body>：页面可见内容。
    • <header>：顶部横幅，放主标题。
    • <nav>：导航链接区。
    • <main>：主要内容区，放今日简介。
    • <footer>：页脚，放版权信息。
  5. CSS 部分：
    • 统一字体、留白、背景色。
    • 绿色用于头部和链接。
    • 圆角白色卡片效果让主体内容更突出。
posted @ 2025-07-22 23:37  青鸢..i  阅读(10)  评论(0)    收藏  举报