1. PHP中文网移动端首页
html代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>PHP中文网手机版首页</title><link rel="stylesheet" href="static/css/init.css"><link rel="stylesheet" href="static/css/style.css"></head><body><!--布局原则 宽度自适应，高度固定--><!--顶部设置为固定定位--><header><img src="static/images/user-pic.jpeg" alt=""><img src="static/images/logo.png" alt=""><img src="static/images/user-nav.jpg" alt=""></header><!--轮播图用图片代替--><div class="banner"><img src="static/images/banner.jpg" alt=""></div><!--导航区--><nav><ul><li><a href=""><img src="static/images/html.png" alt=""><span>HTML/CSS</span></a></li><li><a href=""><img src="static/images/JavaScript.png" alt=""><span>JavaScript</span></a></li><li><a href=""><img src="static/images/code.png" alt=""><span>服务端</span></a></li><li><a href=""><img src="static/images/sql.png" alt=""><span>数据库</span></a></li></ul><ul><li><a href=""><img src="static/images/app.png" alt=""><span>移动端</span></a></li><li><a href=""><img src="static/images/manual.png" alt=""><span>手册</span></a></li><li><a href=""><img src="static/images/tool2.png" alt=""><span>工具</span></a></li><li><a href=""><img src="static/images/live.png" alt=""><span>直播</span></a></li></ul></nav><!--课程区--><main><!-- 推荐课程区--><article class="recommend"><h3>推荐课程</h3><section><a href=""><img src="static/images/tjkc1.jpg" alt=""></a><a href=""><img src="static/images/tjkc2.jpg" alt=""></a></section><section><div><a href=""><img src="static/images/tjkc3.jpg" alt=""></a><span><a href="">CI框架30分钟极速入门</a><span><i>中级</i>49738次播放</span></span></div><div><a href=""><img src="static/images/tjkc4.jpg" alt=""></a><span><a href="">2018前端入门基础</a><span><i>初级</i>209952次播放</span></span></div></section></article><!-- 最新更新--><article><h3>最新更新</h3><section class="update"><div><a href=""><img src="static/images/zxgx1.jpg" alt=""></a><div><a href="">2019python自学视频</a><p>本课程适合想从零开始学习 python 编程语言的开发人员。由浅入深的带你进入p...</p><span><i>初级</i>2280次播放</span></div></div><div><a href=""><img src="static/images/zxgx2.png" alt=""></a><div><a href="">PHP开发免费公益直播课</a><p>主讲：PHP中文网-朱老师（Peter Zhu）时间：2019.10.17 晚 20:00-22:00 主题：...</p><span><i>初级</i>1766次播放</span></div></div><div><a href=""><img src="static/images/zxgx3.jpg" alt=""></a><div><a href="">从零开始到WEB响应式布局</a><p>重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解，了解可以利...</p><span><i>初级</i>3255次播放</span></div></div><div><a href=""><img src="static/images/zxgx4.png" alt=""></a><div><a href="">PHP文件基础操作</a><p>好多同学在PHP基础的时候对PHP文件的操作了解的不够多，本节课就带着大家...</p><span><i>中级</i>1719次播放</span></div></div><div><a href=""><img src="static/images/zxgx5.jpg" alt=""></a><div><a href="">memcache基础课程</a><p>本课程带你从零认识memcache，让你在一小时左右轻松掌握memcache在wind...</p><span><i>初级</i>829次播放</span></div></div><div><a href=""><img src="static/images/zxgx6.png" alt=""></a><div><a href="">微信小程序--企业微网站</a><p>1，介绍小程序、开发者工具 2，介绍小程序文档 3，微官网项目 4，首页、产品...</p><span><i>初级</i>3747次播放</span></div></div></section></article><!-- 最新文章--><article><h3>最新文章</h3><section class="essay"><a href=""><span><h4>PHP如何去除数组中的空值？（图文+视频）</h4><span>发布时间：2018-10-09</span></span><img src="static/images/zxwz1.png" alt=""></a><a href=""><span><h4>PHP冒泡排序算法是怎么实现的？（图文+视频）</h4><span>发布时间：2018-10-08</span></span><img src="static/images/zxwz2.png" alt=""></a><a href=""><span><h4>ThinkPHP5.1框架怎么通过Composer下载安装？（图文+视频）</h4><span>发布时间：2018-09-20</span></span><img src="static/images/zxwz3.png" alt=""></a><a href=""><span><h4>PHP怎么验证邮箱格式是否正确？（图文+视频）</h4><span>发布时间：2018-09-26</span></span><img src="static/images/zxwz4.png" alt=""></a><a href=""><span><h4>PHPStorm怎么配置xdebug工具并使用？（图文+视频）</h4><span>发布时间：2018-09-14</span></span><img src="static/images/zxwz5.png" alt=""></a><a href=""><span>更多内容</span></a></section></article><!-- 最新博文--><article><h3>最新博文</h3><section class="blog"><a href=""><h2>移动端、手机端、去掉横向滚动条 亲测生效!!!</h2><span>2019-11-08</span></a><a href=""><h2>PHP学习第一天：软件安装篇</h2><span>2019-11-08</span></a><a href=""><h2>Linux系统CentOS报错：could not resolve host:mirrorlist.centos.org问题</h2><span>2019-11-08</span></a><a href=""><h2>thinkphp5.0.24前置操作的大小写问题</h2><span>2019-11-07</span></a><a href=""><h2>laravel-创建“控制器”和“模型”，使用模型方法获取数据库内容并输出--2019...</h2><span>2019-11-04</span></a><a href=""><span>更多内容</span></a></section></article><!-- 最新问答--><article><h3>最新问答</h3><section class="blog"><a href=""><h2>在金沙网站玩AG视讯赢了不给有什么解决方法？</h2><span>2019-11-09</span></a><a href=""><h2>在威尼斯网站玩AG视讯赢了不给怎么办？</h2><span>2019-11-09</span></a><a href=""><h2>初来乍到，有什么不懂的地方还请大家多多指教。</h2><span>2019-11-09</span></a><a href=""><h2>出现这个怎么解决呀</h2><span>2019-11-09</span></a><a href=""><h2>登录密码 什么情况？？？</h2><span>2019-11-09</span></a><a href=""><span>更多内容</span></a></section></article></main><!--实现底部,底部与头部类似,也是固定定位实现--><footer><a href=""><img src="static/font-icon/zhuye.png" alt=""><span>主页</span></a><a href=""><img src="static/font-icon/video.png" alt=""><span>视频</span></a><a href=""><img src="static/font-icon/luntan.png" alt=""><span>社区</span></a><a href=""><img src="static/font-icon/geren.png" alt=""><span>我的</span></a></footer></body></html>
css代码 init.css
body, footer {min-width: 320px;max-width: 768px;margin: 0 auto;background: #edeff0;overflow-y: initial;position: relative;color: gray;/*不要出现水平滚动条*/overflow-x: hidden;/*设置点击链接跳转时出现高亮，设置为透明：ios/ipad*/-webkit-tap-highlight-color: transparent;}/*设置所有图片全部自适应父容器，响应式显示*/img {width: 100%;}ul, li {margin: 0;padding: 0;}li {list-style: none;}a {text-decoration: none;color: gray;}
css代码 style.css
/*顶部设置*/header {/*设置为固定定位*/position: fixed;top: 0;/*固定定位元素必须设置宽度和高度*/width: 100%;height: 42px;background: #444444;color: white;/*设置最小尺寸*/min-width: 320px;/*最大尺寸*/max-width: 768px;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;}/*用户头像设置为圆形*/header > img:first-of-type {border-radius: 50%;}/*设置中间logo样式*/header > img {width: 94px;}/*轮播图设置*/.banner {display: flex;height: 200px;}/*导航区设置*/nav {/*设置背景颜色为白色*/background-color: white;/*转为flex容器*/display: flex;/*主轴为垂直方向，且不换行*/flex-flow: column nowrap;}/*设置图片大小*/nav img {/*设置图片宽度*/width: 45px;/*设置图片高度*/height: 49px;}/*每一行导航都应该是一个弹性容器以方便布局*/nav > ul {/*转为flex容器*/display: flex;/*每个菜单项水平且不换行（默认值）*/flex-flow: row nowrap;}/*每一菜单项均分全部空间*/nav ul li {flex: 1;}/*图片与文本应该做为一个组件,统一设置*/nav ul li a {/*转为flex容器*/display: flex;/*图片, 链接文本垂直排列*/flex-flow: column nowrap;/*交叉轴上居中显示*/align-items: center;/*外边距可以使菜单项之间不太拥挤*/margin: 10px;}/*使菜单项文本与上面图标有一个间隙*/nav ul li a span {margin-top: 5px;}/*主体内容区*//*推荐课程区*/main {width: 748px;margin: 20px auto 50px;display: flex;flex-flow: column nowrap;color: #888888;}.recommend > section:first-of-type {display: flex;justify-content: space-between;}.recommend > section:first-of-type > a > img {width: 366px;height: 90px;}.recommend > section:last-of-type {display: flex;flex-flow: column nowrap;margin-top: 20px;}.recommend > section:last-of-type > div,.update > div {box-sizing: border-box;height: 98px;margin: 0 0 20px;padding: 9px 0 9px 10px;background: #ffffff;display: flex;}.recommend > section:last-of-type > div > a > img,.update > div > a > img {width: 295.2px;height: 80px;}.recommend > section:last-of-type > div > span {display: flex;flex-flow: column nowrap;margin-left: 10px;}.recommend > section:last-of-type > div > span > a {font-size: 16.5px;color: #888888;}.recommend > section:last-of-type > div > span > span {margin: 11px 0 0;font-size: 11px;}.recommend > section:last-of-type > div > span > span > i,.update > div > div > span > i {font-style: normal;background-color: #595757;color: white;padding: 3px;font-size: 10px;border-radius: 8px;margin-right: 2px;}.update > div > div {box-sizing: border-box;display: flex;flex-flow: column nowrap;margin-left: 10px;}.update > div > div > a {color: #888888;font-size: 16.5px;}.update > div > div > p {font-size: 11px;}.update > div > div > span {font-size: 11px;}.update > div > div > span {display: flex;justify-content: space-between;}.essay a {box-sizing: border-box;height: 84px;margin: 0 0 10px;padding: 10px 10px 8px;background: #ffffff;display: flex;justify-content: space-between;}.essay a > img {width: 218.4px;height: 65px;}.essay > a > span > h4 {font-size: 14px;color: #888888;margin: 0 0 10px;}.essay > a > span > span {font-size: 12px;color: #888888;}.essay > a:last-of-type,.blog > a:last-of-type {height: 29.6px;box-sizing: border-box;display: flex;justify-content: center;align-items: center;}.essay > a:last-of-type > span,.blog > a:last-of-type > span {font-size: 14px;color: #888888;}.blog > a {box-sizing: border-box;height: 48.2px;margin: 0 0 10px;padding: 10px 10px 8px;background: #ffffff;display: flex;justify-content: space-between;}.blog > a > h2 {font-size: 14px;color: #888888;margin: 0 0 10px;}.blog > a > span {font-size: 12px;color: #888888;}footer {position: fixed;bottom: 0;width: 100%;height: 50px;box-sizing: border-box;background-color: #eeeeee;display: flex;align-items: center;border-top: 1px solid #CCCCCC;}footer > a {flex: 1;box-sizing: border-box;display: flex;flex-flow: column nowrap;align-items: center;margin-top: 2px;}footer > a > img {width: 16px;height: 16.8px;}
2. 手抄代码
3. 总结
通过对PHP中文网移动端首页的实现，更加了解了flex，也了解了设计移动端页面的基本思路。
