The page layout mainly uses the flex layout. justify-content and align-item can center the content. These two attributes are used more.
The corresponding class name is also added in the html (look carefully), the layout of this page is a bit flawed, browse the picture below the content, the outermost background color (gray) is not displayed (it’s true, I don’t know why), some friends know Tell me about it.
html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="./css/style.css">
<body id="body">
<!--header start-->
<header class="headerbox">
<!--nav start-->
<nav class="navbox">
<img src="./images/logo.png" alt="">
<div class="navright">
<a class="on" href="#body">app下载</a>
<a href="#tabtitle">浏览内容</a>
</div>
</nav>
<!--nav end-->
</header>
<!--header end-->
<!--banner start-->
<section class="banner">
<div class="container">
<div class="">
<img
src="./images/phone_sample.png"
alt="知乎日报应用截屏"
class="phoneimg loaded"
/>
</div>
<div class="content">
<h2>每天三次 每次七分钟</h2>
<div class="info">
在中国，资讯类移动应用的人均阅读时长是 5
分钟，而在知乎日报，这个数字是 21。
</div>
</div>
</div>
</section>
<!--banner end-->
<!--tabtitle start-->
<section class="tabtitle" id="tabtitle">
<h3>浏览内容</h3>
<h4>最新内容</h4>
</section>
<!--tabtitle end-->
<!--list start-->
<section class="list">
<ul>
<li style="margin-top: 0;">
<a href="#">
<img src="images/1.jpg" alt="" />
<p>怎样使金属变得很脆？</p>
</a>
</li>
<li class="ma-le" style="margin-top: 0;">
<a href="#">
<img src="images/2.jpg" alt="" />
<p>有哪些对你很有冲击力的设计？</p>
</a>
</li>
<li class="ma-le" style="margin-top: 0;">
<a href="#">
<img src="images/3.jpg" alt="" />
<p>有哪些很重要，教练却没有教的驾驶技巧？</p>
</a>
</li>
<li>
<a href="#">
<img src="images/5.jpg" alt="" />
<p>谢谢天上掉的玩具</p>
</a>
</li>
<li class="ma-le">
<a href="#">
<img src="images/6.jpg" alt="" />
<p>火车上的「最大上沙量」标识是什么意思？</p>
</a>
</li>
<li class="ma-le">
<a href="#">
<img src="images/7.jpg" alt="" />
<p>翼龙可以当飞行坐骑么？</p>
</a>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt="" />
<p>怎样使金属变得很脆？</p>
</a>
</li>
<li class="ma-le">
<a href="#">
<img src="images/2.jpg" alt="" />
<p>有哪些对你很有冲击力的设计？</p>
</a>
</li>
<li class="ma-le">
<a href="#">
<img src="images/3.jpg" alt="" />
<p>有哪些很重要，教练却没有教的驾驶技巧？</p>
</a>
</li>
<li>
<a href="#">
<img src="images/5.jpg" alt="" />
<p>谢谢天上掉的玩具</p>
</a>
</li>
<li class="ma-le">
<a href="#">
<img src="images/6.jpg" alt="" />
<p>火车上的「最大上沙量」标识是什么意思？</p>
</a>
</li>
<li class="ma-le">
<a href="#">
<img src="images/7.jpg" alt="" />
<p>翼龙可以当飞行坐骑么？</p>
</a>
</li>
</ul>
<div class="more">
<a href="#">更多精彩内容请在APP中查看</a>
</div>
</section>
<!--list end-->
<!--footer start-->
<footer class="footer">
<div class="footerBox">
<div class="footerL">
<p style="margin-top: 0;">
知乎日报是一款拥有千万用户的资讯类客户端，每日提供来自知乎社区的精选问答，还有国内一流媒体的专栏特稿。
</p>
<p>
主题日报包括动漫、设计、大公司、游戏、财经、电影、电子音乐、互联网安全等丰富内容，为业内人和资深爱好
者推荐各领域最精彩文章，满足高质量阅读需求。
</p>
<p>在知乎日报，告别浮躁，重获阅读的愉悦。</p>
<p>© 2020 知乎</p>
</div>
<div class="footerR">
<img src="images/qr.png" alt="" />
<p>扫描下载客户端</p>
</div>
</div>
</footer>
<!--footer end-->
</body>
</html>css:
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
a {
color: black
}
#body {
width: 1024px;
margin: 0 auto;
}
.navbox {
display: flex;
height: 78px;
width: 1024px;
justify-content: space-between;
}
.navbox>img {
margin-left: 30px;
}
.navright {
display: flex;
align-items: center;
width: 250px;
margin-right: 30px;
justify-content: space-around;
}
.on {
width: 120px;
height: 32px;
line-height: 32px;
color: #0099f2;
background: #F0F9FF;
text-align: center;
}
.banner {
background: #008BED;
}
.container {
display: flex;
justify-content: space-around;
}
.content {
width: 400px;
margin-top: 110px;
}
.content>h2 {
font-size: 40px;
line-height: 40px;
color: #fdfdfd;
}
.content>.info {
margin-top: 10px;
font-size: 16px;
line-height: 26px;
color: #99d1f8;
}
/* tab start */
.tabtitle {
margin: 0 auto;
width: 960px;
height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
}
.tabtitle h3 {
font-size: 24px;
color: #000000;
}
.tabtitle h4 {
font-size: 24px;
color: #cccccc;
}
/* list */
.list {
margin: 0 auto;
width: 1024px;
background-color: #F9F9F9;
display: flex;
flex-wrap: wrap;
}
.list ul {
background-color: #F9F9F9;
display: flex;
flex-wrap: wrap;
}
.list li {
flex: 1;
margin-top: 20px;
width: 300px;
background-color: white;
display: flex;
height: 374px;
/* align-items: center; */
justify-content: center;
}
.list li a {
justify-content: center;
margin-top: 20px;
}
.list img {
width: 260px;
height: 260px;
}
.ma-le {
margin-left: 30px;
}
.more {
margin-top: 20px;
width: 100%;
font-size: 20px;
line-height: 62px;
background-color: #E8EEF2;
display: flex;
justify-content: center;
align-items: center;
}
.more a {
justify-content: center;
color: #59ABDF;
}
.footer {
margin-top: 30px;
width: 100%;
height: 265px;
background-color: #E5E5E5;
}
.footerBox {
display: flex;
margin-left: 15px;
}
.footerL {
width: 710px;
height: 210px;
margin-top: 32px;
}
.footerL p {
font-size: 14px;
line-height: 25px;
color: #000000;
}
.footerR {
height: 152px;
margin-left: 100px;
margin-top: 25px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.footerR img {
height: 141px;
width: 141px;
}