Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 使用flex布局，模仿m.php.cn首页----PHP培训十期线上班
Blogger Information
Blog 22
fans 1
comment 1
visits 22283
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
使用flex布局，模仿m.php.cn首页----PHP培训十期线上班
Miss灬懒虫
Original
672 people have browsed it

使用flex布局，模仿m.php.cn首页(补12.27)

效果图

目录结构

布局分析

首先将页面分割为三部分，header、main、footer，其中header、和footer是固定的，而main则是自适应高度。

HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>移动端页面布局</title>
  6.     <link rel="stylesheet" href="css/index.css">
  7. </head>
  8. <body>
  9. <!--页面头部-->
  10. <div class="page-header">
  11.     <a href=""><img src="image/login.png" alt=""></a>
  12.     <a href=""><img src="image/logo.png" alt=""></a>
  13.     <a href=""><i class="iconfont">&#xec6b;</i></a>
  14. </div>
  16. <div class="page-main">
  17.     <!--头部banner滚动图-->
  18.     <div class="banner">
  19.         <a href=""><img src="image/banner/banner1.jpg" alt=""></a>
  20.     </div>
  21.     <!--页面头部导航-->
  22.     <div class="nav">
  23.         <a class="nav-list" href="">
  24.             <img src="image/navs/html.png" alt="">
  25.             <span>HTML/css</span>
  26.         </a>
  27.         <a class="nav-list" href="">
  28.             <img src="image/navs/JavaScript.png" alt="">
  29.             <span>JavaScript</span>
  30.         </a>
  31.         <a class="nav-list" href="">
  32.             <img src="image/navs/code.png" alt="">
  33.             <span>服务端</span>
  34.         </a>
  35.         <a class="nav-list" href="">
  36.             <img src="image/navs/sql.png" alt="">
  37.             <span>数据库</span>
  38.         </a>
  39.         <a class="nav-list" href="">
  40.             <img src="image/navs/app.png" alt="">
  41.             <span>移动端</span>
  42.         </a>
  43.         <a class="nav-list" href="">
  44.             <img src="image/navs/manual.png" alt="">
  45.             <span>手册</span>
  46.         </a>
  47.         <a class="nav-list" href="">
  48.             <img src="image/navs/tool2.png" alt="">
  49.             <span>工具</span>
  50.         </a>
  51.         <a class="nav-list" href="">
  52.             <img src="image/navs/live.png" alt="">
  53.             <span>直播</span>
  54.         </a>
  55.     </div>
  56.     <!--推荐课程-->
  57.     <div class="recommend">
  58.         <h3>推荐课程</h3>
  59.         <div class="rec-top">
  60.             <a href=""><img src="image/1.jpg" alt=""></a>
  61.             <a href=""><img src="image/2.jpg" alt=""></a>
  62.         </div>
  63.         <div class="rec-list">
  64.             <a href=""><img src="image/3.jpg" alt=""></a>
  65.             <div class="rec-content">
  66.                 <h2><a href="">CI框架30分钟极速入门</a></h2>
  67.                 <p>
  68.                     <span class="level">中级</span>
  69.                     <span>55724次播放</span>
  70.                 </p>
  71.             </div>
  72.         </div>
  73.         <div class="rec-list">
  74.             <a href=""><img src="image/4.jpg" alt=""></a>
  75.             <div class="rec-content">
  76.                 <h2><a href="">2018前端入门_HTML5</a></h2>
  77.                 <p>
  78.                     <span class="level">初级</span>
  79.                     <span>257725次播放</span>
  80.                 </p>
  81.             </div>
  82.         </div>
  83.     </div>
  84.     <!--最新更新-->
  85.     <div class="update">
  86.         <h3>最新更新</h3>
  87.         <div class="update-list">
  88.             <a href=""><img src="image/2-1.jpg" alt=""></a>
  89.             <div class="update-content">
  90.                 <h2><a href="">2019python自学视频</a></h2>
  91.                 <span>本课程适合想从零开始学习 Python 编程语言的开发</span>
  92.                 <div class="update-level">
  93.                     <span class="level">中级</span>
  94.                     <span>55724次播放</span>
  95.                 </div>
  96.             </div>
  97.         </div>
  98.         <div class="update-list">
  99.             <a href=""><img src="image/2-2.png" alt=""></a>
  100.             <div class="update-content">
  101.                 <h2><a href="">2019python自学视频</a></h2>
  102.                 <span>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入python</span>
  103.                 <div class="update-level">
  104.                     <span class="level">中级</span>
  105.                     <span>55724次播放</span>
  106.                 </div>
  107.             </div>
  108.         </div>
  109.         <div class="update-list">
  110.             <a href=""><img src="image/2-3.jpg" alt=""></a>
  111.             <div class="update-content">
  112.                 <h2><a href="">2019python自学视频</a></h2>
  113.                 <span>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入python</span>
  114.                 <div class="update-level">
  115.                     <span class="level">中级</span>
  116.                     <span>55724次播放</span>
  117.                 </div>
  118.             </div>
  119.         </div>
  120.         <div class="update-list">
  121.             <a href=""><img src="image/2-4.png" alt=""></a>
  122.             <div class="update-content">
  123.                 <h2><a href="">2019python自学视频</a></h2>
  124.                 <span>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入python</span>
  125.                 <div class="update-level">
  126.                     <span class="level">中级</span>
  127.                     <span>55724次播放</span>
  128.                 </div>
  129.             </div>
  130.         </div>
  131.         <div class="update-list">
  132.             <a href=""><img src="image/2-5.jpg" alt=""></a>
  133.             <div class="update-content">
  134.                 <h2><a href="">2019python自学视频</a></h2>
  135.                 <span>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入python</span>
  136.                 <div class="update-level">
  137.                     <span class="level">中级</span>
  138.                     <span>55724次播放</span>
  139.                 </div>
  140.             </div>
  141.         </div>
  142.         <div class="update-list">
  143.             <a href=""><img src="image/2-6.png" alt=""></a>
  144.             <div class="update-content">
  145.                 <h2><a href="">2019python自学视频</a></h2>
  146.                 <span>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入python</span>
  147.                 <div class="update-level">
  148.                     <span class="level">中级</span>
  149.                     <span>55724次播放</span>
  150.                 </div>
  151.             </div>
  152.         </div>
  153.     </div>
  154.     <!--最新文章-->
  155.     <div class="docs">
  156.         <h3>最新文章</h3>
  157.         <div class="doc-list">
  158.             <div class="doc-content">
  159.                 <a href=""><h2>VSCode,控制台乱码设置</h2></a>
  160.                 <a href="">发布时间：2019-12-30</a>
  161.             </div>
  162.             <a href="image/doc/vscode.jpg"><img src="image/doc/vscode.jpg" alt=""></a>
  163.         </div>
  164.         <div class="doc-list">
  165.             <div class="doc-content">
  166.                 <a href=""><h2>VSCode,控制台乱码设置</h2></a>
  167.                 <a href="">发布时间2019-12-30</a>
  168.             </div>
  169.             <a href=""><img src="image/doc/facebookcrsf.jpg" alt=""></a>
  170.         </div>
  171.         <div class="doc-list">
  172.             <div class="doc-content">
  173.                 <a href=""><h2>VSCode,控制台乱码设置</h2></a>
  174.                 <a href="">发布时间2019-12-30</a>
  175.             </div>
  176.             <a href=""><img src="image/doc/yii.jpg" alt=""></a>
  177.         </div>
  178.         <div class="doc-list">
  179.             <div class="doc-content">
  180.                 <a href=""><h2>VSCode,控制台乱码设置</h2></a>
  181.                 <a href="">发布时间2019-12-30</a>
  182.             </div>
  183.             <a href=""><img src="image/doc/facebookxss.jpg" alt=""></a>
  184.         </div>
  185.         <div class="doc-list">
  186.             <div class="doc-content">
  187.                 <a href=""><h2>VSCode,控制台乱码设置</h2></a>
  188.                 <a href="">发布时间2019-12-30</a>
  189.             </div>
  190.             <a href=""><img src="image/doc/yii.jpg" alt=""></a>
  191.         </div>
  192.         <a class="a-more" href="">更多内容</a>
  193.     </div>
  194.     <!--最新博文-->
  195.     <div class="blog-articles">
  196.         <h3>最新博文</h3>
  197.         <div class="com-articles">
  198.             <a href=""><h2>composer安装laravel，Nginx服务器路配置解决404问题，创建简单的控制</h2></a>
  199.             <a href="">2019-12-27</a>
  200.         </div>
  201.         <div class="com-articles">
  202.             <a href=""><h2>composer安装laravel，Nginx服务器路配置解决404问题，创建简单的控制</h2></a>
  203.             <a href="">2019-12-27</a>
  204.         </div>
  205.         <div class="com-articles">
  206.             <a href=""><h2>composer安装laravel，Nginx服务器路配置解决404问题，创建简单的控制</h2></a>
  207.             <a href="">2019-12-27</a>
  208.         </div>
  209.         <div class="com-articles">
  210.             <a href=""><h2>composer安装laravel，Nginx服务器路配置解决404问题，创建简单的控制</h2></a>
  211.             <a href="">2019-12-27</a>
  212.         </div>
  213.         <a class="a-more" href="">更多内容</a>
  215.     </div>
  216.     <!--最新问答-->
  217.     <div class="questions">
  218.         <h3>最新问答</h3>
  219.         <div class="com-articles">
  220.             <span>composer安装laravel，Nginx服务器路配置解决404问题，创建简单的控制</span>
  221.             <span>2019-12-27</span>
  222.         </div>
  223.         <div class="com-articles">
  224.             <a href=""><h2>composer安装laravel，Nginx服务器路配置解决404问题，创建简单的控制</h2></a>
  225.             <a href="">2019-12-27</a>
  226.         </div>
  227.         <div class="com-articles">
  228.             <a href=""><h2>composer安装laravel，Nginx服务器路配置解决404问题，创建简单的控制</h2></a>
  229.             <a href="">2019-12-27</a>
  230.         </div>
  231.         <div class="com-articles">
  232.             <a href=""><h2>composer安装laravel，Nginx服务器路配置解决404问题，创建简单的控制</h2></a>
  233.             <a href="">2019-12-27</a>
  234.         </div>
  235.         <div class="com-articles">
  236.             <a href=""><h2>composer安装laravel，Nginx服务器路配置解决404问题，创建简单的控制</h2></a>
  237.             <a href="">2019-12-27</a>
  238.         </div>
  239.         <a class="a-more" href="">更多内容</a>
  240.     </div>
  241. </div>
  243. <!--页面底部导航-->
  244. <div class="page-footer">
  245.     <a href=""><i class="iconfont">&#xe605;</i>首页</a>
  246.     <a href=""><i class="iconfont">&#xec61;</i>视频</a>
  247.     <a href=""><i class="iconfont">&#xeb66;</i>社区</a>
  248.     <a href=""><i class="iconfont">&#xe60e;</i>我的</a>
  249. </div>
  250. </body>
  251. </html>

CSS代码

  1. /*引入字体图标库*/
  2. @font-face {
  3.     font-family: 'iconfont';
  4.     src: url('../../html/1220/css/font/iconfont.eot');
  5.     src: url('../../html/1220/css/font/iconfont.eot?#iefix') format('embedded-opentype'),
  6.     url('../../html/1220/css/font/iconfont.woff2') format('woff2'),
  7.     url('../../html/1220/css/font/iconfont.woff') format('woff'),
  8.     url('../../html/1220/css/font/iconfont.ttf') format('truetype'),
  9.     url('../../html/1220/css/font/iconfont.svg#iconfont') format('svg');
  10. }
  11. .iconfont {
  12.     font-family: "iconfont", serif !important;
  13.     font-size: 16px;
  14.     font-style: normal;
  15.     -webkit-font-smoothing: antialiased;
  16.     -moz-osx-font-smoothing: grayscale;
  17. }
  19. /*初始化 --公共样式*/
  20. *{
  21.     margin: 0;
  22.     padding: 0;
  23. /*    outline: 1px dashed red;*/
  24. }
  25. a{
  26.     color: #888888;
  27.     text-decoration: none;
  28. }
  29. a:hover{
  30.     cursor: pointer;
  31. }
  32. h2{
  33.     font-weight: normal;
  34. }
  35. h3{
  36.     font-size: 18px;
  37. }
  39. /*页面整体样式*/
  40. body{
  41.     width: 100vw;
  42.     height: 100vh;
  43.     max-width: 768px;
  44.     font-size: 13px;
  45.     color: #888888;
  46.     background-color: #edeff0;
  47.     box-sizing: border-box;
  48.     display: flex;
  49.     flex-flow: column nowrap;
  50.     margin: 0 auto;
  51. }
  52. /*#8e888e -图标原色/图标红色#ff0000 /级别背景色 #595757*/
  54. /*页头页尾与主体内容布局样式*/
  55. body >.page-header,body >.page-main,body >.page-footer{
  56.     width: 100%;
  57.     max-width: 768px;
  58.     min-width: 320px;
  59. }
  61. /*页面头部 header*/
  62. body >.page-header{
  63.     height: 42px;
  64.     background-color: #2d353c;
  65.     display: flex;
  66.     justify-content:space-between;
  67. }
  68. body >.page-header > a:first-of-type >img {
  69.     width: 25px;
  70.     height: 25px;
  71.     border: 1px solid #8F9498;
  72.     border-radius: 50px;
  73.     margin: 8px 8px;
  74. }
  75. body >.page-header > a:nth-child(2) >img{
  76.     height: 42px;
  77. }
  78. body >.page-header > a:last-of-type{
  79.     line-height: 42px;
  80.     text-align: right;
  81.     margin-right: 14px;
  82. }
  83. body >.page-header >a>i{
  84.     font-size: 20px;
  85.     color: #fff;
  86. }
  88. /*页面主体内容 main*/
  89. body >.page-main{
  90.     width: 100%;
  91.     flex: auto;
  92.     overflow: auto;
  93.     display: flex;
  94.     flex-flow: column nowrap;
  95. }
  97. /*banner图 样式*/
  98. body >.page-main >.banner{
  99.     height: 150px;
  100. }
  101. .banner >a{
  102.     width: 100%;
  103.     height: 150Px;
  104.     display: inline-block;
  105. }
  106. .banner >a >img{
  107.     width: 100%;
  108.     height: 150Px;
  109. }
  110. /*顶部导航区 样式*/
  111. body >.page-main >.nav{
  112.     background-color: #fff;
  113.     margin-top: 10px;
  114.     display: flex;
  115.     flex-flow: row wrap;
  116.     justify-content: space-between;
  117. }
  118. .nav-list{
  119.     width: 160px;
  120.     height: 75px;
  121.     display: flex;
  122.     flex-flow: column nowrap;
  123.     justify-content: center;
  124.     align-items: center;
  125.     margin-top: 10px;
  126. }
  127. .nav-list> img{
  128.      width: 45px;
  129.      height: 45px;
  130.  }
  131. .nav-list> span{
  132.     font-weight: bolder;
  133. }
  134. /*推荐课程*/
  135. body>.page-main>.recommend{
  136.     height: 400px;
  137.     margin: 20px 10px 0 10px;
  138.     display: flex;
  139.     flex-flow: column nowrap;
  140. }
  141. .recommend>.rec-top{
  142.     margin: 10px 0;
  143.     display: flex;
  144.     flex-flow: row nowrap;
  145.     justify-content: space-between;
  146. }
  147. .recommend>.rec-top> a{
  148.     width: 367px;
  149.     height: 90px;
  150.     line-height: 90px;
  151. }
  152. .recommend>.rec-top> a> img{
  153.     width: 367px;
  154.     height: 90px;
  155. }
  157. .recommend >.rec-list{
  158.     height: 100px;
  159.     margin: 10px 0;
  160.     padding: 10px 10px;
  161.     background-color: #fff;
  162.     display: flex;
  163.     flex-flow: row nowrap;
  164. }
  165. .recommend >.rec-list >a,.recommend >.rec-list>.rec-content{
  166.     width: 295px;
  167.     height: 80px;
  168.     margin: auto;
  169. }
  170. .recommend >.rec-list >a>img{
  171.     width: 295px;
  172.     height: 80px;
  173. }
  174. .recommend >.rec-list>.rec-content{
  175.     margin-left: 10px;
  176.     flex: auto;
  177. }
  178. .recommend >.rec-list>.rec-content >p{
  179.     height: 20px;
  180.     line-height: 20px;
  181.     margin-top: 10px;
  182. }
  183. .recommend >.rec-list>.rec-content >p >span:first-of-type{
  184.     width: 40px;
  185.     height: 20px;
  186.     line-height: 20px;
  187.     background-color:#595757;
  188.     font-size: 12px;
  189.     color: #fff;
  190.     text-align: center;
  191.     border-radius: 5px;
  192.     margin-right: 5px;
  193.     display: inline-block;
  194. }
  196. /*最新更新*/
  197. body>.page-main>.update{
  198.     display: flex;
  199.     flex-flow: column nowrap;
  200.     margin: 20px 10px 0 10px;
  201. }
  202. .update>.update-list{
  203.     background-color: #fff;
  204.     margin-top: 10px;
  205.     padding: 10px 10px;
  206.     display: flex;
  207.     flex-flow: row nowrap;
  208. }
  209. .update>.update-list>a{
  210.     width: 295px;
  211.     height: 80px;
  212. }
  213. .update>.update-list>a >img{
  214.     width: 295px;
  215.     height: 80px;
  216. }
  217. .update>.update-list>.update-content{
  218.     height: 80px;
  219.     margin-left: 10px;
  220.     flex: auto;
  221.     display: flex;
  222.     flex-flow: column nowrap;
  223.     justify-content: space-between;
  224. }
  225. .update>.update-list>.update-content>.update-level{
  226.     display: flex;
  227.     flex-flow: row nowrap;
  228.     justify-content: space-between;
  229. }
  230. .update>.update-list>.update-content>.update-level>.level{
  231.     width: 40px;
  232.     height: 20px;
  233.     line-height: 20px;
  234.     background-color:#595757;
  235.     font-size: 12px;
  236.     color: #fff;
  237.     text-align: center;
  238.     border-radius: 5px;
  239.     margin-right: 5px;
  240.     display: inline-block;
  241. }
  243. /*最新文章*/
  244. body>.page-main>.docs{
  245.     display: flex;
  246.     flex-flow: column nowrap;
  247.     margin: 20px 10px 0 10px;
  248. }
  249. .docs>.doc-list{
  250.     height: 65px;
  251.     background-color: #fff;
  252.     margin: 10px 0;
  253.     padding: 10px 10px;
  254.     display: flex;
  255.     flex-flow: row nowrap;
  256. }
  257. .docs>.doc-list>a{
  258.     width: 218px;
  259.     height: 65px;
  260. }
  261. .docs>.doc-list>a>img{
  262.     width: 218px;
  263.     height: 65px;
  264. }
  265. .docs>.doc-list>.doc-content{
  266.     flex: auto;
  267.     display: flex;
  268.     flex-flow: column nowrap;
  269. }
  270. .docs>.doc-list>.doc-content>a:last-of-type{
  271.     margin-top: 10px;
  272. }
  273. .docs>.doc-list>.doc-content>a>h2,.com-articles>a>h2{
  274.     font-size: 14px;
  275.     font-weight: bold;
  276.     white-space: nowrap;
  277. }
  279. /*最新博文*/
  280. body>.page-main>.blog-articles{
  281.     margin: 20px 10px 0 10px;
  282.     display: flex;
  283.     flex-flow: column nowrap;
  284. }
  285. .com-articles{
  286.     height: 30px;
  287.     line-height: 30px;
  288.     background-color: #fff;
  289.     margin: 10px 0;
  290.     padding: 10px 10px;
  291.     display: flex;
  292.     flex-flow: row nowrap;
  293.     justify-content: space-between;
  294. }
  295. .a-more{
  296.     height: 30px;
  297.     background-color: #fff;
  298.     line-height: 30px;
  299.     text-align: center;
  300. }
  301. /*最新问答*/
  302. body>.page-main>.questions{
  303.     margin: 20px 10px 0 10px;
  304.     display: flex;
  305.     flex-flow: column nowrap;
  306. }
  307. /*页面尾部导航 footer*/
  308. body >.page-footer{
  309.     height: 60px;
  310.     background-color: #eeeeee;
  311.     display: flex;
  312.     justify-content:space-around ;
  313. }
  314. body>.page-footer>a{
  315.     height: 60px;
  316.     font-size: 1.1rem;
  317.     line-height: 60px;
  318.     text-align: center;
  319. }
  320. body>.page-footer>a:nth-child(1){
  321.     color: #ff2017;
  322. }
  323. body>.page-footer>a:nth-child(1)>i{
  324.     color: #ff2017;
  325. }
  326. body>.page-footer>a>i{
  327.     font-size: 24px;
  328. }
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：样式表非常的规范, 有商业项目的风采
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post