41.在项目中添加Flexbox布局
● 将之前的浮动布局注释了，这次我们用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">BLOGa>
<a href="challenge#2.html">Challengesa>
<a href="flexbox.html">flexboxa>
<a href="css-grid.html">CSS Grida>
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 Likebutton>
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 Docsa
>
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">版权所有 © 2027 sbzp>footer>
div>
<button>❤️I Likebutton>
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;
}