Beginner HTML Site Styled 项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00217/article/details/141510982

Beginner HTML Site Styled 项目教程

beginner-html-site-styledA simple one page website created to help complete beginners learn HTML basics, which in this repo has also been styled to help beginners learn CSS basics. The styling is explained over the course of https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/CSS_basics.项目地址:https://gitcode.com/gh_mirrors/be/beginner-html-site-styled

1、项目的目录结构及介绍

beginner-html-site-styled/
├── index.html
├── styles.css
└── images/
    └── firefox-icon.png

index.html: 项目的入口文件，包含HTML的基本结构和内容。
styles.css: 项目的样式文件，用于定义HTML元素的外观和布局。
images/: 存放项目所需图片的目录，当前包含一个名为 firefox-icon.png 的图片。

2、项目的启动文件介绍

index.html

index.html 是项目的启动文件，它包含了HTML的基本结构和内容。以下是该文件的主要内容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Beginner HTML Site Styled</title>
    <link href="styles.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <h1>Mozilla 酷毙了！</h1>
    <img src="images/firefox-icon.png" alt="Firefox 标志：一只盘旋在地球上的火狐">
    <p>Mozilla 是一个全球社区，这里聚集着来自五湖四海的</p>
    <ul>
      <li>技术人员</li>
      <li>思考者</li>
      <li>建造者</li>
    </ul>
    <p>我们致力于让 Internet 保持活力，保持畅通，人人皆可贡献，人人皆可创造。我们坚信：开放平台的协作对于人的发展至关重要，也决定着我们共同的未来。</p>
    <p>为了达成我们共同的理想，我们遵循一系列的价值观和理念，请参阅 <a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla 宣言</a>。</p>
  </body>
</html>

<!DOCTYPE html>: 声明文档类型。
<html>: HTML文档的根元素。
<head>: 包含文档的元数据，如字符编码和标题。
<body>: 包含文档的主体内容。

3、项目的配置文件介绍

styles.css

styles.css 是项目的样式文件，用于定义HTML元素的外观和布局。以下是该文件的主要内容：

html {
  font-size: 10px;
  font-family: 'Open Sans', sans-serif;
}

h1 {
  font-size: 60px;
  text-align: center;
}

p, li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}

html {
  background-color: #00539F;
}

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

img {
  display: block;
  margin: 0 auto;
}

html: 设置整个文档的字体大小和字体族。
h1: 设置标题的字体大小、对齐方式和文本阴影。
p, li: 设置段落和列表项的字体大小、行高和字间距。
body: 设置主体的宽度、边距、背景色、内边距和边框。
img: 设置图片的显示方式和居中对齐。

通过以上介绍，您可以更好地理解和使用 Beginner HTML Site Styled 项目。希望这个教程对您有所帮助！

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考