1. 将php中文网移动端剩余部分的内容写完
<!--最新更新-->
<div class="update">
<h3>最新更新</h3>
<div>
<a href=""><img src="static/images/1.png" alt=""></a>
<span>
<a href="">2019python自学视频</a>
<p>本课程适合想从零开始学习 Python...</p>
<span>
<i>初级</i>
<span>1979次播放</span>
</span>
</span>
</div>
<div>
<a href=""><img src="static/images/2.png" alt=""></a>
<span>
<a href="">PHP开发免费公益直播课</a>
<p>主讲:php中文网-朱老师( Peter Zhu...</p>
<span>
<i>初级</i>
<span>1707次播放</span>
</span>
</span>
</div>
<div>
<a href=""><img src="static/images/3.png" alt=""></a>
<span>
<a href="">从零开始到WEB响应式布局</a>
<p>重点介绍了HTML、CSS、web布局...</p>
<span>
<i>初级</i>
<span>3158次播放</span>
</span>
</span>
</div>
<div>
<a href=""><img src="static/images/4.png " alt=""></a>
<span>
<a href="">PHP文件基础操作</a>
<p>好多同学在PHP基础的时候对PHP文...</p>
<span>
<i>中级</i>
<span>1682次播放</span>
</span>
</span>
</div>
<div>
<a href=""><img src="static/images/5.png" alt=""></a>
<span>
<a href="">memcache基础课程</a>
<p>本课程带你从零认识memcache,让...</p>
<span>
<i>初级</i>
<span>794次播放</span>
</span>
</span>
</div>
<div>
<a href=""><img src="static/images/6.png" alt=""></a>
<span>
<a href="">微信小程序--企业微网站</a>
<p>1,介绍小程序、开发者工具...</p>
<span>
<i>初级</i>
<span>3615次播放</span>
</span>
</span>
</div>
</div>
<!--最新文章-->
<div class="newarticle">
<h3>最新文章</h3>
<div>
<a href="">
<div>
<h2>PHP中self与this关键字的区别</h2>
<span>发布时间:2019-11-08</span>
</div>
<img src="static/images/7.png" alt="">
</a>
</div>
<div>
<a href="">
<div>
<h2>php 安装zip模块</h2>
<span>发布时间:2019-11-06</span>
</div>
<img src="static/images/7.png" alt="">
</a>
</div>
<div>
<a href="">
<div>
<h2>PHP mysqli操作数据库</h2>
<span>发布时间:2019-11-07</span>
</div>
<img src="static/images/8.png" alt="">
</a>
</div>
<div>
<a href="">
<div>
<h2>ThinkPHP 5.x 远程命令执行漏洞分析与复现</h2>
<span>发布时间:2019-08-20</span>
</div>
<img src="static/images/9.png" alt="">
</a>
</div>
<div>
<a href="">
<div>
<h2>基于 ThinkPHP5.1 实现的海豚后台登录源码分析</h2>
<span>发布时间:2019-09-18</span>
</div>
<img src="static/images/10.png" alt="">
</a>
</div>
<div>
<a href="https://m.php.cn/article.html">更多内容</a>
</div>
</div>
<!--最新博文-->
<div class="blog">
<h3>最新博文</h3>
<div>
<a href="">
<h2>移动端 、手机端、去掉横向滚动条 亲测生效...</h2>
<span>2019-11-08</span>
</a>
</div>
<div>
<a href="">
<h2>PHP学习第一天:软件安装篇</h2>
<span>2019-11-08</span>
</a>
</div>
<div>
<a href="">
<h2>thinkphp5.0.24前置操作的大小写问题</h2>
<span>2019-11-07</span>
</a>
</div>
<div>
<a href="">
<h2>laravel-创建“控制器”和“模型”,使用...</h2>
<span>2019-11-04</span>
</a>
</div>
<div>
<a href="hhttps://m.php.cn/blog.html">更多内容</a>
</div>
</div>
<!--最新问答-->
<div class="answer">
<h3>最新问答</h3>
<div>
<a href="">
<h2>老师这样写还会出现错误,是为什么呀</h2>
<span>2019-11-08</span>
</a>
</div>
<div>
<a href="">
<h2>我写的哪里有错?请大神帮忙查看一下</h2>
<span>2019-11-08</span>
</a>
</div>
<div>
<a href="">
<h2>为什么我的 Mac电脑用 safari看...</h2>
<span>2019-11-08</span>
</a>
</div>
<div>
<a href="">
<h2>html翻译环境</h2>
<span>2019-11-08</span>
</a>
</div>
<div>
<a href="https://m.php.cn/wenda.html">更多内容</a>
</div>
</div>
/*************** 最新更新 ***************/
.update {
padding: 10px;
display: flex;
flex-flow: column nowrap;
}
.update > h3 {
padding: 0 0 10px;
}
.update img {
width: 200px;
height: 80px;
}
.update > div {
box-sizing: border-box;
margin: 0 0 10px 0;
padding: 9px 0 9px 10px;
font-size: 0.7rem;
background-color: #fff;
display: flex;
}
/*设置图片右侧*/
.update > div > span {
margin-left: 10px;
flex:1;
display: flex;
flex-flow: column nowrap;
}
.update > div > span a {
/*字体设回初始值*/
font-size:1rem;
}
.update > div > span i {
font-style: normal;
background-color: #333333;
color: white;
border-radius: 8px;
padding: 0 5px;
font-size: smaller;
}
/*播放次数 浮到右边去*/
.update > div > span > span > span {
float: right;
padding-right: 20px;
}
/*************** 最新文章 ***************/
.newarticle {
padding: 10px;
display: flex;
flex-flow: column nowrap;
}
.newarticle > h3 {
padding: 0 0 10px;
}
.newarticle img {
width: 150px;
height: 70px;
}
.newarticle > div > a {
box-sizing: border-box;
margin-bottom: 10px;
padding: 10px 10px 8px;
font-size: 0.7rem;
background-color: #fff;
display: flex;
}
.newarticle > div > a h2{
margin: 0 0 10px ;
}
.newarticle > div > a > div{
/*充满除右边图片的所有空间*/
flex:1;
}
/*************** 最新博文 ***************/
.blog {
padding: 10px;
display: flex;
flex-flow: column nowrap;
}
.blog > h3 {
padding: 0 0 10px;
}
.blog > div {
box-sizing: border-box;
height: 45px;
margin-bottom: 10px;
padding: 10px 10px 8px;
font-size: 0.7rem;
background-color: #fff;
}
.blog > div > a {
flex:1;
}
.blog > div > a h2{
margin: 0 0 10px;
padding: 0;
font-size:0.9rem;
}
.blog > div > a span{
float: right;
position: relative;
right: 0;
top:-30px;
}
.blog > div:last-of-type {
text-align: center;
}
(ps: 最新问答与最新博文css一样,区别就是answer框margin-bottom为50px,这样footer才不会盖住有效内容 )
2. 将中间导航菜单区的代码手抄至少一遍, 并给每一行代码加上注释
3.总结:
(1)一旦元素转为弹性盒子,不用之前是什么类型,通通块级;
(2)弹性容器的子元素, 都自动成为弹性元素,可以享用其多样的布局属性;
(2)有了弹性盒子,布局更加简单粗暴,且盒子里可以嵌套盒子,更灵活,更多样。