0410flex练习 - php学习

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mypage</title>
</head>
<style>
{
margin:0px;
padding: 0px;
}
html
{
font-size: 14px;
max-width: 500px;
min-width: 360px;
}
body{

display: flex;
flex-flow: column nowrap;
background: #eaeaea;
}
a{ text-decoration: none;
color: #666;
}
/ 页头 /
header{
display: flex;
justify-content:space-between;
height: 50px;
background: #000;
align-items: center;
color: cornsilk;
padding: 0 15px;
/ position: fixed; /
}
header >a {color: cornsilk;
font-size: 1.2rem;}

/ 广告区 /
.slider{}
.slider img {width:100%;
}
/ 导航区 /
nav{
display: flex;
flex-flow: row wrap;
background: #ffffff;
}
nav a{
width: 25%;
display: flex;
flex-flow: column nowrap;
align-items: center;
margin: 10px 0px 10px 0px;
}
nav img{width:50%;
margin: 5px;
}
/ 产品和内容区 /
.content{
display: flex;
flex-flow: column nowrap;
background: #d8ddeb;
padding: 5px;
}

.title{
font-size: 1.2rem;
color: #004080;
margin: 5px 0px 5px 0px;
}
.title span{font-family: “iconfont” !important;
font-size: 1.5rem;
margin-right: 5px;}
.protwoimg{
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}

.protwoimg img{width:96%; }
.prolist{padding: 8px;
box-sizing: content-box;
background-color: #fff;
margin-bottom: 8px;}

.prolist h3{font-weight: normal;
font-size: 1rem;
margin-bottom: 5px;}
.prolist h4{font-weight: normal;
font-size: 0.8rem;
margin-bottom: 5px;
color: #888;}
.prolist span{
display: inline-flexbox;
font-size: 0.8rem;
color: #666666;}
.prolist span:first-of-type{background: #a8a8a8;
padding: 2px;
border-radius: 8px;
color: cornsilk;
margin-right: 5px;}
.imgleft{width: 40%;
float: left;
margin-right: 5px;}
.imgright{width: 40%;
float: right;}
.newlist{
display: flex;
flex-flow: column nowrap;
font-size: 0.8rem;
}
.newlist li{
display: block;
background: #ffffff;
padding: 12px;
margin: 3px;
border-radius: 4px;
}
.newlist span{float: right;
font-size: 0.7rem;}
footer{
display: flex;
position: fixed;
bottom: 0;
width: 100vw;
justify-content: space-evenly;
height: 60px;
background-color: #e0e0e0;
border-top: 1px solid #666;
}
footer span{
font-family: “iconfont” !important;
font-size: 1.5rem;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
footer > a{
display: flex;
flex-flow: column nowrap;
align-content: center;
font-size: 1rem;
text-align: center;
margin-top: 5px;
}
/ 图标字体 */
@font-face {
font-family: ‘iconfont’;
src: url(‘images/iconfont/iconfont.eot’);
src: url(‘images/iconfont/iconfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘images/iconfont/iconfont.woff2’) format(‘woff2’),
url(‘images/iconfont/iconfont.woff’) format(‘woff’),
url(‘images/iconfont/iconfont.ttf’) format(‘truetype’),
url(‘images/iconfont/iconfont.svg#iconfont’) format(‘svg’);
}
.iconfont {
font-family: “iconfont” !important;
font-size: 1.5rem;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #fff06f;
}
</style>
<body>

<header>
<a href="#">京西商城</a><span class="iconfont"></span></header>


<div class="slider"><a href=""><img src="images/ads.jpg" alt="" ></a></div>



<nav><a href=""><img src="images/link1.webp" alt="">HTML/CSS</a>
<a href=""><img src="images/link2.webp" alt="">JavaScript</a>
<a href=""><img src="images/link3.webp" alt="">服务端</a>
<a href=""><img src="images/link4.webp" alt="">数据库</a>
<a href=""><img src="images/link1.webp" alt="">移动端</a>
<a href=""><img src="images/link2.webp" alt="">手册</a>
<a href=""><img src="images/link3.webp" alt="">工具</a>
<a href=""><img src="images/link4.webp" alt="">直播</a></nav>


<div class="content">
<div class="title"><span></span>推荐课程</div>
<div class="protwoimg">
<a href=""><img src="images/ads.jpg" alt=""></a>
<a href=""><img src="images/ads.jpg" alt=""></a>
</div>
<div class="prolist">
<a href=""><img src="images/ads.jpg" alt="" class="imgleft"></a>
<a href=""><h3>CI框架30分钟极速入门</h3></a>
<span>中级 </span><span>61235次播放</span>
</div>

<div class="prolist">
<a href=""><img src="images/ads.jpg" alt="" class="imgleft"></a>
<a href=""><h3>CI框架30分钟极速入门</h3></a>
<span>中级 </span><span>61235次播放</span>
</div>

<div class="title"><span></span>最新更新</div>
<div class="prolist">
<a href=""><img src="images/ads.jpg" alt="" class="imgleft"></a>
<a href=""><h3>CI框架30分钟极速入门</h3></a>
<h4>主讲：php中文网-朱老师( Peter Zhu) 时间：2020</h4>
<span>中级 </span><span>61235次播放</span>
</div>
<div class="prolist">
<a href=""><img src="images/ads.jpg" alt="" class="imgleft"></a>
<a href=""><h3>CI框架30分钟极速入门</h3></a>
<h4>主讲：php中文网-朱老师( Peter Zhu) 时间：2020</h4>
<span>中级 </span><span>61235次播放</span>
</div>
<div class="title"><span></span>最新文章</div>
<div class="prolist">
<a href=""><img src="images/ads.jpg" alt="" class="imgright"></a>
<a href=""><h3>CI框架30分钟极速入门</h3></a>
<h4>主讲：php中文网-朱老师( Peter Zhu) 时间：2020</h4>
<span>中级 </span><span>61235次播放</span>
</div>
<div class="prolist">
<a href=""><img src="images/ads.jpg" alt="" class="imgright"></a>
<a href=""><h3>CI框架30分钟极速入门</h3></a>
<h4>主讲：php中文网-朱老师( Peter Zhu) 时间：2020</h4>
<span>中级 </span><span>61235次播放</span>
</div>
<div class="title"><span></span>最新博文</div>
<div class="newlist">
<li><a href="">thinkphp5.6源码阅读<span>2020-04-15</span></a></li>
<li><a href=""> Composer windows安装详细介绍<span>2020-04-14</span></a></li>
<li><a href=""> AI智能电销机器人源码源码解读（1）—基础<span>2020-04-12</span></a></li>
<li><a href=""> 利用css过滤实现玩网页夜模式适配<span>2020-04-11</span></a></li>
<li><a href=""> 元素框与盒模型、调整元素化的属性<span>2020-04-10</span></a></li>
</div>
<div class="title"><span></span>最新回答</div>
<div class="newlist">
<li><a href="">thinkphp5.6源码阅读<span>2020-04-15</span></a></li>
<li><a href=""> Composer windows安装详细介绍<span>2020-04-14</span></a></li>
<li><a href=""> AI智能电销机器人源码源码解读（1）—基础<span>2020-04-12</span></a></li>
<li><a href=""> 利用css过滤实现玩网页夜模式适配<span>2020-04-11</span></a></li>
<li><a href=""> 元素框与盒模型、调整元素化的属性<span>2020-04-10</span></a></li>
</div>
</div>

<footer>
<a href=""><span></span>首页</a>
<a href=""><span></span>分类</a>
<a href=""><span></span>产品</a>
<a href=""><span></span>我的</a></footer>
<div class="content" style="height: 60px;"></div>
</body>
</html>

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：代码版式全乱了, 没有总结 , 本想让你重新提交, 考虑到页面做得还能看, 下次注意

FLEX练习

练习结果

下面是代码