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} 如有不足,请指出在评论区 如有不足,请指出在评论区

相关推荐
弗锐土豆21 分钟前
一个基于若依(ruoyi-vue3)的小项目部署记录
前端·vue.js·部署·springcloud·ruoyi·若依
Hilaku24 分钟前
我为什么放弃了“大厂梦”,去了一家“小公司”?
前端·javascript·面试
1undefined225 分钟前
element中的table改造成虚拟列表(不定高),并封装成hooks
前端·vue.js
浅墨momo29 分钟前
搭建第一个Shopify App
前端·程序员
然我34 分钟前
React 事件机制:从代码到原理,彻底搞懂合成事件的核心逻辑
前端·react.js·面试
Codebee34 分钟前
OneCode 组件服务通用协议栈:构建企业级低代码平台的技术基石
前端·前端框架·开源
Running_C34 分钟前
常见web攻击类型
前端·http
jackyChan34 分钟前
ES6 Proxy 性能问题,你真知道吗?🚨
前端·javascript
lichenyang45334 分钟前
快速搭建服务器,fetch请求从服务器获取数据
前端