学了flex布局后，简单模仿实现PHP中文网手机端首页的简单页面。
实例
<style type="text/css">
body {
min-width: 320px;
max-width: 768px;
margin: 0 auto;
background: #edeff0;
overflow-y: initial;
position: relative;
height: 2300px;
}
</style>
</head>
<body>
<!-- 布局原则：宽度自适应，高度固定 -->
<div class="top">
<img src="static/images/tx.jpg" alt="">
<div class="logo">
<img src="static/images/logo.png" alt="">
</div>
<img src="static/images/user-nav.jpg" alt="">
</div>
<div class="banner">
<img src="static/images/banner.jpg" alt="">
</div>
<!--导航区-->
<div class="nav">
<ul>
<li>
<a href=""><img src="static/images/html.png" alt=""><br>HTML/CSS</a>
</li>
<li>
<a href=""><img src="static/images/JavaScript.png" alt=""><br>JavaScript</a>
</li>
<li>
<a href=""><img src="static/images/code.png" alt=""><br>服务端</a>
</li>
<li>
<a href=""><img src="static/images/sql.png" alt=""><br>数据库</a>
</li>
</ul>
<ul>
<li>
<a href=""><img src="static/images/app.png" alt=""><br>移动端</a>
</li>
<li>
<a href=""><img src="static/images/manual.png" alt=""><br>手册</a>
</li>
<li>
<a href=""><img src="static/images/tool2.png" alt=""><br>工具</a>
</li>
<li>
<a href=""><img src="static/images/live.png" alt=""><br>直播</a>
</li>
</ul>
</div>
<!-- 课程区 -->
<h3>推荐课程</h3>
<div class="course">
<ul>
<li>
<a href=""><img src="static/images/tjkc1.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="static/images/tjkc2.jpg" alt=""></a>
</li>
</ul>
<div>
<a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
<p>
<a href="">CI框架30分钟极速入门</a>
<br>
<span>中级</span><span>49748次播放</span>
</p>
</div>
<div>
<a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
<p>
<a href="">2018前端入门_HTML5</a>
<br>
<span>初级</span><span>210066次播放</span>
</p>
</div>
</div>
<!-- 最新更新 -->
<h3>最新更新</h3>
<div class="update">
<div>
<a href=""><img src="static/images/zjgx1.jpg" alt=""></a>
<p>
<a href="">Laravel 5.8 中文文档手册</a>
<br>
<span>《Laravel 5.1/5.8速查表：https://www.php.cn/phpkj/laravel/cheatsheet58.html</span>
<br>
<span>中级</span>
<span>7447次播放 </span>
</p>
</div>
<div>
<a href=""><img src="static/images/zjgx2.jpg" alt=""></a>
<p>
<a href="">CSS3 极速入门</a>
<br>
<span>html和css是组成WEB前端开发最核心的部分，所以结合之前的html课程，我们... </span>
<br>
<span>中级</span>
<span>4500次播放</span>
</p>
</div>
<div>
<a href=""><img src="static/images/zjgx3.jpg" alt=""></a>
<p>
<a href="">
HTML5 极速入门</a>
<br>
<span>在本套课程中，你将学习如何使用 HTML 来创建站点</span>
<br>
<span>中级</span>
<span>5500次播放</span>
</p>
</div>
<div>
<a href=""><img src="static/images/zjgx1.jpg" alt=""></a>
<p>
<a href="">Laravel 5.8 中文文档手册</a>
<br>
<span>《Laravel 5.1/5.8速查表：https://www.php.cn/phpkj/laravel/cheatsheet58.html</span>
<br>
<span>中级</span>
<span>7447次播放 </span>
</p>
</div>
<div>
<a href=""><img src="static/images/zjgx2.jpg" alt=""></a>
<p>
<a href="">CSS3 极速入门</a>
<br>
<span>html和css是组成WEB前端开发最核心的部分，所以结合之前的html课程，我们... </span>
<br>
<span>中级</span>
<span>4500次播放</span>
</p>
</div>
<div>
<a href=""><img src="static/images/zjgx3.jpg" alt=""></a>
<p>
<a href="">
HTML5 极速入门</a>
<br>
<span>在本套课程中，你将学习如何使用 HTML 来创建站点</span>
<br>
<span>中级</span>
<span>5500次播放</span>
</p>
</div>
</div>
<!-- 最新文章 -->
<h3>最新文章</h3>
<div class="article">
<div>
<p>
<a href="">PHP之十六个魔术方法详解（总结）</a>
<br>
<span>发布时间：2019-07-29</span>
</p>
<a href=""><img src="static/images/article1.jpg" alt=""></a>
</div>
<div>
<p>
<a href="">PHP生成折线图和饼图</a>
<br>
<span>发布时间：2019-07-29</span>
</p>
<a href=""><img src="static/images/article2.png" alt=""></a>
</div>
<div>
<p>
<a href="">PHP之十六个魔术方法详解（总结）</a>
<br>
<span>发布时间：2019-07-29</span>
</p>
<a href=""><img src="static/images/article3.jpg" alt=""></a>
</div>
<div>
<p>
<a href="">PHP之十六个魔术方法详解（总结）</a>
<br>
<span>发布时间：2019-07-29</span>
</p>
<a href=""><img src="static/images/article4.jpg" alt=""></a>
</div>
<div>
<p>
<a href="">PHP之十六个魔术方法详解（总结）</a>
<br>
<span>发布时间：2019-07-29</span>
</p>
<a href=""><img src="static/images/article5.png" alt=""></a>
</div>
<a href="" class="more">更多内容</a>
</div>
<!-- 底部 -->
<div class="footer">
<ul>
<li>
<a href=""><img src="static/font-icon/zhuye.png" alt=""><br><span>主页</span></a>
</li>
<li>
<a href=""><img src="static/font-icon/video.png" alt=""><br><span>视频</span></a>
</li>
<li>
<a href=""><img src="static/font-icon/luntan.png" alt=""><br><span>社区</span></a>
</li>
<li>
<a href=""><img src="static/font-icon/geren.png" alt=""><br><span>我的</span></a>
</li>
</ul>
</div>
</body>运行实例 »
点击 "运行实例" 按钮查看在线实例
css代码
实例
.top {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 42px;
background-color: #444444;
min-width: 320px;
max-width: 768px;
left: 50%;
transform: translateX(-50%);
}
.top {
display: flex;
}
.top img:first-of-type,
.top img:last-of-type {
width: 25px;
height: 25px;
margin-top: 8px;
}
.top img:first-of-type {
border-radius: 50%;
margin-left: 5px;
}
.top .logo {
text-align: center;
flex: 1;
}
.top .logo img {
width: 94px;
height: 45px;
margin-top: -2px;
}
.banner {
display: flex;
}
.banner img {
width: 100%;
height: 160px;
}
/* 导航区 */
.nav {
height: 170px;
background-color: white;
/* 防止padding撑开盒子，直接将盒子宽高定义在边框上 */
box-sizing: border-box;
}
.nav ul {
margin: 0;
padding: 6px;
}
.nav ul li {
height: 75px;
list-style: none;
text-align: center;
}
.nav ul li img {
width: 45px;
height: 45px;
}
.nav ul li a {
color: gray;
text-decoration: none;
text-align: center;
}
.nav ul {
display: flex;
}
.nav ul li {
flex: 1;
}
/* 课程区 */
.course {
height: 340px;
color: gray;
padding: 10px 0;
}
.course ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.course ul li {
padding: 5px;
}
.course ul img {
width: 100%;
height: 90px;
}
.course div {
background-color: white;
padding: 10px;
margin-top: 10px;
height: 90px;
display: flex;
justify-content: flex-start;
}
.course div img {
height: 90px;
width: 100%;
}
.course div a {
text-decoration: none;
flex: 0.45;
color: gray;
}
.course div p {
flex: 0.55;
margin-left: 15px;
}
.course div p span:first-of-type {
font-size: 0.8rem;
background-color: black;
color: white;
border-radius: 30%;
padding: 0 4px;
}
.course div p span:last-of-type {
font-size: 0.7rem;
}
/* 最新更新区 */
.update {
height: 730px;
color: gray;
/* padding: 50px 10px 20px; */
}
.update div {
background-color: white;
/* padding: 10px; */
margin-top: 10px;
/* height: 90px; */
display: flex;
/* justify-content: flex-start; */
}
.update a img {
height: 90px;
width: 100%;
padding: 10px;
}
.update a {
text-decoration: none;
flex: 0.40;
color: gray;
}
.update p {
flex: 0.60;
margin-left: 15px;
padding: 0;
}
.update p span:first-of-type {
font-size: 0.6rem;
color: gray;
}
.update p span:nth-of-type(2) {
font-size: 0.8rem;
background-color: black;
color: white;
border-radius: 30%;
padding: 0 4px;
}
.update p span:last-of-type {
font-size: 0.7rem;
margin-left: 250px;
}
/* 最新文章 */
.article {
height: 500px;
color: gray;
/* padding: 10px 10px 5px; */
}
/* .article h3 {} */
.article div {
background-color: white;
padding: 10px;
margin-top: 10px;
height: 90px;
display: flex;
/* justify-content: flex-start; */
}
.article div {
display: flex;
height: 90px;
padding: 10px;
margin-top: 10px;
background-color: white;
}
.article p {
width: 100%;
height: 30px;
color: gray;
text-align: center;
line-height: 30px;
background-color: white;
}
.article div p {
color: gray;
height: 90px;
text-align: left;
padding-left: 10px;
flex: 0.6;
margin: 0;
display: flex;
flex-direction: column;
align-content: center;
}
.article p span {
font-size: 0.8rem;
}
.article div a {
text-decoration: none;
color: gray;
flex: 0.4;
font-weight: bolder;
font-size: 1.2rem;
}
.article div a img {
height: 90px;
width: 100%;
}
.article .more {
text-decoration: none;
display: block;
margin: 10px auto;
/* line-height: 30px; */
line-height: 10px;
text-align: center;
background: #fff;
padding: 10px 0;
color: royalblue;
}
/* 底部 */
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 42px;
background-color: #EEEEEE;
min-width: 320px;
max-width: 768px;
left: 50%;
transform: translateX(-50%);
}
.footer ul {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
.footer ul li img {
width: 20px;
height: 20px;
}
.footer ul li a {
color: gray;
text-decoration: none;
}
.footer ul li {
flex: 1;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
效果如下；
总结：flex布局要掌握定义在容器上的direction,wrap,justify-content,align-items,align-content的属性；和定义在项目上的flex-grow,flex-shrink,flex-basis,align-self属性。平常要多练，多敲代码。程序员不敲代码干什么。
