search

博客列表 >使用flex布局，模仿m.php.cn首页----PHP培训十期线上班

使用flex布局，模仿m.php.cn首页----PHP培训十期线上班

Miss灬懒虫
Miss灬懒虫原创
2019年12月30日 14:29:39670浏览

使用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. }
上一条：flex实战下一条：Grid布局实现二手商品交易组件-20191228作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多