search

博客列表 >利用Flex弹性盒子仿 m.php.cn首页模板

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

饮雪煮茶
饮雪煮茶原创
2019年12月28日 10:28:19970浏览

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. }

效果图

上一条：微信中点击链接弹出防封遮罩层强制使用浏览器打开页面的最新实现方式下一条：flex实战2（12.26作业）+ PHP培训十期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多