Correcting teacher:天蓬老师
Correction status:qualified
Teacher's comments:看上去还不错哟
演示站:https://php520.vip/final/php.cn.html
请切换至手机模式,或者直接使用手机浏览效果更佳
实际上明确文档结构就是在脑海中浮现出即将要实现的html页面,知道他的结构和内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/icon.css" />
<title>使用flex布局实战模仿php中文网移动端</title>
<style>
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #666;
}
html {
width: 100vw;
height: 100vh;
font-size: 14px;
}
body {
min-width: 360px;
background-color: #edeff0;
display: flex;
flex-flow: column nowrap;
}
header {
height: 50px;
background-color: #2d353c;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-between;
padding: 0 15px;
position: fixed;
width: 95vw;
}
header > a:first-of-type > span {
font-size: 1.8rem;
}
header > a:last-of-type > span {
font-size: 1.8rem;
color: #fff;
}
header img {
width: 80px;
}
.slider {
height: 160px;
margin-top: 50px;
}
.slider > img {
width: 100%;
}
nav {
height: 180px;
display: flex;
flex-flow: row wrap;
}
nav > div {
width: 25vw;
display: flex;
flex-flow: column nowrap;
align-items: center;
}
nav > div > a:first-of-type > img {
width: 50%;
}
nav > div > a:first-of-type {
text-align: center;
}
h3 {
color: #888a8c;
padding-left: 5px;
}
.tuijian-course {
height: 350px;
display: flex;
flex-flow: column nowrap;
margin-top: 10px;
}
.tuijian-course > div:first-of-type {
display: flex;
flex-flow: row nowrap;
justify-content: space-evenly;
}
.tuijian-course > div:first-of-type > img {
width: 45vw;
}
.tuijian-course > div:nth-of-type(2) {
display: flex;
flex-flow: row nowrap;
background-color: #fff;
margin: 12px;
box-sizing: border-box;
}
.tuijian-course > div:nth-of-type(2) > img {
width: 40vw;
padding: 10px;
}
.tuijian-course > div:nth-of-type(2) > div {
display: flex;
flex-flow: column nowrap;
justify-content: space-evenly;
}
.tuijian-course > div:nth-of-type(2) > div > a:first-of-type {
font-size: 1.2rem;
}
.tuijian-course > div:nth-of-type(2) > div > a:last-of-type {
font-size: 0.8rem;
}
.tuijian-course > div:nth-of-type(2) > div > a:last-of-type > span {
background-color: #595757;
color: #fff;
border-radius: 6px;
}
.tuijian-course > div:last-of-type {
display: flex;
flex-flow: row nowrap;
background-color: #fff;
margin: 12px;
box-sizing: border-box;
}
.tuijian-course > div:last-of-type > img {
width: 40vw;
padding: 10px;
}
.tuijian-course > div:last-of-type > div {
display: flex;
flex-flow: column nowrap;
justify-content: space-evenly;
}
.tuijian-course > div:last-of-type > div > a:first-of-type {
font-size: 1.2rem;
}
.tuijian-course > div:last-of-type > div > a:last-of-type {
font-size: 0.8rem;
}
.tuijian-course > div:last-of-type > div > a:last-of-type > span {
background-color: #595757;
color: #fff;
border-radius: 6px;
}
.zuixin {
height: 800px;
display: flex;
flex-flow: column nowrap;
justify-content: space-evenly;
}
.zuixin > .tuwen {
display: flex;
flex-flow: row nowrap;
background-color: #fff;
margin: 12px;
}
.zuixin > .tuwen > a > img {
width: 40vw;
padding: 10px;
}
.miaoshu {
display: flex;
flex-flow: column nowrap;
justify-content: space-evenly;
}
.miaoshu > a:first-of-type {
font-size: 1.2rem;
}
.miaoshu > a:last-of-type {
font-size: 0.8rem;
}
.miaoshu > div {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
.miaoshu > div > span:first-of-type {
background-color: #595757;
border-radius: 5px;
font-size: 0.8rem;
color: #fff;
}
.miaoshu > div > span:last-of-type {
font-size: 0.8rem;
color: #88a5c4;
}
.zuixin-article {
display: flex;
flex-flow: column nowrap;
justify-content: space-evenly;
}
.zuowen {
display: flex;
background-color: #fff;
margin: 12px;
justify-content: space-between;
}
.zuowen > a > img {
width: 35vw;
height: 65px;
padding: 10px;
}
.zuowen > div {
display: flex;
flex-flow: column nowrap;
justify-content: space-evenly;
padding: 10px;
}
.zuowen > div > a:first-of-type {
font-weight: bold;
font-size: 0.9rem;
}
.zuowen > div > a:last-of-type {
font-size: 0.8rem;
}
.gengduo {
background-color: #fff;
height: 30px;
margin: 12px;
display: flex;
justify-content: center;
align-items: center;
}
.zuixin-bowen {
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
}
.bowen {
display: flex;
flex-flow: row nowrap;
background-color: #fff;
height: 40px;
margin: 12px;
align-items: center;
justify-content: space-around;
}
.bowen > a:first-of-type {
font-weight: bold;
}
footer {
height: 50px;
background-color: #eeeeee;
display: flex;
justify-content: space-around;
position: fixed;
width: 100vw;
bottom: 0;
align-items: center;
}
footer > div {
display: flex;
flex-flow: column nowrap;
align-items: center;
}
footer > div > a:first-of-type > span {
font-size: 1.4rem;
}
</style>
</head>
<body>
<!-- 页眉 -->
<header>
<a href=""><span class="iconfont"></span></a>
<a href=""><img src="img/logo.png" alt="" /></a>
<a href=""><span class="iconfont"></span></a>
</header>
<!-- 轮播图 -->
<div class="slider">
<img src="img/2.jpg" alt="" />
</div>
<!-- 导航 -->
<nav>
<div>
<a href=""><img src="img/html.png" alt="" /></a>
<a href="">HTML/CSS</a>
</div>
<div>
<a href=""><img src="img/JavaScript.png" alt="" /></a>
<a href="">JacaScript</a>
</div>
<div>
<a href=""><img src="img/code.png" alt="" /></a>
<a href="">服务端</a>
</div>
<div>
<a href=""><img src="img/sql.png" alt="" /></a>
<a href="">数据库</a>
</div>
<div>
<a href=""><img src="img/app.png" alt="" /></a>
<a href="">移动端</a>
</div>
<div>
<a href=""><img src="img/manual.png" alt="" /></a>
<a href="">手册</a>
</div>
<div>
<a href=""><img src="img/tool2.png" alt="" /></a>
<a href="">工具</a>
</div>
<div>
<a href=""><img src="img/live.png" alt="" /></a>
<a href="">直播</a>
</div>
</nav>
<!-- 推荐课程 -->
<h3>推荐课程</h3>
<div class="tuijian-course">
<div>
<img src="img/tianlong.jpg" alt="" />
<img src="img/tianlong2.jpg" alt="" />
</div>
<div>
<img src="img/30.jpg" alt="" />
<div>
<a href="">CI框架30分钟极速入门</a>
<a href=""><span>中级</span>61401次播放</a>
</div>
</div>
<div>
<img src="img/30.jpg" alt="" />
<div>
<a href="">CI框架30分钟极速入门</a>
<a href=""><span>中级</span>61401次播放</a>
</div>
</div>
</div>
<!-- 最新更新 -->
<h3>最新更新</h3>
<div class="zuixin">
<div class="tuwen">
<a href=""><img src="img/excel.png" alt="" /></a>
<div class="miaoshu">
<a href="">php快速操控EXcel之P...</a>
<a>老的phpexcel已经停止更新了!目...</a>
<div>
<span>中级</span>
<span>49862次播放</span>
</div>
</div>
</div>
<div class="tuwen">
<a href=""><img src="img/excel.png" alt="" /></a>
<div class="miaoshu">
<a href="">php快速操控EXcel之P...</a>
<a>老的phpexcel已经停止更新了!目...</a>
<div>
<span>中级</span>
<span>49862次播放</span>
</div>
</div>
</div>
<div class="tuwen">
<a href=""><img src="img/excel.png" alt="" /></a>
<div class="miaoshu">
<a href="">php快速操控EXcel之P...</a>
<a>老的phpexcel已经停止更新了!目...</a>
<div>
<span>中级</span>
<span>49862次播放</span>
</div>
</div>
</div>
<div class="tuwen">
<a href=""><img src="img/excel.png" alt="" /></a>
<div class="miaoshu">
<a href="">php快速操控EXcel之P...</a>
<a>老的phpexcel已经停止更新了!目...</a>
<div>
<span>中级</span>
<span>49862次播放</span>
</div>
</div>
</div>
<div class="tuwen">
<a href=""><img src="img/excel.png" alt="" /></a>
<div class="miaoshu">
<a href="">php快速操控EXcel之P...</a>
<a>老的phpexcel已经停止更新了!目...</a>
<div>
<span>中级</span>
<span>49862次播放</span>
</div>
</div>
</div>
<div class="tuwen">
<a href=""><img src="img/excel.png" alt="" /></a>
<div class="miaoshu">
<a href="">php快速操控EXcel之P...</a>
<a>老的phpexcel已经停止更新了!目...</a>
<div>
<span>中级</span>
<span>49862次播放</span>
</div>
</div>
</div>
</div>
<!-- 最新文章 -->
<h3>最新文章</h3>
<div class="zuixin-article">
<div class="zuowen">
<div>
<a href="">如何在linux环境下安装docker</a>
<a href="">发布时间:2020-04-14</a>
</div>
<a href=""><img src="img/qie.jpg" alt="" /></a>
</div>
<div class="zuowen">
<div>
<a href="">如何在linux环境下安装docker</a>
<a href="">发布时间:2020-04-14</a>
</div>
<a href=""><img src="img/qie.jpg" alt="" /></a>
</div>
<div class="zuowen">
<div>
<a href="">如何在linux环境下安装docker</a>
<a href="">发布时间:2020-04-14</a>
</div>
<a href=""><img src="img/qie.jpg" alt="" /></a>
</div>
<div class="zuowen">
<div>
<a href="">如何在linux环境下安装docker</a>
<a href="">发布时间:2020-04-14</a>
</div>
<a href=""><img src="img/qie.jpg" alt="" /></a>
</div>
<div class="zuowen">
<div>
<a href="">如何在linux环境下安装docker</a>
<a href="">发布时间:2020-04-14</a>
</div>
<a href=""><img src="img/qie.jpg" alt="" /></a>
</div>
</div>
<div class="gengduo">
<a href="">更多内容</a>
</div>
<!-- 最新博文 -->
<h3>最新博文</h3>
<div class="zuixin-bowen">
<div class="bowen">
<a href="">phpstrom安装PHPUnit-9单元测试</a>
<a href="">2020-04-14</a>
</div>
<div class="bowen">
<a href="">phpstrom安装PHPUnit-9单元测试</a>
<a href="">2020-04-14</a>
</div>
<div class="bowen">
<a href="">phpstrom安装PHPUnit-9单元测试</a>
<a href="">2020-04-14</a>
</div>
<div class="bowen">
<a href="">phpstrom安装PHPUnit-9单元测试</a>
<a href="">2020-04-14</a>
</div>
<div class="bowen">
<a href="">phpstrom安装PHPUnit-9单元测试</a>
<a href="">2020-04-14</a>
</div>
</div>
<div class="gengduo">
<a href="">更多内容</a>
</div>
<!-- 最新问答 -->
<h3>最新问答</h3>
<div class="zuixin-bowen">
<div class="bowen">
<a href="">请教Think PHP安装问题</a>
<a href="">2020-04-14</a>
</div>
<div class="bowen">
<a href="">请教Think PHP安装问题</a>
<a href="">2020-04-14</a>
</div>
<div class="bowen">
<a href="">请教Think PHP安装问题</a>
<a href="">2020-04-14</a>
</div>
<div class="bowen">
<a href="">请教Think PHP安装问题</a>
<a href="">2020-04-14</a>
</div>
<div class="bowen">
<a href="">请教Think PHP安装问题</a>
<a href="">2020-04-14</a>
</div>
</div>
<div class="gengduo">
<a href="">更多内容</a>
</div>
<!-- 页脚 -->
<footer>
<div>
<a href=""><span class="iconfont"></span></a>
<a href="">首页</a>
</div>
<div>
<a href=""><span class="iconfont"></span></a>
<a href="">视频</a>
</div>
<div>
<a href=""><span class="iconfont"></span></a>
<a href="">社区</a>
</div>
<div>
<a href=""><span class="iconfont"></span></a>
<a href="">我的</a>
</div>
</footer>
</body>
</html>