search

博客列表 >html学习：大作业:　使用flex布局实现php中文网移动端网页布局

html学习：大作业:　使用flex布局实现php中文网移动端网页布局

王小飞
王小飞原创
2020年05月20日 17:49:06962浏览

代码：

  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：

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

上一条：用composer搭建简单框架下一条：JavaScript之代码结构和变量声明细则
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多