微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > 12.27每周的大作业，仿PHP中文网移动端布局（主要运用FLEX弹性盒子）
博主信息
博文 30
粉丝 0
评论 1
访问量 30357
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
12.27每周的大作业，仿PHP中文网移动端布局（主要运用FLEX弹性盒子）
曾
原创
897人浏览过

一下是整段HTML代码，修改过很多次，看上去还是有点乱，需要在实践过程中去逐渐优化代码，与言简意赅的类名。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="font/iconfont.css">
  6.     <link rel="stylesheet" href="m.php.cn.css">
  7.     <title>仿m.php.cn练习</title>
  8. </head>
  9. <body>
  10. <header>
  11.         <a href=""><i class="iconfont icon-huiyuan3"></i></a>
  12.         <div>
  13.             <img src="images/logo.png" alt="">
  14.         </div>
  15.         <div>
  16.             <img src="images/cebian.png" alt="">
  17.         </div>
  18. </header>
  19. <main>
  20.     <nav>
  21.         <img src="images/6.png" alt="">
  22.         <div class="quick-entry">
  23.             <a href=""><img src="images/html.png" alt=""><p>HTML/CSS</p></a>
  24.             <a href=""><img src="images/JavaScript.png" alt=""><p>JavaScript</p></a>
  25.             <a href=""><img src="images/code.png" alt=""><p>服务端</p></a>
  26.             <a href=""><img src="images/sql.png" alt=""><p>数据库</p></a>
  27.             <a href=""><img src="images/app.png" alt=""><p>移动端</p></a>
  28.             <a href=""><img src="images/manual.png" alt=""><p>手册</p></a>
  29.             <a href=""><img src="images/tool2.png" alt=""><p>工具</p></a>
  30.             <a href=""><img src="images/live.png" alt=""><p>直播</p></a>
  31.         </div>
  32.     </nav>
  33.     <aside>
  34.         <h3>推荐课程</h3>
  35.         <section class="recommend">
  36.             <a href=""><img src="images/img1.jpg" alt=""></a>
  37.             <a href=""><img src="images/img2.jpg" alt=""></a>
  38.         </section>
  39.         <section class="course">
  40.             <img src="images/img3.jpg" alt="">
  41.             <div class="course-brief">
  42.                 <a href="">CI框架30分钟极速入门</a>
  43.                 <div>
  44.                     <span class="level">初级</span>
  45.                     <span>55643次播放</span>
  46.                 </div>
  47.             </div>
  48.         </section>
  49.         <section class="course">
  50.             <img src="images/img4.jpg" alt="">
  51.             <div class="course-brief">
  52.                 <a href="">CI框架30分钟极速入门</a>
  53.                 <div>
  54.                     <span class="level">初级</span>
  55.                     <span>55643次播放</span>
  56.                 </div>
  57.             </div>
  58.         </section>
  59.     </aside>
  60.     <article>
  61.         <h3>最新更新</h3>
  62.         <section class="renew">
  63.             <img src="images/img5.jpg" alt="">
  64.             <div class="renew-box1">
  65.                 <a href="">2019python自学视频</a>
  66.                 <span>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带</span>
  67.                 <div class="renew-text">
  68.                     <span>初级</span>
  69.                     <span>257125次播放</span>
  70.                 </div>
  71.             </div>
  72.         </section>
  73.         <section class="renew">
  74.             <img src="images/img6.png" alt="">
  75.             <div class="renew-box1">
  76.                 <a href="">PHP开发免费公益直播课</a>
  77.                 <span>主讲：php中文网-朱老师( Peter Zhu) 时间：2019.10.17 晚 20:00-22:00 主题</span>
  78.                 <div class="renew-text">
  79.                     <span>初级</span>
  80.                     <span>257125次播放</span>
  81.                 </div>
  82.             </div>
  83.         </section>
  84.         <section class="renew">
  85.             <img src="images/img7.png" alt="">
  86.             <div class="renew-box1">
  87.                 <a href="">从零开始到WEB响应式布局</a>
  88.                 <span>重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解，了解可以利</span>
  89.                 <div class="renew-text">
  90.                     <span>初级</span>
  91.                     <span>257125次播放</span>
  92.                 </div>
  93.             </div>
  94.         </section>
  95.         <section class="renew">
  96.             <img src="images/img8.jpg" alt="">
  97.             <div class="renew-box1">
  98.                 <a href="">PHP文件基础操作</a>
  99.                 <span>好多同学在PHP基础的时候对PHP文件的操作了解的不够多，本节课就带着大家</span>
  100.                 <div class="renew-text">
  101.                     <span>初级</span>
  102.                     <span>257125次播放</span>
  103.                 </div>
  104.             </div>
  105.         </section>
  106.         <section class="renew">
  107.             <img src="images/img9.png" alt="">
  108.             <div class="renew-box1">
  109.                 <a href="">memcache基础课程</a>
  110.                 <span>本课程带你从零认识memcache，让你在一小时左右轻松掌握memcache在windows和</span>
  111.                 <div class="renew-text">
  112.                     <span>初级</span>
  113.                     <span>257125次播放</span>
  114.                 </div>
  115.             </div>
  116.         </section>
  117.         <section class="renew">
  118.             <img src="images/img10.jpg" alt="">
  119.             <div class="renew-box1">
  120.                 <a href="">微信小程序--企业微网站</a>
  121.                 <span>1，介绍小程序、开发者工具 2，介绍小程序文档 3，微官网项目 4，首页、产品</span>
  122.                 <div class="renew-text">
  123.                     <span>初级</span>
  124.                     <span>257125次播放</span>
  125.                 </div>
  126.             </div>
  127.         </section>
  128.     </article>
  129.     <section class="new-essay">
  130.         <h3>最新文章</h3>
  131.         <div class="new-essay-box1">
  132.                 <div class="new-essay-box2">
  133.                     <a href=""><b>13个加速开发效率的现代CSS框架</b></a>
  134.                     <a href="">发布时间：2019-12-27</a>
  135.                 </div>
  136.                 <img src="images/img12.jpg" alt="">
  137.         </div>
  138.         <div class="new-essay-box1">
  139.             <div class="new-essay-box2">
  140.                 <a href=""><b>13个加速开发效率的现代CSS框架</b></a>
  141.                 <a href="">发布时间：2019-12-27</a>
  142.             </div>
  143.             <img src="images/img12.jpg" alt="">
  144.         </div>
  145.         <div class="new-essay-box1">
  146.             <div class="new-essay-box2">
  147.                 <a href=""><b>13个加速开发效率的现代CSS框架</b></a>
  148.                 <a href="">发布时间：2019-12-27</a>
  149.             </div>
  150.             <img src="images/img12.jpg" alt="">
  151.         </div>
  152.         <a href="">更多内容</a>
  153.     </section>
  154. </main>
  155. <footer>
  156.     <a href="">
  157.         <i class="iconfont icon-daohangshouye"></i>
  158.         <span>首页</span>
  159.     </a>
  161.     <a href="">
  162.         <i class="iconfont icon-yunhang"></i>
  163.         <span>视频</span>
  164.     </a>
  165.     <a href="">
  166.         <i class="iconfont icon-guangbo"></i>
  167.         <span >社区</span>
  168.     </a>
  169.     <a href="">
  170.         <i class="iconfont icon-huiyuan2"></i>
  171.         <span >我的</span>
  172.     </a>
  173. </footer>
  174. </body>
  175. </html>

以下是CSS代码，相对以前的代码来说，比较工整有一定进步，还需要努力

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     font-size: 13px;
  5.     /*outline: 1px dashed red ;*/
  6. }
  8. a{
  9.     text-decoration: none;
  10.     color: black;
  11. }
  13. body{
  14.     max-width: 760px;
  15.     min-width: 360px;
  16.     overflow: auto;
  17.     display: flex;
  18.     flex-direction: column;
  19.     margin: 0 auto;
  20.     height: 100vh;
  21.     background-color: #edeff0;
  22. }
  24. body>header{
  25.     background-color: #2c2e2f;
  26.     display: flex;
  27.     flex-direction: row;
  28.     justify-content: space-between;
  29.     align-items: center;
  30. }
  32. body>header>a{
  33.     margin-left: 5px;
  34.     box-sizing: border-box;
  35. }
  37. body>header>div:first-of-type>img{
  38.     height: 5vh;
  40. }
  42. .icon-huiyuan3{
  43.     font-size: 20px;
  44.     color: white;
  45. }
  47. body>main{
  48.     flex: 1;
  49.     display: flex;
  50.     flex-direction: column;
  51.     overflow: auto;
  52. }
  54. body>main>nav{
  55.     display: flex;
  56.     flex-direction: column;
  57. }
  58. body>main>nav>img{
  59.     height: 24vh;
  60. }
  61. body>main>nav>.quick-entry{
  62.     display: flex;
  63.     background-color: white;
  64.     flex-flow: row wrap;
  65.     justify-content: space-between;
  66. }
  68. body>main>nav>.quick-entry>a{
  69.     width: 180px;
  70.     text-align: center;
  71.     padding: 1vh 0;
  72.     box-sizing: border-box;
  73. }
  75. body>main>nav>.quick-entry>a>img{
  76.     /*width: 45px;*/
  77.     height: 6vh;
  79. }
  81. body>main>aside{
  82.     margin: 1vh;
  83.     /*padding: 1vh;*/
  84.     box-sizing: border-box;
  85.     display: flex;
  86.     flex-direction: column;
  87. }
  89. h3{
  90.     font-size: 16px;
  91.     padding: 1vh;
  92. }
  94. body>main>aside>.recommend{
  95.     margin: 1vh 0;
  96.     display: flex;
  97.     justify-content:space-between;
  98. }
  100. body>main>aside>.recommend>a>img{
  101.     box-sizing: border-box;
  102.     display: block;
  103.     height: 15vh;
  104.     width: 21vw;
  105. }
  107. body>main>aside>.course{
  108.     margin: 1vh 0;
  109.     display: flex;
  110.     background-color: #fff;
  111. }
  113. body>main>aside>.course>img{
  114.     height: 11vh;
  115.     width: 20vw;
  116.     padding: 1vh;
  117.     box-sizing: border-box;
  118. }
  120. body>main>aside>.course>.course-brief{
  121.     flex: 1;
  122.     display: flex;
  123.     flex-direction: column;
  125. }
  127. body>main>aside>.course>.course-brief>a{
  128.     padding-top: 1vh;
  129.     font-size: 16px;
  130.     color: #777;
  131.     margin-bottom: 1vh;
  132. }
  134. body>main>aside>.course>.course-brief>div>.level{
  135.     font-size: 11px;
  136.     color: white;
  137.     border-radius: 8px;
  138.     background-color: #595757;
  139.     padding: 2px;
  140. }
  142. body>main>aside>.course>.course-brief>div>.level + span{
  143.     font-size: 12px;
  144.     color: #777;
  145. }
  147. body>main>article{
  148.     margin: 1vh;
  149.     box-sizing: border-box;
  150.     display: flex;
  151.     flex-direction: column;
  152. }
  153. body>main>article>.renew{
  154.     margin: 1vh 0;
  155.     display: flex;
  156.     background-color: #fff;
  157.     /*align-items: center;*/
  158. }
  160. body>main>article>.renew>img{
  161.     height: 11vh;
  162.     width: 20vw;
  163.     padding: 1vh;
  164.     box-sizing: border-box;
  165. }
  167. body>main>article>.renew>.renew-box1{
  168.     margin-right: 2vw;
  169.     flex: 1;
  170.     display: flex;
  171.     flex-direction: column;
  172.     justify-content: space-around;
  173. }
  175. body>main>article>.renew>.renew-box1>a{
  176.     font-size: 16px;
  177.     color: #777;
  178. }
  180. body>main>article>.renew>.renew-box1>span{
  181.     font-size: 11px;
  182.     color: #777;
  183. }
  185. body>main>article>.renew>.renew-box1>.renew-text{
  186.     display: flex;
  187.     justify-content: space-between;
  188. }
  190. body>main>article>.renew>.renew-box1>.renew-text>span:first-child{
  191.     font-size: 11px;
  192.     color: white;
  193.     border-radius: 8px;
  194.     background-color: #595757;
  195.     padding: 2px;
  196. }
  198. body>main>article>.renew>.renew-box1>.renew-text>span:nth-last-child(1){
  199.     font-size: 11px;
  200.     color: #777;
  201. }
  203. body>main>.new-essay{
  204.     margin: 1vh;
  205.     box-sizing: border-box;
  206.     display: flex;
  207.     flex-direction: column;
  208. }
  210. body>main>.new-essay>.new-essay-box1{
  211.     box-shadow: 0 0 10px lightgray;
  212.     margin: 1vh 0;
  213.     display: flex;
  214.     background-color: white;
  215. }
  217. body>main>.new-essay>.new-essay-box1>.new-essay-box2{
  218.     flex:1;
  219.     display: flex;
  220.     flex-direction: column;
  221. }
  224. body>main>.new-essay>.new-essay-box1>img{
  225.     height: 9vh;
  226.     width: 14vw;
  227.     padding: 1vh;
  228.     box-sizing: border-box;
  229. }
  231. body>main>.new-essay>.new-essay-box1>.new-essay-box2>a{
  232.     padding: 1vh ;
  233.     font-size: 13px;
  234.     color: #777;
  235. }
  237. body>main>.new-essay>a{
  238.     background-color: white;
  239.     flex: 1;
  240.     text-align: center;
  241. }
  243. body>footer{
  244.     display: flex;
  245.     height: 5vh;
  246.     border-top: 2px solid lightgray;
  247.     box-sizing: border-box;
  248.     /*background-color: lightblue;*/
  249. }
  251. body>footer>a:first-of-type{
  252.     display: flex;
  253.     flex-direction: column;
  254.     flex: 1;
  255.     text-align: center;
  256.     padding: 1vh 0;
  257. }
  259. body>footer>a:nth-of-type(2){
  260.     display: flex;
  261.     flex-direction: column;
  262.     flex: 1;
  263.     text-align: center;
  264.     padding: 1vh 0;
  265. }
  267. body>footer>a:nth-of-type(3){
  268.     display: flex;
  269.     flex-direction: column;
  270.     flex: 1;
  271.     text-align: center;
  272.     padding: 1vh 0;
  273. }
  275. body>footer>a:last-of-type{
  276.     display: flex;
  277.     flex-direction: column;
  278.     flex: 1;
  279.     text-align: center;
  280.     padding: 1vh 0;
  281. }

实际效果图上部分

实际效果图下部分

进过一周的学习对于前端布局思路比才开始的时候清晰多了，大概思路就是，拿到整张设计图，想构思布局，把整个网页分成几个部分，每个部分有拆卸成几块（几个盒子），越拆越细的时候整体思路就会越来越清晰，想把HTML大概框架写出来，然后再去分析CSS的布局与写法。（前期分析得越详细，后期写起来越轻松）
另外有个问题想请教下老师，我写的页面滚动条就在内容旁边

而中文网移动端的滚动条却在浏览器的旁边，而不是内容的旁边

我在BODY上设置了overflow:auto滚动条显示也是在内容的旁边，不会移到浏览器边上

然后我padding后面的属性也是用1vh这样写的 不知道这样对不起。

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：vh只是一个普通的单位而已, 可以用在所有能用单位的地方, 当然包括padding
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录