HTML + CSS 实践1

Hello,小伙伴们

这是一个十分精美的网站,可以拿着它去制作一些个人网站

index.html

html 复制代码
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>首页</title>
</head>
<style type="text/css">
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 20px;
}

nav {
  background-color: #f2f2f2;
  padding: 10px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline;
  margin-right: 10px;
}

nav ul li a {
  text-decoration: none;
  color: #333;
  padding: 5px;
}

section {
  padding: 20px;
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}
</style>
<body>
<header>
    <h1>欢迎来到精美の网站!</h1>
  </header>

  <nav>
    <ul>
      <li><a href="index.html">首页</a></li>
      <li><a href="aboutus.html">关于我们</a></li>
      <li><a href="tellus.html">联系我们</a></li>
    </ul>
  </nav>

  <section>
    <h2>欢迎</h2>
    <p>这是一个精美的网站</p>
  </section>

  <footer>
    <p>版权所有 &copy; 2023 Python_enjoy</p>
  </footer>
</body>
</html>

tellus.html

html 复制代码
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>联系我们</title>
</head>
<style type="text/css">
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 20px;
}

nav {
  background-color: #f2f2f2;
  padding: 10px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline;
  margin-right: 10px;
}

nav ul li a {
  text-decoration: none;
  color: #333;
  padding: 5px;
}

section {
  padding: 20px;
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}
</style>
<body>
<header>
    <h1>联系我们</h1>
  </header>

  <nav>
    <ul>
      <li><a href="index.html">首页</a></li>
      <li><a href="aboutus.html">关于我们</a></li>
      <li><a href="tellus.html">联系我们</a></li>
    </ul>
  </nav>

  <section>
    <span id="a">邮箱 <a id="a" href="mailto:51gcode@51gcode.cn">51gcode@51gcode.cn</a></span>
  </section>

  <footer>
    <p>版权所有 &copy; 2023 Python_enjoy</p>
  </footer>
</body>
</html>

aboutus.html

html 复制代码
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>关于我们</title>
</head>
<style type="text/css">
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 20px;
}

nav {
  background-color: #f2f2f2;
  padding: 10px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline;
  margin-right: 10px;
}

nav ul li a {
  text-decoration: none;
  color: #333;
  padding: 5px;
}

section {
  padding: 20px;
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}
</style>
<body>
<header>
    <h1>关于我们</h1>
  </header>

  <nav>
    <ul>
      <li><a href="index.html">首页</a></li>
      <li><a href="aboutus.html">关于我们</a></li>
      <li><a href="tellus.html">联系我们</a></li>
    </ul>
  </nav>

  <section>
    <p>我是 Python_enjoy</p>
  </section>

  <footer>
    <p>版权所有 &copy; 2023 Python_enjoy</p>
  </footer>
</body>
</html>

如有不足,请指出在评论区 \color{red} 如有不足,请指出在评论区 如有不足,请指出在评论区

相关推荐
中微子2 分钟前
闭包面试宝典:高频考点与实战解析
前端·javascript
brzhang2 分钟前
前端死在了 Python 朋友的嘴里?他用 Python 写了个交互式数据看板,着实秀了我一把,没碰一行 JavaScript
前端·后端·架构
G等你下课30 分钟前
告别刷新就丢数据!localStorage 全面指南
前端·javascript
该用户已不存在31 分钟前
不知道这些工具,难怪的你的Python开发那么慢丨Python 开发必备的6大工具
前端·后端·python
爱编程的喵34 分钟前
JavaScript闭包实战:从类封装到防抖函数的深度解析
前端·javascript
LovelyAqaurius34 分钟前
Unity URP管线着色器库攻略part1
前端
Xy91036 分钟前
开发者视角:App Trace 一键拉起(Deep Linking)技术详解
java·前端·后端
lalalalalalalala39 分钟前
开箱即用的 Vue3 无限平滑滚动组件
前端·vue.js
前端Hardy39 分钟前
8个你必须掌握的「Vue」实用技巧
前端·javascript·vue.js
snakeshe101041 分钟前
深入理解 React 中 useEffect 的 cleanUp 机制
前端