Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > html学习：大作业:　使用flex布局实现php中文网移动端网页布局
Blogger Information
Blog 52
fans 0
comment 3
visits 42612
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
html学习：大作业:　使用flex布局实现php中文网移动端网页布局
王小飞
Original
966 people have browsed it

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>手写php中文网移动端</title>
  7.     <!-- <link rel="stylesheet" href="icon.css" /> -->
  8.     <style>
  9.       @font-face {
  10.         font-family: "iconfont";
  11.         src: url("font_mices8wnt5/iconfont.eot");
  12.         src: url("font_mices8wnt5/iconfont.eot?#iefix")
  13.             format("embedded-opentype"),
  14.           url("font_mices8wnt5/iconfont.woff2") format("woff2"),
  15.           url("font_mices8wnt5/iconfont.woff") format("woff"),
  16.           url("font_mices8wnt5/iconfont.ttf") format("truetype"),
  17.           url("font_mices8wnt5/iconfont.svg#iconfont") format("svg");
  18.       }
  19.       .iconfont {
  20.         font-family: "iconfont" !important;
  21.         font-size: 16px;
  22.         font-style: normal;
  23.         -webkit-font-smoothing: antialiased;
  24.         -moz-osx-font-smoothing: grayscale;
  25.       }
  26.       html {
  27.         /* vw: 每个容器/可视区宽度,100vw:表示占满100份 */
  28.         width: 100vw;
  29.         /* 可视高度也是100份 */
  30.         height: 100vh;
  31.         /* 在html中设置字体大小, 给后的rem单位用 */
  32.         font-size: 14px;
  33.       }
  34.       * body {
  35.         /* 设置外边框 内边框为0 */
  36.         margin: 0;
  37.         padding: 0;
  38.         /* 设置底色 */
  39.         background-color: rgb(219, 219, 219);
  40.         display: flex;
  41.         /* 纵向排列 不换行 */
  42.         flex-flow: column nowrap;
  43.       }
  44.       a {
  45.         /* a标签去掉下划线 */
  46.         text-decoration: none;
  47.         /* 设置文字颜色 */
  48.         color: #666;
  49.       }
  50.       body > header {
  51.         display: flex;
  52.         background-color: rgb(29, 23, 23);
  53.         /* 设置导航栏高度 */
  54.         height: 45px;
  55.         /* 设置导航栏宽度为自适应 */
  56.         width: 100%;
  57.       }
  58.       body > header {
  59.         display: flex;
  60.         /* 垂直居中 */
  61.         align-items: center;
  62.         /* 设置三个图片分散对齐 */
  63.         justify-content: space-around;
  64.       }
  65.       /* 选择导航的第一个a标签 */
  66.       header a:first-of-type {
  67.         display: flex;
  68.         height: 30px;
  69.         width: 30px;
  70.         /* 距离左边距离 */
  71.         margin-left: -40px;
  72.       }
  73.       /* 选择导航的第二个a标签 */
  74.       header a:nth-child(2) {
  75.         display: flex;
  76.         height: 50px;
  77.         width: 100px;
  78.       }
  79.       /* 选择导航的最后一个a标签 */
  80.       header a:last-of-type {
  81.         display: flex;
  82.         margin-right: -40px;
  83.       }
  84.       body > .hdp {
  85.         display: flex;
  86.         /* 设置图片高度 */
  87.         height: 150px;
  88.       }
  89.       body > .hdp > a > img {
  90.         /* 图片宽度百分之百适应当前容器大小 */
  91.         width: 100%;
  92.       }
  93.       nav {
  94.         background-color: rgb(255, 253, 253);
  95.         /* 高度 */
  96.         height: 170px;
  97.         display: flex;
  98.         /* 变成多行容器 */
  99.         flex-flow: row wrap;
  100.       }
  101.       nav > div {
  102.         display: flex;
  103.         width: 25vw;
  104.         /* 弹性盒子 主轴垂直 不换行 */
  105.         flex-flow: column nowrap;
  106.         /* 交叉轴对齐 */
  107.         align-items: center;
  108.         /* 距离顶部边距 */
  109.         margin-top: 10px;
  110.       }
  111.       nav > div > a:first-of-type {
  112.         /* 图片主轴居中 */
  113.         text-align: center;
  114.       }
  115.       nav > div img {
  116.         /* 缩小图片 */
  117.         width: 50%;
  118.       }
  119.       h2 {
  120.         /* 距离顶部边距 */
  121.         margin-top: 25px;
  122.         /* 距离左边边距 */
  123.         margin-left: 11px;
  124.         color: rgba(102, 102, 102, 0.76);
  125.         /* 文字大小1.2倍 */
  126.         font-size: 1.3rem;
  127.       }
  128.       .tuijian1 {
  129.         display: flex;
  130.         /* 设置图片高度 */
  131.         height: 100px;
  132.         /* 分散对齐 */
  133.       }
  135.       .tuijian1 > a > img {
  136.         /* 图片宽度百分之百适应当前容器大小 */
  137.         margin: 0;
  138.         padding: 0;
  139.         /* 距离左边边距 */
  140.         margin-left: 10px;
  141.         /* 设置高度 */
  142.         height: 95px;
  143.       }
  144.       .tuijian2 {
  145.         background-color: rgb(255, 251, 251);
  146.         display: flex;
  147.         /* 纵向排列不换行 */
  148.         /* flex-flow: column nowrap; */
  149.         height: 102px;
  150.         margin-top: 15px;
  151.         width: 96%;
  152.         margin-left: 7px;
  153.       }
  154.       .tuijian2 > div > a > img {
  155.         height: 80px;
  156.         margin-left: 10px;
  157.         margin-top: 11px;
  158.       }
  159.       .tuijian2b {
  160.         margin-top: 10px;
  161.         margin-left: 8px;
  162.       }
  163.       .zjwz {
  164.         margin-top: 10px;
  165.         background-color: rgb(255, 251, 251);
  166.         height: 80px;
  167.         width: 96%;
  168.       }
  169.       .zjwzz {
  170.         /* 纵向排列不换行 */
  172.         display: flex;
  173.         white-space: nowrap;
  174.       }
  175.       .zjwz > .zjwzz > .zjwzzz {
  176.         margin-top: 10px;
  177.         margin-left: 5px;
  178.         font-size: 16px;
  179.       }
  180.       .zjwz > .zjwzz > .zjwzzz > span {
  181.         font-size: 12px;
  182.         color: rgba(102, 102, 102, 0.76);
  183.       }
  184.       .zjwzz > div > a > img {
  185.         height: 65px;
  186.         width: 100%;
  187.         margin-left: 80px;
  188.         margin-top: 10px;
  189.       }
  190.       .gdnr {
  191.         margin-top: 10px;
  192.         background-color: rgb(255, 251, 251);
  193.         height: 35px;
  194.       }
  195.       footer {
  196.         width: 100vw;
  197.         height: 6vh;
  198.         background-color: rgb(90, 89, 89);
  199.         display: flex;
  200.         justify-content: space-evenly;
  201.         align-items: center;
  202.         box-sizing: border-box;
  203.         position: fixed;
  204.         bottom: 0;
  205.       }
  206.       footer > div {
  207.         display: flex;
  208.         flex-flow: column nowrap;
  209.         color: lightgray;
  210.         align-items: center;
  211.         font-size: 0.8rem;
  212.         margin: 1vh 0;
  213.       }
  214.       footer > div > :first-of-type {
  215.         font-size: 2rem;
  216.       }
  217.       footer > div:hover {
  218.         color: lightsalmon;
  219.       }
  220.     </style>
  221.   </head>
  222.   <body>
  223.     <!-- 页头 -->
  224.     <header>
  225.       <a href=""><img src="login.png" alt="" /></a>
  226.       <a href=""><img src="logo.png" alt="" /></a>
  227.       <a href=""><img src="an.png" alt="" /></a>
  228.     </header>
  229.     <!-- 幻灯片 -->
  230.     <div class="hdp">
  231.       <a href=""><img src="2.jpg" alt="" /></a>
  232.     </div>
  233.     <!-- 主体导航 -->
  234.     <nav>
  235.       <div>
  236.         <a href=""><img src="html.png" alt="" /> </a><a href="">工具</a>
  237.       </div>
  238.       <div>
  239.         <a href=""><img src="JavaScript.png" alt="" /> </a><a href="">手册</a>
  240.       </div>
  241.       <div>
  242.         <a href=""><img src="html.png" alt="" /> </a><a href="">服务器</a>
  243.       </div>
  244.       <div>
  245.         <a href=""><img src="JavaScript.png" alt="" /> </a><a href="">直播</a>
  246.       </div>
  247.       <div>
  248.         <a href=""><img src="html.png" alt="" /> </a><a href="">数据库</a>
  249.       </div>
  250.       <div>
  251.         <a href=""><img src="JavaScript.png" alt="" /> </a><a href="">移动端</a>
  252.       </div>
  253.       <div>
  254.         <a href=""><img src="html.png" alt="" /> </a><a href="">php</a>
  255.       </div>
  256.       <div>
  257.         <a href=""><img src="JavaScript.png" alt="" /> </a><a href="">css</a>
  258.       </div>
  259.     </nav>
  260.     <!-- 推荐课程 标题 -->
  261.     <h2>推荐课程</h2>
  262.     <!-- 推荐课程 内容 -->
  263.     <div>
  264.       <div class="tuijian1">
  265.         <a href=""><img src="5d242759adb88970.jpg" alt="" /></a>
  266.         <a href=""><img src="5d242759adb88970.jpg" alt="" /></a>
  267.       </div>
  268.       <div>
  269.         <div class="tuijian2">
  270.           <div>
  271.             <a href=""><img src="5d2941e265889366.jpg" alt="" /> </a>
  272.           </div>
  273.           <div class="tuijian2b">
  274.             <div>
  275.               <a href="" style="font-size: 17px;">CI框架30分钟极速入门</a>
  276.             </div>
  278.             <p>
  279.               <span
  280.                 style="background-color: #575050; color: rgb(255, 248, 248);"
  281.                 >中级</span
  282.               ><span style="color: rgba(153, 147, 147, 0.808);"
  283.                 >61815次播放</span
  284.               >
  285.             </p>
  286.           </div>
  287.         </div>
  288.       </div>
  289.       <div>
  290.         <div class="tuijian2">
  291.           <div>
  292.             <a href=""><img src="5d2941e265889366.jpg" alt="" /> </a>
  293.           </div>
  294.           <div class="tuijian2b">
  295.             <div>
  296.               <a href="" style="font-size: 17px;">CI框架30分钟极速入门</a>
  297.             </div>
  299.             <p>
  300.               <span
  301.                 style="background-color: #575050; color: rgb(255, 248, 248);"
  302.                 >中级</span
  303.               ><span style="color: rgba(153, 147, 147, 0.808);"
  304.                 >61815次播放</span
  305.               >
  306.             </p>
  307.           </div>
  308.         </div>
  309.       </div>
  310.     </div>
  312.     <!-- 最近更新 标题 -->
  313.     <h2>最近更新</h2>
  314.     <!-- 最近更新 内容 -->
  315.     <div>
  316.       <div>
  317.         <div class="tuijian2">
  318.           <div>
  319.             <a href=""><img src="5aa23f0ded921649.jpg" alt="" /> </a>
  320.           </div>
  321.           <div class="tuijian2b">
  322.             <div>
  323.               <a href="" style="font-size: 17px;">CI框架30分钟极速入门</a><br />
  324.               <a
  325.                 href=""
  326.                 style="font-size: 11px; color: rgba(153, 147, 147, 0.808"
  327.                 >CI框架30分钟极速入门CI框架30分钟极速入门CI框架30分钟极速入门</a
  328.               >
  329.             </div>
  331.             <p>
  332.               <span
  333.                 style="background-color: #575050; color: rgb(255, 248, 248);"
  334.                 >中级</span
  335.               ><span style="color: rgba(153, 147, 147, 0.808);"
  336.                 >61815次播放</span
  337.               >
  338.             </p>
  339.           </div>
  340.         </div>
  341.       </div>
  342.     </div>
  343.     <div>
  344.       <div>
  345.         <div class="tuijian2">
  346.           <div>
  347.             <a href=""><img src="5aa23f0ded921649.jpg" alt="" /> </a>
  348.           </div>
  349.           <div class="tuijian2b">
  350.             <div>
  351.               <a href="" style="font-size: 17px;">CI框架30分钟极速入门</a><br />
  352.               <a
  353.                 href=""
  354.                 style="font-size: 11px; color: rgba(153, 147, 147, 0.808"
  355.                 >CI框架30分钟极速入门CI框架30分钟极速入门CI框架30分钟极速入</a
  356.               >
  357.             </div>
  359.             <p>
  360.               <span
  361.                 style="background-color: #575050; color: rgb(255, 248, 248);"
  362.                 >中级</span
  363.               >&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span
  364.                 style="color: rgba(153, 147, 147, 0.808);"
  365.                 >61815次播放</span
  366.               >
  367.             </p>
  368.           </div>
  369.         </div>
  370.       </div>
  371.     </div>
  372.     <div>
  373.       <div>
  374.         <div class="tuijian2">
  375.           <div>
  376.             <a href=""><img src="5aa23f0ded921649.jpg" alt="" /> </a>
  377.           </div>
  378.           <div class="tuijian2b">
  379.             <div>
  380.               <a href="" style="font-size: 17px;">CI框架30分钟极速入门</a><br />
  381.               <a
  382.                 href=""
  383.                 style="font-size: 11px; color: rgba(153, 147, 147, 0.808"
  384.                 >CI框架30分钟极速入门CI框架30分钟极速入门CI框架30分钟极速入门</a
  385.               >
  386.             </div>
  388.             <p>
  389.               <span
  390.                 style="background-color: #575050; color: rgb(255, 248, 248);"
  391.                 >中级</span
  392.               >&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span
  393.                 style="color: rgba(153, 147, 147, 0.808);"
  394.                 >61815次播放</span
  395.               >
  396.             </p>
  397.           </div>
  398.         </div>
  399.       </div>
  400.     </div>
  401.     <div>
  402.       <div>
  403.         <div class="tuijian2">
  404.           <div>
  405.             <a href=""><img src="5aa23f0ded921649.jpg" alt="" /> </a>
  406.           </div>
  407.           <div class="tuijian2b">
  408.             <div>
  409.               <a href="" style="font-size: 17px;">CI框架30分钟极速入门</a><br />
  410.               <a
  411.                 href=""
  412.                 style="font-size: 11px; color: rgba(153, 147, 147, 0.808"
  413.                 >CI框架30分钟极速入门CI框架30分钟极速入门CI框架30分钟极速入门</a
  414.               >
  415.             </div>
  417.             <p>
  418.               <span
  419.                 style="background-color: #575050; color: rgb(255, 248, 248);"
  420.                 >中级</span
  421.               >&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span
  422.                 style="color: rgba(153, 147, 147, 0.808);"
  423.                 >61815次播放</span
  424.               >
  425.             </p>
  426.           </div>
  427.         </div>
  428.       </div>
  429.     </div>
  430.     <div>
  431.       <div>
  432.         <div class="tuijian2">
  433.           <div>
  434.             <a href=""><img src="5aa23f0ded921649.jpg" alt="" /> </a>
  435.           </div>
  436.           <div class="tuijian2b">
  437.             <div>
  438.               <a href="" style="font-size: 17px;">CI框架30分钟极速入门</a><br />
  439.               <a
  440.                 href=""
  441.                 style="font-size: 11px; color: rgba(153, 147, 147, 0.808"
  442.                 >CI框架30分钟极速入门CI框架30分钟极速入门CI框架30分钟极速入门</a
  443.               >
  444.             </div>
  446.             <p>
  447.               <span
  448.                 style="background-color: #575050; color: rgb(255, 248, 248);"
  449.                 >中级</span
  450.               >&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span
  451.                 style="color: rgba(153, 147, 147, 0.808);"
  452.                 >61815次播放</span
  453.               >
  454.             </p>
  455.           </div>
  456.         </div>
  457.       </div>
  458.     </div>
  459.     <div>
  460.       <div>
  461.         <div class="tuijian2">
  462.           <div>
  463.             <a href=""><img src="5aa23f0ded921649.jpg" alt="" /> </a>
  464.           </div>
  465.           <div class="tuijian2b">
  466.             <div>
  467.               <a href="" style="font-size: 17px;">CI框架30分钟极速入门</a><br />
  468.               <a
  469.                 href=""
  470.                 style="font-size: 11px; color: rgba(153, 147, 147, 0.808"
  471.                 >CI框架30分钟极速入门CI框架30分钟极速入门CI框架30分钟极速入门</a
  472.               >
  473.             </div>
  475.             <p>
  476.               <span
  477.                 style="background-color: #575050; color: rgb(255, 248, 248);"
  478.                 >中级</span
  479.               >&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span
  480.                 style="color: rgba(153, 147, 147, 0.808);"
  481.                 >61815次播放</span
  482.               >
  483.             </p>
  484.           </div>
  485.         </div>
  486.       </div>
  487.     </div>
  489.     <!-- 最近文章 标题 -->
  490.     <h2>最新文章</h2>
  491.     <!-- 最近文章 内容 -->
  492.     <div class="zjwz">
  493.       <div class="zjwzz">
  494.         <div class="zjwzzz">
  495.           <a href="">文章标题文章标题标题</a><br />
  496.           <br />
  497.           <span>发布时间：2020-04-22</span>
  498.         </div>
  500.         <div>
  501.           <a href=""
  502.             ><img style="width: 100px;" src="5e9fe33197a93614.jpg" alt=""
  503.           /></a>
  504.         </div>
  505.       </div>
  506.     </div>
  507.     <div class="zjwz">
  508.       <div class="zjwzz">
  509.         <div class="zjwzzz">
  510.           <a href="">文章标题文章标题标题</a><br />
  511.           <br />
  512.           <span>发布时间：2020-04-22</span>
  513.         </div>
  515.         <div>
  516.           <a href=""
  517.             ><img style="width: 100px;" src="5e9fe33197a93614.jpg" alt=""
  518.           /></a>
  519.         </div>
  520.       </div>
  521.     </div>
  522.     <div class="zjwz">
  523.       <div class="zjwzz">
  524.         <div class="zjwzzz">
  525.           <a href="">文章标题文章标题标题</a><br />
  526.           <br />
  527.           <span>发布时间：2020-04-22</span>
  528.         </div>
  530.         <div>
  531.           <a href=""
  532.             ><img style="width: 100px;" src="5e9fe33197a93614.jpg" alt=""
  533.           /></a>
  534.         </div>
  535.       </div>
  536.     </div>
  537.     <div class="zjwz">
  538.       <div class="zjwzz">
  539.         <div class="zjwzzz">
  540.           <a href="">文章标题文章标题标题</a><br />
  541.           <br />
  542.           <span>发布时间：2020-04-22</span>
  543.         </div>
  545.         <div>
  546.           <a href=""
  547.             ><img style="width: 100px;" src="5e9fe33197a93614.jpg" alt=""
  548.           /></a>
  549.         </div>
  550.       </div>
  551.     </div>
  552.     <div class="zjwz">
  553.       <div class="zjwzz">
  554.         <div class="zjwzzz">
  555.           <a href="">文章标题文章标题标题</a><br />
  556.           <br />
  557.           <span>发布时间：2020-04-22</span>
  558.         </div>
  560.         <div>
  561.           <a href=""
  562.             ><img style="width: 100px;" src="5e9fe33197a93614.jpg" alt=""
  563.           /></a>
  564.         </div>
  565.       </div>
  566.     </div>
  567.     <div class="gdnr"><p>更多内容</p></div>
  568.     <!-- 页脚 -->
  569.     <footer>
  570.       <div>
  571.         <span class="iconfont">&#xe6ef;</span>
  572.         <span>首页</span>
  573.       </div>
  574.       <div>
  575.         <span class="iconfont">&#xe72f;</span>
  576.         <span>视频</span>
  577.       </div>
  578.       <div>
  579.         <span class="iconfont">&#xe744;</span>
  580.         <span>社区</span>
  581.       </div>
  582.       <div>
  583.         <span class="iconfont">&#xe6f0;</span>
  584.         <span>我的</span>
  585.       </div>
  586.     </footer>
  587.     <!-- 页脚 -->
  588.   </body>
  589. </html>

效果

效果gif：

总结：第一次自己写前段，写了好几天。这个写的 只有在火狐访问好看，其它浏览器都好丑

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：前端作业尽快完成 , 6月1日进入laravel教学
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