一、PHP中文网手机端（m.php.com）案例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex-防PHP中文网移动端网站（m.php.cn）</title>
<!-- <link rel="stylesheet" href="css/style1.css">-->
<style>
/*样式初始化*/
body,footer{
min-width: 320px;
max-width: 768px;
margin: 0 auto;
background: #edeff0;
overflow-y: initial;
position: relative;
color: gray;
overflow-x: hidden;
/*针对苹果手机高亮透明*/
-webkit-tap-highlight-color: transparent;
}
img{
width: 100%;
}
ul,li{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
color: #555;
}
@import "init.css";
* {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-flow: column nowrap;
}
/*头部*/
header {
/*固定定位*/
position: fixed;
top: 0;
width: 100%;
height: 42px;
background-color: #444;
color: white;
min-width: 320px;
max-width: 768px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
}
header > img:first-of-type,
header > img:last-of-type {
width: 26px;
height: 26px;
margin: 5px 10px;
}
header > img {
width: 94px;
}
header > img:first-of-type {
border-radius: 50%;
}
/*轮播图*/
.banner {
display: flex;
}
/*导航区*/
nav {
background-color: #fff;
display: flex;
flex-flow: column nowrap;
}
nav img {
width: 45px;
height: 49px;
}
nav > ul {
display: flex;
}
nav ul li {
flex: 1;
}
nav ul li a {
display: flex;
/*垂直换行*/
flex-flow: column wrap;
/*在交叉轴上居中对齐*/
align-items: center;
margin: 10px;
}
nav ul li a span {
padding: 5px 0;
}
/**********************************主体内容区***********************************/
main {
display: flex;
flex-flow: column nowrap;
}
main > .recommend > h3,
main > .new > h3,
main > .new-artcle > h3 {
margin: 20px 0 5px;
}
/*设置水平排列*/
main > .recommend > section:first-of-type {
/*设置为弹性容器 默认水平排列*/
display: flex;
}
main > .recommend > section:first-of-type > a {
/*让每个弹性元素平均分配空间*/
flex: 1;
margin: 5px;
}
main > .recommend > section:first-of-type > a > img {
height: 90px;
}
/*垂直排列的课程*/
main > .recommend > section:last-of-type {
display: flex;
flex-flow: column nowrap;
}
main > .recommend > section:last-of-type > div {
background-color: #fff;
margin: 5px 0;
display: flex;
padding: 10px 10px 5px;
}
main > .recommend > section:last-of-type > div img,
main > .new > section > div img {
width: auto;
height: 85px;
}
main > .recommend > section:last-of-type > div > span {
display: flex;
flex-flow: column nowrap;
padding: 0 15px;
flex: 1;
}
main > .recommend > section:last-of-type > div > span > span {
font-size: 0.85rem;
margin-top: 10px;
}
main > .recommend > section:last-of-type > div > span i {
font-style: normal;
background: #333;
color: #fff;
border-radius: 5px;
padding: 0 6px;
margin-right: 5px;
}
/*最新更新*/
main > .new > section {
display: flex;
flex-flow: column nowrap;
}
main > .new > section > div,
main > .new-artcle > div {
background-color: #fff;
margin: 5px 0;
display: flex;
padding: 10px 10px 5px;
}
main > .new > section > div > span {
box-sizing: border-box;
display: flex;
flex-flow: column nowrap;
padding: 0 15px;
}
main > .new > section > div > span > p {
height: 20px;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
margin: 5px 0 10px;
font-size: 0.75rem;
}
main > .new > section > div > span > span {
display: flex;
font-size: 0.75rem;
justify-content: space-between;
}
main > .new > section > div > span > span i {
font-style: normal;
background: #444;
border-radius: 5px;
padding: 0 5px;
color: #fff;
}
/*更多按钮*/
main > .new > section > a,
main > .blog > p > a {
background-color: #fff;
display: flex;
justify-content: center;
padding: 5px 0;
margin: 5px 0;
}
/*最新文章*/
main > .new-artcle > div > a img {
width: 220px;
height: 64px;
}
main > .new-artcle > div > span {
display: flex;
flex-flow: column nowrap;
flex: 1;
order: -1;
}
main > .new-artcle > div > span > p {
margin: 5px 0 10px;
font-size: 0.75rem;
}
/*最新播放*/
main > .blog >h3{
margin: 15px 0 10px;
}
main > .blog > ul > li {
background: #fff;
padding: 15px;
margin: 5px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
/*底部*/
footer {
display: flex;
background: #edeff0;
position: fixed;
bottom: 0;
border-top: 1px solid #ccc;
width: 100%;
padding: 10px 0;
min-width: 320px;
max-width: 768px;
box-sizing: border-box;
}
footer > a {
display: flex;
flex: 1;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
footer > a img {
width: 25px;
}
</style>
</head>
<body>
<!--顶部固定定位-->
<header>
<img src="images/login.png" alt="">
<img src="images/logo.png" alt="">
<img src="images/ico.png" alt="">
</header>
<!--banner-->
<section class="banner">
<a href="#"><img src="images/banner.jpg" alt=""></a>
</section>
<!--导航-->
<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/html.png" alt="">
<span>服务端</span>
</a>
</li>
<li>
<a href="#">
<img src="images/sql.png" alt="">
<span>数据库</span>
</a>
</li>
</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/code.png" alt="">
<span>工具</span>
</a>
</li>
<li>
<a href="#">
<img src="images/live.png" alt="">
<span>直播</span>
</a>
</li>
</ul>
</nav>
<!--主体内容区-->
<main>
<!-- 推荐课程区-->
<article class="recommend">
<h3>推荐课程</h3>
<section>
<a href="#">
<img src="images/tj1.jpg" alt="">
</a>
<a href="#">
<img src="images/tj1.jpg" alt="">
</a>
</section>
<section>
<div>
<a href=""><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="">CI框架30分钟极速入门</a>
<span><i>中级</i>52971次播放</span>
</span>
</div>
<div>
<a href=""><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="">CI框架30分钟极速入门</a>
<span><i>中级</i>52971次播放</span>
</span>
</div>
</section>
</article>
<!-- 最新更新-->
<article class="new">
<h3>最新更新</h3>
<section>
<div>
<a href=""><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="">CI框架30分钟极速入门</a>
<p>重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解，了解可以利用HTML+CSS做什么，有相关工具、后端语言，逻辑思维训练等知识点</p>
<span><i>中级</i>52971次播放</span>
</span>
</div>
<div>
<a href=""><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="">CI框架30分钟极速入门</a>
<p>好多同学在PHP基础的时候对PHP文件的操作了解的不够多，本节课就带着大家来学习PHP文件的基础操作，PHP操作文件主要用到的就是PHP文件相关的函数，那么我们主要讲的也就是PHP文件相关的各种函数，相信本节课程会让你对PHP更感兴趣哦！</p>
<span><i>中级</i>52971次播放</span>
</span>
</div>
<div>
<a href=""><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="">CI框架30分钟极速入门</a>
<p>重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解，了解可以利用HTML+CSS做什么，有相关工具、后端语言，逻辑思维训练等知识点</p>
<span><i>中级</i>52971次播放</span>
</span>
</div>
<div>
<a href=""><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="">CI框架30分钟极速入门</a>
<p>好多同学在PHP基础的时候对PHP文件的操作了解的不够多，本节课就带着大家来学习PHP文件的基础操作，PHP操作文件主要用到的就是PHP文件相关的函数，那么我们主要讲的也就是PHP文件相关的各种函数，相信本节课程会让你对PHP更感兴趣哦！</p>
<span><i>中级</i>52971次播放</span>
</span>
</div>
<div>
<a href=""><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="">CI框架30分钟极速入门</a>
<p>重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解，了解可以利用HTML+CSS做什么，有相关工具、后端语言，逻辑思维训练等知识点</p>
<span><i>中级</i>52971次播放</span>
</span>
</div>
<div>
<a href=""><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="">CI框架30分钟极速入门</a>
<p>好多同学在PHP基础的时候对PHP文件的操作了解的不够多，本节课就带着大家来学习PHP文件的基础操作，PHP操作文件主要用到的就是PHP文件相关的函数，那么我们主要讲的也就是PHP文件相关的各种函数，相信本节课程会让你对PHP更感兴趣哦！</p>
<span><i>中级</i>52971次播放</span>
</span>
</div>
<div>
<a href="#"><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="#">CI框架30分钟极速入门</a>
<p>重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解，了解可以利用HTML+CSS做什么，有相关工具、后端语言，逻辑思维训练等知识点</p>
<span><i>中级</i>52971次播放</span>
</span>
</div>
<div>
<a href="#"><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="#">CI框架30分钟极速入门</a>
<p>好多同学在PHP基础的时候对PHP文件的操作了解的不够多，本节课就带着大家来学习PHP文件的基础操作，PHP操作文件主要用到的就是PHP文件相关的函数，那么我们主要讲的也就是PHP文件相关的各种函数，相信本节课程会让你对PHP更感兴趣哦！</p>
<span><i>中级</i>52971次播放</span>
</span>
</div>
<div>
<a href="#"><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="#">CI框架30分钟极速入门</a>
<p>重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解，了解可以利用HTML+CSS做什么，有相关工具、后端语言，逻辑思维训练等知识点</p>
<span><i>中级</i>52971次播放</span>
</span>
</div>
<div>
<a href="#"><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="#">CI框架30分钟极速入门</a>
<p>好多同学在PHP基础的时候对PHP文件的操作了解的不够多，本节课就带着大家来学习PHP文件的基础操作，PHP操作文件主要用到的就是PHP文件相关的函数，那么我们主要讲的也就是PHP文件相关的各种函数，相信本节课程会让你对PHP更感兴趣哦！</p>
<span><i>中级</i>52971次播放</span>
</span>
</div>
<a href="#">更多内容</a>
</section>
</article>
<!--最新文章-->
<article class="new-artcle">
<h3>最新文章</h3>
<div>
<a href="#"><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="#">CI框架30分钟极速入门</a>
<p>时间：2019年11月7日</p>
</span>
</div>
<div>
<a href="#"><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="#">CI框架30分钟极速入门</a>
<p>时间：2019年11月7日</p>
</span>
</div>
<div>
<a href="#"><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="#">CI框架30分钟极速入门</a>
<p><i>中级</i>52971次播放</p>
</span>
</div>
<div>
<a href="#"><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="#">CI框架30分钟极速入门</a>
<p>时间：2019年11月7日</p>
</span>
</div>
<div>
<a href="#"><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="#">CI框架30分钟极速入门</a>
<p>时间：2019年11月7日</p>
</span>
</div>
<div>
<a href="#"><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="#">CI框架30分钟极速入门</a>
<p>时间：2019年11月7日</p>
</span>
</div>
<div>
<a href="#"><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="#">CI框架30分钟极速入门</a>
<p>时间：2019年11月7日</p>
</span>
</div>
</article>
<!-- 最新博文-->
<article class="blog">
<h3>最新博文</h3>
<ul>
<li><a href="#">外交部就习近平访问希腊举行中外媒体吹风会</a><span>2019-08-02</span></li>
<li><a href="#">快船逆转擒开拓者 莱昂纳德27+13末节独得18分</a><span>2019-08-02</span></li>
<li><a href="#">64岁费玉清正式封麦，含泪告别47年演艺生涯！</a><span>2019-08-02</span></li>
<li><a href="#">车圈 | 欧盟官员称中国将取代德国汽车领头地位</a><span>2019-08-02</span></li>
<li><a href="#">魏锐危险了！赛前更换对手 连升两个级别作战</a><span>2019-08-02</span></li>
</ul>
<p><a href="#">更多内容</a></p>
</article>
<!-- 最新问答-->
<!-- 最新博文-->
<article class="blog">
<h3>最新问答</h3>
<ul>
<li><a href="#">外交部就习近平访问希腊举行中外媒体吹风会</a><span>2019-08-02</span></li>
<li><a href="#">快船逆转擒开拓者 莱昂纳德27+13末节独得18分</a><span>2019-08-02</span></li>
<li><a href="#">64岁费玉清正式封麦，含泪告别47年演艺生涯！</a><span>2019-08-02</span></li>
<li><a href="#">车圈 | 欧盟官员称中国将取代德国汽车领头地位</a><span>2019-08-02</span></li>
<li><a href="#">魏锐危险了！赛前更换对手 连升两个级别作战</a><span>2019-08-02</span></li>
</ul>
<p><a href="#">更多内容</a></p>
</article>
</main>
footer
<footer>
<a href="#">
<img src="images/home.png" alt="">
<span>首页</span>
</a>
<a href="">
<img src="images/video.png" alt="">
<span>视频</span>
</a>
<a href="">
<img src="images/code2.png" alt="">
<span>社区</span>
</a>
<a href="">
<img src="images/user.png" alt="">
<span>用户</span>
</a>
</footer>
</body>
</html>显示效果
手抄作业
总结：
（总结正在更新中..,）