一、PHP中文网移动端
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP中文网手机首页</title>
<link rel="stylesheet" href="./static/css/style.css">
<link rel="stylesheet" href="./static/css/init.css">
</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">
<a href="">
<img src="./static/images/banner.jpg" alt="">
</a>
</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">
<h2>推荐课程</h2>
<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="last-update">
<h2>最新更新</h2>
<section>
<a href=""><img src="./static/images/tjkc4.jpg" alt=""></a>
<span>
<a href="">2019python自学视频</a>
<i>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你...</i>
<span><i>初级</i>1930次播放</span>
</span>
</section>
<section>
<a href=""><img src="./static/images/tjkc4.jpg" alt=""></a>
<span>
<a href="">PHP开发免费公益直播课</a>
<i>主讲：php中文网-朱老师( Peter Zhu) 时间：2019.10.17 晚 20:00-22:0.</i>
<span><i>初级</i>1677次播放</span>
</span>
</section>
<section>
<a href=""><img src="./static/images/tjkc4.jpg" alt=""></a>
<span>
<a href="">从零开始到WEB响应式布局</a>
<i>重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解，了解</i>
<span><i>初级</i>3150次播放</span>
</span>
</section>
<section>
<a href=""><img src="./static/images/tjkc4.jpg" alt=""></a>
<span>
<a href="">PHP文件基础操作</a>
<i>好多同学在PHP基础的时候对PHP文件的操作了解的不够多，本节课就.</i>
<span><i>中级</i>1667次播放</span>
</span>
</section>
<section>
<a href=""><img src="./static/images/tjkc4.jpg" alt=""></a>
<span>
<a href="">memcache基础课程</a>
<i>本课程带你从零认识memcache，让你在一小时左右轻松掌握memcach.</i>
<span><i>初级</i>796次播放</span>
</span>
</section>
</article>
<article class="latest-article">
<h2>最新文章</h2>
<section>
<a href="">
<i>php生成二维码的3种方法</i>
<i>发布时间：2018－06－11</i>
</a>
<a href=""><img src="./static/images/5b1e984027608403.png" alt=""></a>
</section>
<section>
<a href="">
<i>vscode如何关闭eslint的语法检查</i>
<i>发布时间：20189－11－08</i>
</a>
<a href=""><img src="./static/images/5dc506410a1cf480.jpg" alt=""></a>
</section>
<section>
<a href="">
<i>linux怎么上网</i>
<i>发布时间：2018－06－11</i>
</a>
<a href=""><img src="./static/images/3.jpg" alt=""></a>
</section>
<section>
<a href="">
<i>让DEDECMS搜索结果显示完整标题的方法</i>
<i>发布时间：2018－06－11</i>
</a>
<a href=""><img src="./static/images/4.jpg" alt=""></a>
</section>
</article>
<article class="latest-blog">
<h2>最新博文</h2>
<section>
<a href="">PHP学习第一天：软件安装篇</a>
<a href="">2010－11－08</a>
</section>
<section>
<a href="">Linux系统CentOS报错：could not</a>
<a href="">2010－11－08</a>
</section>
<section>
<a href="">thinkphp5.0.24前置操作的大小写问题</a>
<a href="">2010－11－08</a>
</section>
<section>
<a href="">laravel-创建“控制器”和“模型”，使用模型方法获</a>
<a href="">2010－11－08</a>
</section>
<section><a href="">更多内容</a></section>
</article>
<article class="latest-qa">
<h2>最新问答</h2>
<section>
<a href="">我写的哪里有错，请各位大神查看一下</a>
<a href="">2010－11－08</a>
</section>
<section>
<a href="">HTML编译环境</a>
<a href="">2010－11－08</a>
</section>
<section>
<a href="">CSS伪类怎么插入图片</a>
<a href="">2010－11－08</a>
</section>
<section>
<a href="">php imgick扩展 环境安装</a>
<a href="">2010－11－08</a>
</section>
<section><a href="">更多内容</a></section>
</article>
</main>
<footer>
<ul>
<li><a href=""><img src="./static/images/code.png" alt=""><i>首页</i></a></li>
<li><a href=""><img src="./static/images/html.png" alt=""><i>视频</i></a></li>
<li><a href=""><img src="./static/images/JavaScript.png" alt=""><i>社区</i></a></li>
<li><a href=""><img src="./static/images/live.png" alt=""><i>我的</i></a></li>
</ul>
</footer>
</body>
</html>
CSS代码：
body{
display: flex;
flex-flow: column nowrap;
}
body > header{
display: flex;
background-color: #444444;
width: 100%;
height: 42px;
min-width: 320px;
max-width: 768px;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
}
header >img:first-of-type,
header >img:last-of-type{
width: 26px;
height: 26px;
margin: 5px;
border-radius: 50%;
}
header > img:nth-of-type(2){
width: 94px;
}
/****************************/
body > nav{
display: flex;
flex-flow: column nowrap;
background-color: white;
}
body > nav > ul{
display: flex;
align-items: center;
}
body > nav > ul > li{
margin: 10px 0;
flex: 1;
}
body > nav > ul >li > a{
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
body > nav > ul > li img{
width: 45px;
height: 49px;
}
/**********************************/
.recommend{
/*box-sizing: border-box;*/
/*width: 100%;*/
padding: 8px;
display: flex;
flex-flow: column nowrap;
}
.recommend >h2{
margin-bottom: 5px;
}
.recommend >section:last-of-type>div{
margin: 8px 0;
}
.recommend > section:first-of-type{
display: flex;
}
.recommend > section:first-of-type > a{
margin: 5px;
}
.recommend >section:nth-of-type(2){
display: flex;
flex-flow: column nowrap;
}
.recommend >section:nth-of-type(2) > div{
display: flex;
background-color: white;
padding: 8px;
}
.recommend >section:nth-of-type(2)>div>span>a{
margin-bottom: 10px;
}
.recommend >section:nth-of-type(2) > div img{
width: 350px;
height: 90px;
}
.recommend >section:nth-of-type(2) > div > span{
display: flex;
flex-flow: column nowrap;
padding-left: 15px;
}
.recommend >section:nth-of-type(2) > div > span>a{
font-size: 1.2rem;
}
.recommend >section:nth-of-type(2) > div > span i{
font-size: smaller;
background-color: #444444;
color: white;
border-radius: 30%;
padding: 4px;
}
/*************************************/
.last-update{
display: flex;
flex-flow: column nowrap;
}
.last-update>h2{
margin-bottom: 5px;
}
.last-update> section{
display: flex;
background-color: white;
padding: 8px;
margin-bottom: 15px;
/*flex-flow: column nowrap;*/
}
.last-update>section>a>img{
/*width: 350px;*/
height: 90px;
}
.last-update>section>span{
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
padding-left: 10px;
}
.last-update>section>span>i{
font-size: smaller;
}
.last-update>section>span>span{
display: flex;
justify-content: space-between;
}
.last-update>section>span>span>i{
background-color: #444444;
font-size: smaller;
border-radius: 30%;
padding: 3px;
color: white;
}
/************************************/
.latest-article{
display: flex;
flex-flow: column nowrap;
}
.latest-article>h2{
margin-bottom: 5px;
}
.latest-article>section{
display: flex;
/*flex-flow: column nowrap;*/
justify-content: space-between;
background-color: white;
padding: 5px;
margin-bottom: 20px;
}
/*.latest-article>section>a{*/
/* flex: 1;*/
/*}*/
.latest-article>section img {
width: 300px;
height: 90px;
/*padding-left: 18px;*/
}
.latest-article>section>a:first-of-type{
display: flex;
flex-flow: column nowrap;
padding-top: 20px;
padding-left: 10px;
}
.latest-article>section>a:first-of-type>i:last-of-type{
font-size: smaller;
margin-top: 10px;
}
/******************************/
.latest-blog{
display: flex;
flex-flow: column nowrap;
}
.latest-blog>h2{
margin-bottom: 0;
}
.latest-blog>section{
display: flex;
justify-content: space-between;
padding: 10px;
background-color: white;
margin: 10px 0;
height: 30px;
}
.latest-blog>section:last-of-type{
justify-content: center;
height: initial;
}
.latest-blog>section>a:nth-of-type(2){
font-size: smaller;
}
/******************************/
.latest-qa{
display: flex;
flex-flow: column nowrap;
}
.latest-qa>h2{
margin-bottom: 0;
}
.latest-qa>section{
display: flex;
justify-content: space-between;
padding: 10px;
background-color: white;
margin: 10px 0;
height: 30px;
}
.latest-qa>section:last-of-type{
justify-content: center;
height: initial;
}
.latest-qa>section>a:nth-of-type(2){
font-size: smaller;
}
/**********************************/
body>footer{
width: 100%;
height: 50px;
padding-top: 3px;
border-top: 1px solid lightgrey;
position: fixed;
bottom: 0;
}
footer>ul{
display: flex;
align-items: center;
}
footer>ul>li{
flex: 1;
}
footer>ul>li img{
width: 25px;
height: 25px;
}
footer>ul>li>a{
display: flex;
flex-flow: column nowrap;
align-items: center;
}
footer>ul>li>a:hover,
footer>ul>li>a:focus,
footer>ul>li>a:active{
color: red;
}运行结果：
手抄作业：
作业总结：
对于新学的语法知识点要积极抄写，这样有利于记忆，除此以外，还应记忆其使用场景。在敲老师的案例的代码时，应该自己先尝试不看老师代码来敲代码，确实不行再回过头来看老师的代码。这样更有利用于新学知识点的融汇贯通。
Correction status：qualified
Teacher's comments：看来你一直在默写我的代码, 相当牛, 坚持,继续
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
