● 将之前的浮动布局注释了，这次我们用flexbox来实现
41.在项目中添加Flexbox布局

FELXBOX布局

● 首先我们来处理导航栏

.main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

aside模块改动

● 因改动较大，附上全部代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>HTML是最基本的网页语言</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="container">
    <header class="main-header clearfix">
      <h1>????代码介绍</h1>
      <nav>
        <a href="./blog.html">BLOG</a>
        <a href="challenge#2.html">Challenges</a>
        <a href="flexbox.html">flexbox</a>
        <a href="css-grid.html">CSS Grid</a>
      </nav>
    </header>
    <article>
      <header class="post-header">
        <h2>HTML是最基本的网页语言</h2>
        <div class="author-box">
        <img
          src="img/laura-jones.jpg"
          alt="劳拉·琼斯的头像"
          width="75"
          height="75"
          class="author-img"
        />
        <p id="author" class="author">
          <strong>劳拉·琼斯 (Laura Jones)</strong> 于 2027 年 6 月 21
          日星期一发布
        </p>
      </div>
        <img 
          src="img/post-img.jpg"
          alt="HTML 代码图片"
          width="500"
          height="200"
          class="post-img"
        />
        <button>❤️I Like</button>
      </header>
      <p>
        所有现代网站和 Web 应用程序都是使用三个<em>基础构建</em>的技术:HTML、CSS
        和 JavaScript。 这些是网站的语言。
      </p>

      <p>
        在这篇文章中，让我们关注 HTML。 我们将了解 HTML
        的全部内容，以及为什么您也应该学习它。
      </p>

      <h3>什么是HTML?</h3>
      <p>
        HTML 代表<strong>超文本标记语言</strong>。 它是 Web
        开发人员用来构建和描述网页内容的标记语言（不是编程语言）。
      </p>
      <p>
        HTML 由描述不同类型内容的元素组成：段落、链接、标题、图像、视频等。Web
        浏览器理解 HTML 并将 HTML 代码呈现为网站。
      </p>
      <p>在 HTML 中，每个元素由 3 个部分组成：</p>
      <ol>
        <li class="first-li">开始标记</li>
        <li>结束标记</li>
        <li>实际元素</li>
      </ol>
      <p>
        你可以在这学习更多
        <a
          href="https://developer.mozilla.org/zh-CN/docs/Web/HTML"
          target="_blank"
          >MDN Web Docs</a
        >
      </p>
      <h3>为什么要学习 HTML?</h3>
      <p>学习网页的基本语言有无数的理由。 以下是其中的 5 个：</p>
      <ul>
        <li class="first-li">能够使用基本的 Web 开发语言</li>
        <li>手工制作漂亮的网站，而不是依赖像 Wordpress 或 Wix 这样的工具</li>
        <li>构建 Web 应用程序</li>
        <li>给朋友留下深刻印象</li>
        <li>玩得开心????</li>
      </ul>
      <p>希望你在这里学到了一些新东西。下次见！</p>
    </article>
    <aside>
      <h4>相关文章</h4>
      <ul class="related">
        <li class="related-post">
          <img
            src="img/related-1.jpg"
            alt="related-1"
            width="75px"
            height="75px"
          />
          <div>

       
          <a href="#" class="related-link">如何去学习网页开发</a>
          <p class="related-author">作者：乔纳斯·施梅德特曼</p>
        </div>
        </li>
        <li class="related-post">
          <img
            src="img/related-2.jpg"
            alt="related-2"
            width="75px"
            height="75px"
          />
          <div>
          <a href="#"  class="related-link">CSS 的未知力量</a>
          <p class="related-author">作者：吉姆.狄龙</p>
        </div>
        </li>
        <li class="related-post">
          <img
            src="img/related-3.jpg"
            alt="related-3"
            width="75px"
            height="75px"
          />
          <div>
          <a href="#"  class="related-link">为什么 JavaScript 很棒</a>
          <p class="related-author">作者：玛蒂尔达</p>
        </div>
        </li>
      </ul>
    </aside>
    <footer><p id="copyright" class="copyright text">版权所有 &copy; 2027 sbz</p></footer>
  </div>
  <button>❤️I Like</button>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
}

body {
  color: #444;
  font-family: sans-serif;
  border-top: 10px solid #1098ad;
  position: relative;
}

.container {
  width: 1200px;
 margin: 0 auto;
}

.main-header {
  background-color: #f7f7f7;
  /* padding-left: 40px;
  padding-right: 40px;*/
   padding: 20px 40px;
 /* padding-bottom: 60px; */
  margin-bottom: 60px;
  /* height: 80px; */
} 

nav {
  font-size: 18px;
  color: #1098ad ;
}

article {
  margin-bottom: 60px;
}

.post-header {
  margin-bottom: 40px;
}


aside {
  background-color: #f7f7f7;
  border-top: 5px solid #1098ad;
  border-bottom: 5px solid #1098ad;
  padding: 50px 40px ;
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
p,
li {
  font-family: sans-serif;
  color: #444;
}
h1,
h2,
h3 {
  color: #1098ad;
}
h1 {
  font-size: 26px;
  text-transform: uppercase;
  font-style: italic;
}

h2 {
  font-size: 40px;
  margin-bottom: 30px;
}

h3 {
  font-size: 30px;
  margin-bottom: 20px;
  margin-top: 40px;
}

h4 {
  font-size: 20px;
  text-transform: uppercase;
  text-align: center;
}
p {
  font-size: 22px;
  line-height: 1.5;
  margin-bottom: 15px;
}

ul,ol {
  margin-left: 50px;
  margin-bottom: 20px;
}

li {
  font-size: 20px;
  margin-bottom: 10px;
}
li:last-child {
  margin-bottom: 0;
}

/* footer p {
  font-size: 16px;
} */
/* article header p {
  font-style: italic;
} */

#author {
  font-style: italic;
  font-size: 18px;
}

#copyright {
  font-size: 16px;
}

.related-author {
  font-size: 18px;
  font-weight: bold;
}

/* ul {
  list-style: none;
} */

.related {
  list-style: none;
  margin-left: 0;
}



body {
  /* background-color: orangered; */
}

/* .first-li {
  font-weight: bold;
} */

li:first-child {
  font-weight: bold;
}

li:last-child {
  font-style: italic;
}

li:nth-child(even) {
  /* color: red; */
}

/* 下面的代码并不会起作用 */
article p:first-child {
  color: red;
}

/* 超链接样式 */
a:link {
  color: #1098ad;
  text-decoration: none;
}

a:hover {
  color: orangered;
  font-weight: bold;
  text-decoration: underline   orangered;
}

a:active {
  background-color: black;
  font-style: italic;
}

/* #copyright {
  color: red;
}

.copyright {
  color: blue;
}

.text {
  color: yellow;
}

footer p {
  color: green;
} */





.post-img {
  width:100%;
  height: auto;
}

nav a:link {
  /* background-color: orangered;
  margin: 20px;
  padding: 20px;
  display: block; */
  margin-right: 30px;
  display: inline-block;
}

nav a:link:last-child {
  margin-right: 0;
}

button {
  font-size: 22px;
  padding: 20px;
  cursor: pointer;

  position: absolute;
  bottom: 50px;
  right: 50px;

}

h1::first-letter {
  font-style: normal;
  margin-right: 5px;
}

h3 + p::first-line {
  /* color: red; */
}

 h2 {
  position: relative;
 }

h2::after {
content: "TOP";  
background-color: yellow;
color: #444;
font-size: 16px;
font-weight: bold;
display: inline-block;
padding: 5px 10px;
position: absolute;
top: -10px;
right: -25px;
}

/* 浮动布局
.author-img{
  float: left;
  margin-bottom: 20px;

}

.author {
  float: left;
  margin-top: 10px;
  margin-left: 20px;

}

h1 {
  float: left;
}

nav {
  float: right;
}

.clear {
  float: right;
}

.clearfix::after {
  clear: both;
  content: "";
  display: block;
}

article {
  width: 825px;
  float: left;
}

aside {
  width: 300px;
  float: right;
}

footer {
  clear: both;
} */

/* Flexbox */
.main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.author-box {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.author {
  margin-bottom: 0;
  margin-left: 15px;
}

.related-post {
  display: flex;
  align-items: center;
  gap:20px;
  margin-bottom: 30px;
}

.related-link:link {
  font-size: 17px;
  font-weight: bold;
  font-style: normal;
  margin-bottom: 5px;
  display: block;
}

.related-author {
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  font-style: italic;
}