1. 将php中文网移动端剩余部分的内容写完
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿PHP中文网</title>
<style>
body, footer {
min-width: 320px;
max-width: 768px;
margin: 0 auto;
background: #edeff0;
overflow-y: initial;
position: relative;
color: gray;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
}
img {
width: 100%;
}
ul li{
padding: 0;
margin: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: gray;
}
header {
position: fixed;
top: 0;
width: 100%;
height: 42px;
background: #444444;
color: white;
min-width: 320px;
max-width: 768px;
display: flex;
justify-content: space-between;
align-items: center;
}
header > img:first-of-type,
header > img:last-of-type{
width: 26px;
height: 26px;
margin: 5px;
}
header > img:first-of-type{
border-radius: 50%;
}
header > img {
width: 94px;
}
.banner {
display: flex;
height: 200px;
}
nav {
background: white;
display: flex;
flex-flow: column nowrap;
}
nav img{
width: 45px;
height: 49px;
}
nav > ul {
display: flex;
}
nav > ul >li {
flex: 1;
}
nav > ul > li > a {
display: flex;
flex-flow: column wrap;
align-items: center;
margin: 10px;
}
nav > ul > li > a > span {
margin-top: 5px;
}
main {
display: flex;
flex-flow: column nowrap;
}
main > .recommend > section:first-of-type{
display: flex;
flex-flow: row nowrap;
}
main > .recommend > section:first-of-type > a{
margin: 5px;
flex: 1;
}
main > .recommend > section:first-of-type > a > img {
height: 90px;
}
/*设置垂直排列的推荐课程*/
main > .recommend > section:last-of-type {
display: flex;
flex-flow: column nowrap;
}
main > .recommend > section:last-of-type > div {
background-color: #fff;
margin: 5px;
/*也转为弹性容器*/
display: flex;
flex-flow: row nowrap;
}
main > .recommend > section:last-of-type > div img {
width: 350px;
height: 90px;
}
main > .recommend > section:last-of-type > div > span {
display: flex;
/*文本垂直排列*/
flex-flow: column nowrap;
margin-top: 5px;
padding-left: 10px;
}
main > .recommend > section:last-of-type > div > span i {
font-style: normal;
background-color: #333333;
color: white;
border-radius: 4px;
padding: 0 5px;
font-size: smaller;
}
/*最新更新*/
main > .updates > section{
display: flex;
flex-flow: column nowrap;
}
main > .updates > section > div {
display: flex;
flex-flow: row nowrap;
background: white;
margin: 10px 0;
}
main > .updates > section > div > a > img {
height: 80px;
}
main > .updates > section > div > a {
flex: 1;
}
main > .updates > section > div > span {
display: flex;
flex-flow: column nowrap;
margin-left: 10px;
margin-right: 100px;
flex: 2;
}
main > .updates > section > div > span > span:first-of-type {
margin: 10px 0;
font-size: 12px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 400px;
}
main > .updates > section > div > span > span:last-of-type{
display: flex;
justify-content: space-between;
}
/*最新文章*/
main > .article >section {
display: flex;
flex-flow: column nowrap;
}
main > .article >section > div {
display: flex;
flex-flow: row nowrap;
background: white;
margin: 10px 0;
}
main > .article >section > div > span {
display: flex;
flex-flow: column nowrap;
flex: 3;
}
main > .article >section > div > a {
flex: 1;
}
main > .article >section > p {
background: white;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
}
/*最新博文, 最新问答*/
main > .bowen1 > section, main > .questions > section {
display: flex;
flex-flow: column nowrap;
}
main > .bowen1 > section > div, main > .questions > section > div {
height: 50px;
display: flex;
flex-flow: row nowrap;
background: white;
justify-content: space-between;
margin: 10px 0;
}
main > .bowen1 >section > p, main > .questions >section > p {
background: white;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
}
.seize {
height: 50px;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
display: flex;
height: 50px;
}
footer > a {
flex: 1;
align-items: center;
display: flex;
flex-flow: column nowrap;
}
footer > a > img {
width: 26px;
height: 26px;
margin-bottom: 3px;
}
</style>
</head>
<body>
<header>
<img src="static/images/user-pic.jpeg" alt="">
<img src="static/images/logo.png" alt="">
<img src="static/images/user-nav.jpg" alt="">
</header>
<div class="banner">
<img src="static/images/banner.jpg" alt="">
</div>
<nav>
<ul>
<li>
<a href="">
<img src="static/images/html.png" alt="">
<span>HTML/CSS</span>
</a>
</li>
<li>
<a href="">
<img src="static/images/JavaScript.png" alt="">
<span>JavaScript</span>
</a>
</li>
<li>
<a href="">
<img src="static/images/code.png" alt="">
<span>服务端</span>
</a>
</li>
<li>
<a href="">
<img src="static/images/sql.png" alt="">
<span>数据库</span>
</a>
</li>
</ul>
<ul>
<li>
<a href=""><img src="static/images/app.png" alt="">
<span>移动端</span>
</a>
</li>
<li>
<a href="">
<img src="static/images/manual.png" alt="">
<span>手册</span>
</a>
</li>
<li>
<a href=""><img src="static/images/tool2.png" alt="">
<span>工具</span>
</a>
</li>
<li>
<a href="">
<img src="static/images/live.png" alt="">
<span>直播</span>
</a>
</li>
</ul>
</nav>
<main>
<article class="recommend">
<h3>推荐课程</h3>
<section>
<a href=""><img src="static/images/tjkc1.jpg" alt=""></a>
<a href=""><img src="static/images/tjkc2.jpg" alt=""></a>
</section>
<section>
<div>
<a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
<span>
<a href="">CI框架30分钟极速入门</a>
<span><i>中级</i>49738次播放</span>
</span>
</div>
<div>
<a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
<span>
<a href="">2018前端入门基础</a>
<span><i>初级</i>209952次播放</span>
</span>
</div>
</section>
</article>
<article class="updates">
<h3>最新更新</h3>
<section>
<div>
<a href=""><img src="static/images/python.jpg" alt=""></a>
<span>
<a href="">2019python自学视频</a>
<span>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入python世界，自学python的一份好课程，兄弟连课程</span>
<span><i>初级</i>209952次播放</span>
</span>
</div>
<div>
<a href=""><img src="static/images/python.jpg" alt=""></a>
<span>
<a href="">2019python自学视频</a>
<span>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入python世界，自学python的一份好课程，兄弟连课程</span>
<span><i>初级</i>209952次播放</span>
</span>
</div>
<div>
<a href=""><img src="static/images/python.jpg" alt=""></a>
<span>
<a href="">2019python自学视频</a>
<span>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入python世界，自学python的一份好课程，兄弟连课程</span>
<span><i>初级</i>209952次播放</span>
</span>
</div>
<div>
<a href=""><img src="static/images/python.jpg" alt=""></a>
<span>
<a href="">2019python自学视频</a>
<span>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入python世界，自学python的一份好课程，兄弟连课程</span>
<span><i>初级</i>209952次播放</span>
</span>
</div>
<div>
<a href=""><img src="static/images/python.jpg" alt=""></a>
<span>
<a href="">2019python自学视频</a>
<span>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入python世界，自学python的一份好课程，兄弟连课程</span>
<span><i>初级</i>209952次播放</span>
</span>
</div>
<div>
<a href=""><img src="static/images/python.jpg" alt=""></a>
<span>
<a href="">2019python自学视频</a>
<span>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入python世界，自学python的一份好课程，兄弟连课程</span>
<span><i>初级</i>209952次播放</span>
</span>
</div>
</section>
</article>
<article class="article">
<h3>最新文章</h3>
<section>
<div>
<span>
<span>重启阿里云ECS服务器实例</span>
<span>发布时间：2019-11-07</span>
</span>
<a href="">
<img src="static/images/python.jpg" alt="">
</a>
</div>
<div>
<span>
<span>重启阿里云ECS服务器实例</span>
<span>发布时间：2019-11-07</span>
</span>
<a href="">
<img src="static/images/python.jpg" alt="">
</a>
</div>
<div>
<span>
<span>重启阿里云ECS服务器实例</span>
<span>发布时间：2019-11-07</span>
</span>
<a href="">
<img src="static/images/python.jpg" alt="">
</a>
</div>
<div>
<span>
<span>重启阿里云ECS服务器实例</span>
<span>发布时间：2019-11-07</span>
</span>
<a href="">
<img src="static/images/python.jpg" alt="">
</a>
</div>
<div>
<span>
<span>重启阿里云ECS服务器实例</span>
<span>发布时间：2019-11-07</span>
</span>
<a href="">
<img src="static/images/python.jpg" alt="">
</a>
</div>
<p>更多内容</p>
</section>
</article>
<article class="bowen1">
<h3>最新博文</h3>
<section>
<div>
<span>Linux系统CentOS报错：could not resolve host:mirrorlist.centos.org问题</span>
<span>2019-11-07</span>
</div>
<div>
<span>Linux系统CentOS报错：could not resolve host:mirrorlist.centos.org问题</span>
<span>2019-11-07</span>
</div>
<div>
<span>Linux系统CentOS报错：could not resolve host:mirrorlist.centos.org问题</span>
<span>2019-11-07</span>
</div>
<div>
<span>Linux系统CentOS报错：could not resolve host:mirrorlist.centos.org问题</span>
<span>2019-11-07</span>
</div>
<div>
<span>Linux系统CentOS报错：could not resolve host:mirrorlist.centos.org问题</span>
<span>2019-11-07</span>
</div>
<p>更多内容</p>
</section>
</article>
<article class="questions">
<h3>最新问答</h3>
<section>
<div>
<span>php imgick扩展 环境安装</span>
<span>2019-11-07</span>
</div>
<div>
<span>php imgick扩展 环境安装</span>
<span>2019-11-07</span>
</div>
<div>
<span>php imgick扩展 环境安装</span>
<span>2019-11-07</span>
</div>
<div>
<span>php imgick扩展 环境安装</span>
<span>2019-11-07</span>
</div>
<div>
<span>php imgick扩展 环境安装</span>
<span>2019-11-07</span>
</div>
<p>更多内容</p>
</section>
</article>
</main>
<!--下面咱们做一下底部,底部与头部类似,也是固定定位实现-->
<div class="seize"></div>
<footer>
<a href="">
<img src="static/font-icon/zhuye.png" alt="">
<span>主页</span>
</a>
<a href="">
<img src="static/font-icon/video.png" alt="">
<span>视频</span>
</a>
<a href="">
<img src="static/font-icon/luntan.png" alt="">
<span>社区</span>
</a>
<a href="">
<img src="static/font-icon/geren.png" alt="">
<span>我的</span>
</a>
</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.将中间导航菜单区的代码手抄至少一遍, 并给每一行代码加上注释
上述代码和总结中涉及知识点注释总结：
今天又学多了媒体查询这个知识点，对于弹性布局越来越上手了，不过还是感觉掌握的不是很好，还需要努力。现在是痛并快乐着，加油了。