亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 11
粉絲 0
評論 0
訪問量 30417
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
利用Flex彈性盒子仿 m.php.cn首頁模板
飲雪煮茶
原創(chuàng)
1140人瀏覽過

html代碼

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>移動端通用布局參考Flex實現(xiàn)</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="">服務(wù)端</a>
  34.         </span>
  35.         <span>
  36.             <img src="./static/picture/sql.png" alt="">
  37.             <a href="">數(shù)據(jù)庫</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>本課程適合想從零開始學(xué)習(xí) Python 編程語言的開發(fā)人員。由淺入深的帶你進入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>本課程適合想從零開始學(xué)習(xí) Python 編程語言的開發(fā)人員。由淺入深的帶你進入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>本課程適合想從零開始學(xué)習(xí) Python 編程語言的開發(fā)人員。由淺入深的帶你進入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>本課程適合想從零開始學(xué)習(xí) Python 編程語言的開發(fā)人員。由淺入深的帶你進入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>本課程適合想從零開始學(xué)習(xí) Python 編程語言的開發(fā)人員。由淺入深的帶你進入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>社區(qū)</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, 可視區(qū)的高度*/
  14.     /*vw: view width, 可視區(qū)的寬度*/
  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. /*導(dǎo)航區(qū)*/
  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. /*主體內(nèi)容區(qū)*/
  70. body > main > section {
  71.     display: flex;
  72.     flex-direction: column;
  73.     padding: 0 5px;
  74. }
  76. /*內(nèi)容區(qū)的標(biāo)題*/
  77. body > main > section > h2 {
  78.     padding: 1vh;
  79. }
  81. /*內(nèi)容區(qū)的圖文列表詳情*/
  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. }

效果圖

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：是不是寫起來很輕松呢
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費學(xué)