search

博客列表 >12.27每周的大作业，仿PHP中文网移动端布局（主要运用FLEX弹性盒子）

12.27每周的大作业，仿PHP中文网移动端布局（主要运用FLEX弹性盒子）

曾
曾原创
2019年12月28日 14:17:05698浏览

一下是整段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这样写的 不知道这样对不起。

上一条：javascript基础学习记录-2019年12月18日下一条：12月27日作业：pnp中文网移动端布局案例（flex）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多