![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：前端基础课虽然已结束 ,但却是另一个起点的开始
Collection
Collection
此次案例主要练习了弹性布局中最常用的语法，总结如下：
1、转换弹性盒子使用：display:flex
2、转为弹性容器后需要设置主轴排列方向及是否换行，用felx-flow:row水平方向/column垂直方向 空格 wrap换行/nowrap不换行；
3、设置对齐方式/空间分配方案，此次li用到flex:1自动填充剩余空间。
4、最后还a链接还用到align-items:center，使图标和标题垂直对齐，垂直时：align-items用于单行，align-content:用于多行。
5、导航难点每一层都需要转成弹性容器，在盒子套盒子比较繁琐，个人经验：盒子套盒子情况下，元素转成盒子后就需要设置排列方向及是否换换行。也就是display:flex,和flex-flow是缺一不可的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>php中文网</title>
<style>
*{
margin: 0;
padding: 0;
/*outline: 1px solid grey;*/
}
a{
text-decoration: none;
color: gray;
}
li{
list-style: none;
}
.banner > img{
width: 100%;
height: 200px;
}
body,header,footer{
display: flex;
box-sizing: border-box;
min-width: 320px;
max-width: 768px;
margin: 0 auto;
}
body{
flex-flow: column nowrap;
background: #edeff0;
}
header{
width: 100%;
height: 42px;
background: #1a1a1a;
flex-flow: row nowrap;
position: fixed;
justify-content: space-between;
z-index: 999;
}
header > a{
display: flex;
box-sizing: border-box;
}
header > a:first-of-type > img,header > a:last-of-type > img{
width: 26px;
height: 26px;
margin: 5px 0;
}
header > a:first-of-type > img {
border-radius: 50%;
}
header > img {
width: 94px;
}
nav {
display: flex;/*导航转为弹性容器*/
flex-flow:column nowrap;/*垂直排列 不换行*/
background: white;/*底色白色*/
}
nav > ul {
display: flex;/*导航第一排转为弹性盒子*/
}
nav > ul > li {
flex: 1;
}
nav ul li a{
display: flex;/*图标转为弹性容器*/
flex-flow: column wrap;/*垂直排列换行*/
align-items: center;/*整体水平居中*/
margin: 10px;/*外边距*/
box-sizing: border-box;/*不改变容器大小*/
}
nav ul li a img{
width: 45px;/*图标宽度*/
height: 45px;/*图标高度*/
}
nav ul li a span{
margin-top: 5px;/*标题的上边距*/
}
main{
display: flex;
flex-flow: column nowrap;
}
main h3{
display: flex;
justify-content: flex-start;
align-items: center;
margin-top:15px;
color:lightslategray ;
}
main article{
display: flex;
flex-flow: column nowrap;
margin-top: 5px;
margin-bottom: 70px;
}
main > article > .section1{
display: flex;
}
main > article > .section1 a {
flex: 1;
margin: 5px;
}
main > article > .section1 a img{
width: 100%;
height: 90px;
}
main > article > .section2，
main > article > .section3{
display: flex;
flex-flow: column nowrap;
}
main > article >.section2 img {
width: 100%;
height: 80px;
}
main > article > .section2 > div{
display: flex;
flex-flow: row nowrap;
margin-top: 5px;
background: white;
padding: 10px;
}
main > article > .section2 > div > a{
width: 40%;
}
main > article > .section2 > div >span{
display: flex;
flex-flow: column nowrap;
margin:0 10px;
color:darkgrey;
width: 58%;
}
main > article > .section2 > div > span > span{
margin-top: 10px;
font-size: 0.7rem;
}
main > article > .section2 > div > span > a{
font-size: 1.2rem;
}
main > article > .section2 > div > span > span> i {
background: #1a1a1a;
color: #edeff0;
border-radius: 30%;
font-size: 0.8rem;
}
main > article >.section3 img {
width: 100%;
height: 80px;
}
main > article > .section3 > div > a{
width: 40%;
}
main > article > .section3 > div > span {
display: flex;
flex-flow: column nowrap;
margin:0 10px;
justify-content: space-between;
width: 58%;
}
main > article > .section3 > div > span > a:first-of-type{
font-size: 1.2rem;
}
main > article > .section3 > div > span > a:nth-of-type(2){
width: 380px;
font-size: 0.7rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
main > article > .section3 > div > span > span{
display: flex;
justify-content: space-between;
font-size: 0.7rem;
color: #999999;
}
main > article > .section3 > div > span > span > i {
font-size: 0.8rem;
background: #1a1a1a;
border-radius: 30%;
color: white;
}
main > article > .section3 > div,
main > article > .section4 > div {
display: flex;
padding: 10px;
background: white;
margin-top: 10px;
justify-content: space-between;
box-sizing: border-box;
padding: 10px;
flex: 1;
}
main > article > .section4 > div > a:first-of-type{
display: flex;
flex-flow: column nowrap;
width: 68%;
}
main > article > .section4 > div > a{
display: flex;
}
main > article > .section4 > div > a:last-of-type{
width: 30%;
}
main > article > .section4 > div > a > img{
width: 100%;
height: 65px;
}
main > article > .section4 > div > a > span{
margin-top: 8px;
}
main > article > .section4 > div > a > h4{
font-size: 1.1rem;
}
main > article > .section4 > a,
main > article > .section5 > a {
display: flex;
padding: 15px;
line-height: 10px;
background: white;
margin-top: 10px;
justify-content: center;
}
main > article > .section5 > div{
display: flex;
justify-content: space-between;
background: white;
padding: 10px 10px 20px;
margin-top: 10px;
}
footer{
width: 100%;
height: 62px;
justify-content: space-around;
position: fixed;
bottom: 0;
background: #edeff0;
align-items: center;
z-index: 999;
border-top:1px solid #999999;
}
footer > a {
width: 50px;
display: flex;
flex-flow: column nowrap;
align-items: center;
margin-top: 10px;
}
footer > a > img{
width: 20px;
}
footer > a > span {
margin-top: 3px;
}
footer > a:hover{
color: red;
}
</style>
</head>
<body>
<header>
<a href=""><img src="images\11.jpeg" alt=""></a>
<img src="images\logo.png" alt="">
<a href=""><img src="images\user-nav.jpg" alt=""></a>
</header>
<div class="banner">
<img src="images\banner.jpg" alt="">
</div>
<nav>
<ul>
<li>
<a href="">
<img src="images\html.png" alt="">
<span>html/css</span>
</a>
</li>
<li>
<a href="">
<img src="images\JavaScript.png" alt="">
<span>JavaScript</span>
</a>
</li>
<li>
<a href="">
<img src="images\code.png" alt="">
<span>服务器</span>
</a>
</li>
<li>
<a href="">
<img src="images\sql.png" alt="">
<span>数据库</span>
</a>
</li>
</ul>
<ul></ul>
<ul>
<li>
<a href="">
<img src="images\app.png" alt="">
<span>移动端</span>
</a>
</li>
<li>
<a href="">
<img src="images\manual.png" alt="">
<span>手册</span>
</a>
</li>
<li>
<a href="">
<img src="images\html.png" alt="">
<span>工具</span>
</a>
</li>
<li>
<a href="">
<img src="images\live.png" alt="">
<span>直播</span>
</a>
</li>
</ul>
</nav>
<main>
<h3>推荐课程</h3>
<article>
<section class="section1">
<a href="">
<img src="images\tjkc1.jpg" alt="">
</a>
<a href="">
<img src="images\tjkc2.jpg" alt="">
</a>
</section>
<section class="section2">
<div>
<a href=""><img src="images\tjkc3.jpg" alt=""></a>
<span>
<a href="">CI框架30分钟急速入门</a>
<span><i>中级</i>49381次播放</span>
</span>
</div>
<div>
<a href=""><img src="images\tjkc4.jpg" alt=""></a>
<span>
<a href="">218前端入门基础</a>
<span><i>初级</i>215486次播放</span>
</span>
</div>
</section>
<h3>最新更新</h3>
<section class="section3">
<div>
<a href=""><img src="images\tjkc4.jpg" alt=""></a>
<span>
<a href="">2019python自学视频</a>
<a href="">本课程适合想从零开始学习 Python 编程语言的开发人。由浅入深的带你进入py</a>
<span><i>初级</i>1707次播放</span>
</span>
</div>
<div>
<a href=""><img src="images\tjkc4.jpg" alt=""></a>
<span>
<a href="">2019python自学视频</a>
<a href="">本课程适合想从零开始学习 Python 编程语言的开发人。由浅入深的带你进入py</a>
<span><i>初级</i>1707次播放</span>
</span>
</div>
<div>
<a href=""><img src="images\tjkc4.jpg" alt=""></a>
<span>
<a href="">2019python自学视频</a>
<a href="">本课程适合想从零开始学习 Python 编程语言的开发人。由浅入深的带你进入py</a>
<span><i>初级</i>1707次播放</span>
</span>
</div>
<div>
<a href=""><img src="images\tjkc4.jpg" alt=""></a>
<span>
<a href="">2019python自学视频</a>
<a href="">本课程适合想从零开始学习 Python 编程语言的开发人。由浅入深的带你进入py</a>
<span><i>初级</i>1707次播放</span>
</span>
</div>
<div>
<a href=""><img src="images\tjkc4.jpg" alt=""></a>
<span>
<a href="">2019python自学视频</a>
<a href="">本课程适合想从零开始学习 Python 编程语言的开发人。由浅入深的带你进入py</a>
<span><i>初级</i>1707次播放</span>
</span>
</div>
<div>
<a href=""><img src="images\tjkc4.jpg" alt=""></a>
<span>
<a href="">2019python自学视频</a>
<a href="">本课程适合想从零开始学习 Python 编程语言的开发人。由浅入深的带你进入py</a>
<span><i>初级</i>1707次播放</span>
</span>
</div>
</section>
<section class="section4">
<h3>最新文章</h3>
<div>
<a href="">
<h4>PHP如何去除数组中的空值？（图文+视频></h4>
<span>发布日期：<time pubdate>2018-10-9</time></span>
</a>
<a href=""><img src="images\tjkc13.png" alt=""></a>
</div>
<div>
<a href="">
<h4>PHP如何去除数组中的空值？（图文+视频></h4>
<span>发布日期：<time pubdate>2018-10-9</time></span>
</a>
<a href=""><img src="images\tjkc13.png" alt=""></a>
</div>
<div>
<a href="">
<h4>PHP如何去除数组中的空值？（图文+视频></h4>
<span>发布日期：<time pubdate>2018-10-9</time></span>
</a>
<a href=""><img src="images\tjkc13.png" alt=""></a>
</div>
<div>
<a href="">
<h4>PHP如何去除数组中的空值？（图文+视频></h4>
<span>发布日期：<time pubdate>2018-10-9</time></span>
</a>
<a href=""><img src="images\tjkc13.png" alt=""></a>
</div>
<div>
<a href="">
<h4>PHP如何去除数组中的空值？（图文+视频></h4>
<span>发布日期：<time pubdate>2018-10-9</time></span>
</a>
<a href=""><img src="images\tjkc13.png" alt=""></a>
</div>
<a href="">更多内容</a>
</section>
<h3>最新博文</h3>
<section class="section5">
<div>
<a href=""><h4>PHP学习第一天，软件安装篇</h4></a>
<time>2019-11-07</time>
</div>
<div>
<a href=""><h4>PHP学习第一天，软件安装篇</h4></a>
<time>2019-11-07</time>
</div>
<div>
<a href=""><h4>PHP学习第一天，软件安装篇</h4></a>
<time>2019-11-07</time>
</div>
<div>
<a href=""><h4>PHP学习第一天，软件安装篇</h4></a>
<time>2019-11-07</time>
</div>
<div>
<a href=""><h4>PHP学习第一天，软件安装篇</h4></a>
<time>2019-11-07</time>
</div>
<a href="">更多内容</a>
</section>
<h3>最新问答</h3>
<section class="section5">
<div>
<a href=""><h4>在金沙网站玩AG视讯赢了不给有什么解决办法？</h4></a>
<time>2019-11-07</time>
</div>
<div>
<a href=""><h4>PHP学习第一天，软件安装篇</h4></a>
<time>2019-11-07</time>
</div>
<div>
<a href=""><h4>PHP学习第一天，软件安装篇</h4></a>
<time>2019-11-07</time>
</div>
<div>
<a href=""><h4>PHP学习第一天，软件安装篇</h4></a>
<time>2019-11-07</time>
</div>
<div>
<a href=""><h4>PHP学习第一天，软件安装篇</h4></a>
<time>2019-11-07</time>
</div>
<a href="">更多内容</a>
</section>
</article>
</main>
<footer>
<a href="" class="nav1">
<img src="images\tjkc5.png" alt="">
<span>首页</span>
</a>
<a href="" class="nav2">
<img src="images\tjkc6.png" alt="">
<span>视频</span>
</a>
<a href="" class="nav3">
<img src="images\tjkc7.png" alt="">
<span>社区</span>
</a>
<a href="" class="nav4">
<img src="images\tjkc8.png" alt="">
<span>我的</span>
</a>
</footer>
</body>
</html>点击 "运行实例" 按钮查看在线实例
实例：
手稿：
