博主信息
饮雪煮茶
饮雪煮茶
博文
11
粉丝
0
评论
0
访问量
7181
积分：0
P豆：22
最新更新
利用媒体查询实现自适应导航2020-04-06
php会话流程控制cookie和session的应用作业2020-01-20
PHP filter 过滤器知识2020-01-14
php作业训练用数组模拟数据库做动态网页网站博客2020-01-12
HTML制作静态商品购物车结算页面2020-01-01
用grid放二手商品交易列表2019-12-30
利用Flex弹性盒子仿 m.php.cn首页模板2019-12-28
Flex弹性盒子仿二手商品交易与评论回复页面2019-12-27
博文分类
前端学习8篇
PHP基础3篇
热门文章
HTML制作静态商品购物车结算页面3732
利用Flex弹性盒子仿 m.php.cn首页模板414
前端Flex弹性盒子作业，容器的六个属性及其使用403
Flex弹性盒子仿二手商品交易与评论回复页面383
前端Flex弹性盒子作业，弹性盒子元素的六个属性及其使用378
php作业训练用数组模拟数据库做动态网页网站博客378
PHP filter 过滤器知识375
php会话流程控制cookie和session的应用作业296

利用Flex弹性盒子仿 m.php.cn首页模板

2019年12月28日 10:28:19阅读数：414博客 / 饮雪煮茶/ 前端学习

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>移动端通用布局参考Flex实现</title>
  6.     <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" />
  7.     <meta name="applicable-device" content="mobile" />
  8.     <link rel="stylesheet" href="./static/css/layui.css">
  9.     <link rel="stylesheet" href="./static/css/index.css">
  10. </head>
  11. <body>
  12. <header>
  13.     <img src="./static/picture/login.png" alt="" width="42" height="42">
  14.     <img src="./static/picture/logo.png" alt="" width="94" height="45">
  15.     <i class="layui-icon layui-icon-spread-left"></i>
  16. </header>
  18. <main>
  19.     <header>
  20.         <img src="./static/picture/6.png" alt="" width="100%" height="100%">
  21.     </header>
  22.     <nav>
  23.         <span>
  24.             <img src="./static/picture/html.png" alt="">
  25.             <a href="">HTML/CSS</a>
  26.         </span>
  27.         <span>
  28.             <img src="./static/picture/javascript.png" alt="">
  29.             <a href="">JavaScript</a>
  30.         </span>
  31.         <span>
  32.             <img src="./static/picture/code.png" alt="">
  33.             <a href="">服务端</a>
  34.         </span>
  35.         <span>
  36.             <img src="./static/picture/sql.png" alt="">
  37.             <a href="">数据库</a>
  38.         </span>
  39.         <span>
  40.             <img src="./static/picture/app.png" alt="">
  41.             <a href="">移动端</a>
  42.         </span>
  43.         <span>
  44.             <img src="./static/picture/manual.png" alt="">
  45.             <a href="">手册</a>
  46.         </span>
  47.         <span>
  48.             <img src="./static/picture/tool2.png" alt="">
  49.             <a href="">工具</a>
  50.         </span>
  51.         <span>
  52.             <img src="./static/picture/live.png" alt="">
  53.             <a href="">直播</a>
  54.         </span>
  55.     </nav>
  56.     <section>
  57.         <h2>图文列表</h2>
  58.         <article>
  59.             <section>
  60.                 <img src="./static/picture/5db2b53c67bca626.jpg" alt="" width="100%">
  61.             </section>
  62.             <section>
  63.                 <h3><a href="">CI框架30分钟极速入门</a></h3>
  64.                 <p>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入p...</p>
  65.                 <section><span>初级</span><span>257106次播放</span></section>
  66.             </section>
  67.         </article>
  68.         <article>
  69.             <section>
  70.                 <img src="./static/picture/5db2b53c67bca626.jpg" alt="" width="100%">
  71.             </section>
  72.             <section>
  73.                 <h3><a href="">CI框架30分钟极速入门</a></h3>
  74.                 <p>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入p...</p>
  75.                 <section><span>初级</span><span>257106次播放</span></section>
  76.             </section>
  77.         </article>
  78.         <article>
  79.             <section>
  80.                 <img src="./static/picture/5db2b53c67bca626.jpg" alt="" width="100%">
  81.             </section>
  82.             <section>
  83.                 <h3><a href="">CI框架30分钟极速入门</a></h3>
  84.                 <p>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入p...</p>
  85.                 <section><span>初级</span><span>257106次播放</span></section>
  86.             </section>
  87.         </article>
  88.         <article>
  89.             <section>
  90.                 <img src="./static/picture/5db2b53c67bca626.jpg" alt="" width="100%">
  91.             </section>
  92.             <section>
  93.                 <h3><a href="">CI框架30分钟极速入门</a></h3>
  94.                 <p>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入p...</p>
  95.                 <section><span>初级</span><span>257106次播放</span></section>
  96.             </section>
  97.         </article>
  98.         <article>
  99.             <section>
  100.                 <img src="./static/picture/5db2b53c67bca626.jpg" alt="" width="100%">
  101.             </section>
  102.             <section>
  103.                 <h3><a href="">CI框架30分钟极速入门</a></h3>
  104.                 <p>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入p...</p>
  105.                 <section><span>初级</span><span>257106次播放</span></section>
  106.             </section>
  107.         </article>
  108.     </section>
  109. </main>
  111. <footer>
  112.     <a href=""><i class="layui-icon layui-icon-home"></i>首页</a>
  113.     <a href=""><i class="layui-icon layui-icon-play"></i>视频</a>
  114.     <a href=""><i class="layui-icon layui-icon-code-circle"></i>社区</a>
  115.     <a href=""><i class="layui-icon layui-icon-username"></i>我的</a>
  116. </footer>
  117. </body>
  118. </html>

css代码

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     /*outline: 1px dashed;*/
  5. }
  6. a {
  7.     color: #888;
  8. }
  9. body {
  10.     display: flex;
  11.     flex-direction: column;
  12.     min-width: 360px;
  13.     /*vh: view height, 可视区的高度*/
  14.     /*vw: view width, 可视区的宽度*/
  15.     height: 100vh;
  16.     width: 100vw;
  17.     /*box-sizing: border-box;*/
  18.     /*参考背景*/
  19.     /*background-color: #eeeeee;*/
  20. }
  22. body > header, body > footer {
  23.     height: 8vh;
  24.     /*background-color: lightblue;*/
  25.     display: flex;
  26.     justify-content: space-between;
  27.     align-items: center;
  28. }
  29. body > header{
  30.     background-color: #2d353c;
  31.     box-shadow: 0 0 10px 1px rgba(7, 17, 27, .1);
  32.     font-size: 19px;
  33.     color: #fff;
  34.     padding: 0 5px;
  35. }
  36. body > main {
  37.     flex-grow: 1;
  39.     overflow: auto;
  40.     display: flex;
  41.     flex-direction: column;
  42. }
  44. /*轮播*/
  45. body > main > header {
  46.     min-height: 20vh;
  47.     /*background-color: lightcyan;*/
  48. }
  50. /*导航区*/
  51. body > main > nav {
  52.     margin-top: 1vh;
  53.     min-height: 16vh;
  54.     /*background-color: lightsteelblue;*/
  55.     display: flex;
  56.     flex-flow: row wrap;
  57. }
  58. body > main > nav > span {
  59.     display: flex;
  60.     flex-flow: column nowrap;
  61.     width: 25vw;
  62.     align-items: center;
  63.     font-weight: 550;
  64. }
  65. body > main > nav > span > img{
  66.     width: 45px;
  67.     height: 45px;
  68. }
  69. /*主体内容区*/
  70. body > main > section {
  71.     display: flex;
  72.     flex-direction: column;
  73.     padding: 0 5px;
  74. }
  76. /*内容区的标题*/
  77. body > main > section > h2 {
  78.     padding: 1vh;
  79. }
  81. /*内容区的图文列表详情*/
  82. body > main > section > article {
  83.     display: flex;
  84.     flex-direction: row;
  85.     margin: 1vh 0;
  86. }
  87. body > main > section > article > section:first-of-type {
  88.     width: 30vw;
  89.     height: 10vh;
  90.     border: 1px solid gray;
  91.     /*background-color: wheat;*/
  92. }
  94. body > main > section > article > section:last-of-type {
  95.     /*将剩余空间全部分配给它*/
  96.     flex: 1;
  97.     /*background-color: lightcyan;*/
  98.     margin-left: 1vw;
  99.     color: #888;
  100. }
  101. body > main > section > article > section:last-of-type > h3{
  102.     font-weight: 400;
  103. }
  104. body > main > section > article > section:last-of-type >section>p{
  105.     font-size: 8px;
  106. }
  107. body > main > section > article > section:last-of-type >section>span:first-of-type{
  108.     background-color: #595757;
  109.     color: #fff;
  110.     border-radius: 8px;
  111.     padding: 3px;
  112.     font-size: 10px;
  113. }
  114. body > main > section > article > section:last-of-type >section{
  115.     display: flex;
  116.     flex-flow: row nowrap;
  117.     justify-content: space-between;
  118. }
  119. body > footer {
  120.     background: #eee;
  121.     display: flex;
  122.     justify-content: space-around;
  123. }
  124. body > footer >a{
  125.     display: flex;
  126.     flex-flow: column nowrap;
  127.     align-items: center;
  128. }

效果图

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

批改状态：合格

老师批语：是不是写起来很轻松呢

版权申明：本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论

文明上网理性发言，请遵守新闻评论服务协议

0 条评论
  • 提交
    首页视频教程原生手册编程词典工具下载免责声明赞助与捐赠

    Copyright 2014-2021 //m.sbmmt.com/ All Rights Reserved PHP中文网 版权所有

    php中文网：公益在线php培训，帮助PHP学习者快速成长！

    苏ICP备2020058653号-1

    关注公众号QQ交流群