Hello, friends

This is a very beautiful website, you can use it to create some personal websites
index.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>

Insert image description here

earth.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:[email protected]">[email protected]</a></span>
  </section>

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

Insert image description here

aboutus.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>

Insert image description here

$\color{red} If there are any deficiencies, please point them out in the comment area$

HTML + CSS Practice 1

Hello, friends

Guess you like