search

博客列表 >html:FLEX实战，仿php中文网手机端网站（0410）

html:FLEX实战，仿php中文网手机端网站（0410）

ALWAYS
ALWAYS原创
2020年04月13日 19:17:24578浏览

写的布局有点乱，老师见谅

效果图


html 部分

  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.     <!-- 引入字体文件 -->
  7.     <link rel="stylesheet" href="CSS/font-icon.css" />
  8.     <link rel="stylesheet" href="CSS/phpweb.css" />
  9.     <!-- <span class="iconfont">&#xe614;</span> -->
  10.     <title>仿php中文网移动端</title>
  11.   </head>
  12.   <body>
  13.     <!-- 页眉 -->
  14.     <header>
  15.       <!-- logo -->
  16.       <a href=""> LOGO</a>
  17.       <img src="images/logo.png" height="26px" alt="" />
  18.       <span class="iconfont">&#xe614;</span>
  19.     </header>
  20.     <!-- 轮播图 -->
  21.     <div class="slider">
  22.       <img src="images/slide.jpg" alt="" />
  23.     </div>
  24.     <!-- 主导航区 -->
  25.     <nav>
  26.       <!-- 8个图标 -->
  27.       <div>
  28.         <a href=""><img src="images/html.png" alt="" /></a>
  29.         <a href="">HTML/CSS</a>
  30.       </div>
  32.       <div>
  33.         <a href=""><img src="images/JavaScript.png" alt="" /></a>
  34.         <a href="">JavaScript</a>
  35.       </div>
  37.       <div>
  38.         <a href=""><img src="images/code.png" alt="" /></a>
  39.         <a href="">服务端</a>
  40.       </div>
  42.       <div>
  43.         <a href=""><img src="images/sql.png" alt="" /></a>
  44.         <a href="">数据库</a>
  45.       </div>
  46.       <div>
  47.         <a href=""><img src="images/app.png" alt="" /></a>
  48.         <a href="">移动端</a>
  49.       </div>
  50.       <div>
  51.         <a href=""><img src="images/manual.png" alt="" /></a>
  52.         <a href="">手册</a>
  53.       </div>
  54.       <div>
  55.         <a href=""><img src="images/tool2.png" alt="" /></a>
  56.         <a href="">工具</a>
  57.       </div>
  58.       <div>
  59.         <a href=""><img src="images/live.png" alt="" /></a>
  60.         <a href="">直播</a>
  61.       </div>
  62.     </nav>
  63.     <!-- 推荐课程区域 -->
  64.     <h2 class="title">推荐课程</h2>
  65.     <div class="hot">
  66.       <a href=""><img src="images/5d2426f409839992.jpg" alt="" /></a>
  67.       <a href=""><img src="images/5d242759adb88970.jpg" alt="" /></a>
  68.     </div>
  69.     <div class="hot2">
  70.       <a href=""><img src="images/30.jpg" alt="" /> </a>
  71.       <a href="">
  72.         CI框架30分钟极速入门
  73.         <p>
  74.           <span class="level">中级</span>
  75.           <span>61343次播放</span>
  76.         </p>
  77.       </a>
  78.     </div>
  79.     <div class="hot2">
  80.       <a href=""><img src="images/32.jpg" alt="" /> </a>
  81.       <a href="">
  82.         2018前端入门_HTML5
  83.         <p>
  84.           <span class="level">初级</span>
  85.           <span>310772次播放</span>
  86.         </p>
  87.       </a>
  88.     </div>
  89.     <!-- 最新更新区 -->
  90.     <h2 class="title">最新更新</h2>
  91.     <div class="newlist">
  92.       <a href=""><img src="images/41.png" alt="" /> </a>
  94.       <a href="">
  95.         PHP快速操控Excel之PhpSpreadsheet
  96.         <span
  97.           >老的PHPExcel已经停止更新了！目前最新的是使用phpOffice插件PhpSpreadsheet，...</span
  98.         >
  99.         <p>
  100.           <span class="level">中级</span>
  101.           <span>61343次播放</span>
  102.         </p>
  103.       </a>
  104.     </div>
  105.     <div class="newlist">
  106.       <a href=""><img src="images/42.png" alt="" /> </a>
  108.       <a href="">
  109.         PHP快速操控Excel之PhpSpreadsheet
  110.         <span
  111.           >老的PHPExcel已经停止更新了！目前最新的是使用phpOffice插件PhpSpreadsheet，...</span
  112.         >
  113.         <p>
  114.           <span class="level">中级</span>
  115.           <span>61343次播放</span>
  116.         </p>
  117.       </a>
  118.     </div>
  119.     <div class="newlist">
  120.       <a href=""><img src="images/43.jpg" alt="" /> </a>
  122.       <a href="">
  123.         PHP快速操控Excel之PhpSpreadsheet
  124.         <span
  125.           >老的PHPExcel已经停止更新了！目前最新的是使用phpOffice插件PhpSpreadsheet，...</span
  126.         >
  127.         <p>
  128.           <span class="level">中级</span>
  129.           <span>61343次播放</span>
  130.         </p>
  131.       </a>
  132.     </div>
  133.     <div class="newlist">
  134.       <a href=""><img src="images/44.png" alt="" /> </a>
  136.       <a href="">
  137.         PHP快速操控Excel之PhpSpreadsheet
  138.         <span
  139.           >老的PHPExcel已经停止更新了！目前最新的是使用phpOffice插件PhpSpreadsheet，...</span
  140.         >
  141.         <p>
  142.           <span class="level">中级</span>
  143.           <span>61343次播放</span>
  144.         </p>
  145.       </a>
  146.     </div>
  147.     <div class="newlist">
  148.       <a href=""><img src="images/45.png" alt="" /> </a>
  150.       <a href="">
  151.         PHP快速操控Excel之PhpSpreadsheet
  152.         <span
  153.           >老的PHPExcel已经停止更新了！目前最新的是使用phpOffice插件PhpSpreadsheet，...</span
  154.         >
  155.         <p>
  156.           <span class="level">中级</span>
  157.           <span>61343次播放</span>
  158.         </p>
  159.       </a>
  160.     </div>
  162.     <!-- 页脚 -->
  163.     <footer>
  164.       <a href="">
  165.         <span class="iconfont">&#xe621;</span>
  166.         <span>首页</span>
  167.       </a>
  168.       <a href="">
  169.         <span class="iconfont">&#xe618;</span>
  170.         <span>视频</span>
  171.       </a>
  172.       <a href="">
  173.         <span class="iconfont">&#xe67e;</span>
  174.         <span>社区</span>
  175.       </a>
  176.       <a href="">
  177.         <span class="iconfont">&#xe6f0;</span>
  178.         <span>我的</span>
  179.       </a>
  180.     </footer>
  181.   </body>
  182. </html>

CSS 部分

  1. /* 初始化 */
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5. }
  6. a {
  7.   text-decoration: none;
  8.   color: #666;
  9. }
  10. html {
  11.   /* 可视区高度宽度 */
  12.   width: 750px;
  13.   height: 100vh;
  14.   /* 在html中设置字体给后的rem用 */
  15.   font-size: 14px;
  16. }
  17. body {
  18.   /* 将整个body看成flex容器 */
  19.   min-width: 350px;
  20.   /* 背景色 */
  21.   background-color: #fff;
  23.   display: flex;
  24.   /* 主轴垂直,不换行 */
  25.   flex-flow: column nowrap;
  26. }
  28. /* 页眉样式 */
  29. body > header {
  30.   display: flex;
  31.   background-color: #333;
  32.   color: white;
  33.   height: 30px;
  34.   width: 94vw;
  35.   align-items: center;
  36.   justify-content: space-between;
  37.   padding: 0 15px;
  38.   position: fixed;
  39. }
  40. /* 轮播图样式 */
  41. body > div > img {
  42.   width: 100vw;
  43.   height: 180px;
  44. }
  45. /* 导航样式 */
  46. nav {
  47.   width: 100vw;
  48.   display: flex;
  49.   /* 多行容器 */
  50.   flex-flow: row wrap;
  51.   /* justify-content: space-between; */
  52. }
  53. nav > div {
  54.   display: flex;
  55.   width: 25%;
  56.   flex-flow: column nowrap;
  57.   align-items: center;
  58. }
  60. nav > div > a:first-of-type {
  61.   text-align: center;
  62. }
  63. nav > div img {
  64.   /* 图片样式 */
  65.   width: 50px;
  66. }
  67. .title {
  68.   color: #666;
  69.   font-size: 0.99rem;
  70.   margin-top: 15px;
  71.   padding-left: 5px;
  72. }
  73. /* 推荐区格式 */
  74. .hot {
  75.   display: flex;
  76.   flex-flow: row nowrap;
  77.   justify-content: center;
  78.   width: 95vw;
  79.   margin: 10px;
  80. }
  81. /* 推荐区图片格式 */
  82. .hot > a img {
  83.   padding: 4px;
  84.   width: 45vw;
  85. }
  86. /* 推荐区列表格式 */
  87. .hot2 {
  88.   display: flex;
  89.   flex-flow: row nowrap;
  90.   margin: 10px;
  91. }
  92. /* 设置推荐区图片规格 */
  93. .hot2 > a:first-of-type img {
  94.   width: 35vw;
  95.   padding-left: 20px;
  96. }
  97. /* 设置推荐区文字布局 */
  98. .hot2 > a:last-of-type {
  99.   color: #666;
  100.   font-size: 0.9rem;
  101.   align-self: center;
  102.   display: flex;
  103.   flex-flow: column nowrap;
  104.   margin-left: 20px;
  105. }
  106. .hot2 > a:last-of-type p {
  107.   font-size: 0.5rem;
  108. }
  110. /* 设置等级标签格式 */
  111. .level {
  112.   background-color: #666;
  113.   color: #fff;
  114. }
  116. /* 最新课程 */
  117. .newlist {
  118.   display: flex;
  119.   flex-flow: row nowrap;
  120.   width: 100vw;
  121.   margin: 10px;
  122. }
  123. /* 最新课程图片规格 */
  124. .newlist > a > img {
  125.   width: 35vw;
  126.   padding-left: 20px;
  127. }
  128. /* 最新推荐文字规格 */
  129. .newlist > a:last-of-type {
  130.   color: #666;
  131.   font-size: 0.9rem;
  132.   align-self: center;
  133.   display: flex;
  134.   flex-flow: column nowrap;
  135.   margin-left: 20px;
  136. }
  137. /* 等级字体样式 */
  138. .newlist > a:last-of-type p {
  139.   display: flex;
  140.   font-size: 0.5rem;
  141.   margin: 10px;
  142.   justify-content: space-between;
  143. }
  144. .newlist > a:last-of-type span {
  145.   font-size: 0.5rem;
  146.   margin-top: 10px;
  147. }
  149. /* 页脚样式 */
  150. footer {
  151.   display: flex;
  152.   flex-flow: row nowrap;
  153.   width: 95vw;
  154.   color: #666;
  155.   background-color: #efefef;
  156.   border: top 1px solid #ccc;
  157.   justify-content: space-between;
  158.   position: fixed;
  159.   align-items: flex-end;
  160.   bottom: 0;
  161. }
  163. body > footer > a {
  164.   display: flex;
  165.   flex-flow: column wrap;
  166.   margin-top: 10px;
  167.   font-size: 0.8rem;
  168.   color: #666;
  169. }
  170. body > footer > a:hover {
  171.   color: orangered;
  172. }
上一条：使用flex布局实现PHP中文网移动端网页布局下一条：css的选择器知识汇总（简单选择器，上下文选择器，伪类选择器）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多