HTML + CSS 实践1

Hello,小伙伴们

这是一个十分精美的网站,可以拿着它去制作一些个人网站
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>版权所有 © 2023 Python_enjoyp>
  footer>
body>
html>

HTML + CSS 实践1_第1张图片

tellus.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>版权所有 © 2023 Python_enjoyp>
  footer>
body>
html>

HTML + CSS 实践1_第2张图片

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_enjoyp>
  section>

  <footer>
    <p>版权所有 © 2023 Python_enjoyp>
  footer>
body>
html>

HTML + CSS 实践1_第3张图片

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

你可能感兴趣的:(整十粉丝庆祝文章系列内容,HTML,html,css,前端)