简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >2019年12月27日 作业 m.php.cn网站的首页布局(Flex实现)

2019年12月27日 作业 m.php.cn网站的首页布局(Flex实现)

L
L原创
2019年12月28日 19:52:40708浏览

m.php.cn网站的首页布局(Flex实现)

效果图

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  8.     <link rel="stylesheet" href="static/font/iconfont.css" />
  9.     <link rel="stylesheet" href="style.css" />
  10.     <title>php中文网</title>
  11. </head>
  13. <body>
  14.     <!-- 头部 -->
  15.     <header>
  16.         <a href=""><img src="static/images/login.png" alt="" /></a>
  17.         <a href=""><img src="static/images/logo.png" alt="" /></a>
  18.         <a href=""><i class="icon iconfont icon-liebiao"></i></a>
  19.     </header>
  20.     <!-- 主体内容 -->
  21.     <main>
  22.         <!-- 轮播图 -->
  23.         <div class="lbt">
  24.             <a href=""><img src="static/images/2.jpg" /></a>
  25.         </div>
  26.         <!-- 导航区域 -->
  27.         <nav>
  28.             <a href=""><img src="static/images/html.png" />测试</a>
  29.             <a href=""><img src="static/images/code.png" />测试</a>
  30.             <a href=""><img src="static/images/app.png" />测试</a>
  31.             <a href=""><img src="static/images/html.png" />测试</a>
  32.             <a href=""><img src="static/images/html.png" />测试</a>
  33.             <a href=""><img src="static/images/html.png" />测试</a>
  34.             <a href=""><img src="static/images/html.png" />测试</a>
  35.             <a href=""><img src="static/images/html.png" />测试</a>
  36.         </nav>
  37.         <!-- 推荐课程 -->
  38.         <div class="list1">
  39.             <h2>推荐课程</h2>
  40.             <div class="comment">
  41.                 <div>
  42.                     <a href=""><img src="static/images/5d2426f409839992.jpg" alt="" /></a>
  43.                     <a href=""><img src="static/images/5d2426f409839992.jpg" alt="" /></a>
  44.                 </div>
  45.                 <div class="kc">
  46.                     <a href="">
  47.                         <img src="static/images/5d2941e265889366.jpg" alt="" />
  48.                     </a>
  49.                     <div>
  50.                         <a href="">CI框架30分钟极速入门</a>
  51.                         <div>
  52.                             <span>中级</span>
  53.                             <span>55667次播放</span>
  54.                         </div>
  55.                     </div>
  56.                 </div>
  57.                 <div class="kc">
  58.                     <a href="">
  59.                         <img src="static/images/5d2941e265889366.jpg" alt="" />
  60.                     </a>
  61.                     <div>
  62.                         <a href="">CI框架30分钟极速入门</a>
  63.                         <div>
  64.                             <span>中级</span>
  65.                             <span>55667次播放</span>
  66.                         </div>
  67.                     </div>
  68.                 </div>
  69.             </div>
  70.         </div>
  71.         <!-- 最新更新 -->
  72.         <div class="list2">
  73.             <h2>最新更新</h2>
  74.             <div class="article">
  75.                 <div>
  76.                     <a href="">
  77.                         <img src="static/images/5da6a50535529903.jpg" alt="" />
  78.                     </a>
  79.                     <div>
  80.                         <a href="">CI框架30分钟极速入门</a>
  81.                         <span>重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解</span>
  82.                         <div>
  83.                             <span>中级</span>
  84.                             <span>55667次播放</span>
  85.                         </div>
  86.                     </div>
  87.                 </div>
  88.                 <div>
  89.                     <a href="">
  90.                         <img src="static/images/5da6a50535529903.jpg" alt="" />
  91.                     </a>
  92.                     <div>
  93.                         <a href="">CI框架30分钟极速入门</a>
  94.                         <span>重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解</span>
  95.                         <div>
  96.                             <span>中级</span>
  97.                             <span>55667次播放</span>
  98.                         </div>
  99.                     </div>
  100.                 </div>
  101.             </div>
  102.         </div>
  103.         <!-- 最新文章 -->
  104.         <div class="list3">
  105.             <h2>最新文章</h2>
  106.             <div class="article">
  107.                 <a href="">
  108.                     <div>
  109.                         <span>测试</span>
  110.                         <span>发布时间：2019-12-28</span>
  111.                     </div>
  112.                     <img src="static/images/5e06b36a66f32692.jpg" alt="" />
  113.                 </a>
  114.                 <a href="">
  115.                     <div>
  116.                         <span>测试</span>
  117.                         <span>发布时间：2019-12-28</span>
  118.                     </div>
  119.                     <img src="static/images/5e06b36a66f32692.jpg" alt="" />
  120.                 </a>
  121.                 <a href="">
  122.                     <div>
  123.                         <span>测试</span>
  124.                         <span>发布时间：2019-12-28</span>
  125.                     </div>
  126.                     <img src="static/images/5e06b36a66f32692.jpg" alt="" />
  127.                 </a>
  128.             </div>
  129.         </div>
  130.         <!-- 最新博文 -->
  131.         <div class="list4">
  132.             <h2>最新博文</h2>
  133.             <div class="article">
  134.                 <a href="">
  135.                     <span>composer安装laravel，nginx服务器路配置解决404问题，</span>
  136.                     <span>2019-12-27</span>
  137.                 </a>
  138.                 <a href="">
  139.                     <span>composer安装laravel，nginx服务器路配置解决404问题，</span>
  140.                     <span>2019-12-27</span>
  141.                 </a>
  142.                 <a href="">
  143.                     <span>composer安装laravel，nginx服务器路配置解决404问题，</span>
  144.                     <span>2019-12-27</span>
  145.                 </a>
  146.                 <a href="">
  147.                     <span>composer安装laravel，nginx服务器路配置解决404问题，</span>
  148.                     <span>2019-12-27</span>
  149.                 </a>
  150.             </div>
  151.             <a href="">更多内容</a>
  152.         </div>
  153.         <!-- 最新问答 -->
  154.         <div class="list5">
  155.             <h2>最新问答</h2>
  156.             <div class="article">
  157.                 <a href="">
  158.                     <span>我写的代码跟您的一样 在浏览器打开的时候为什么是乱码呢</span>
  159.                     <span>2019-12-27</span>
  160.                 </a>
  161.                 <a href="">
  162.                     <span>我写的代码跟您的一样 在浏览器打开的时候为什么是乱码呢</span>
  163.                     <span>2019-12-27</span>
  164.                 </a>
  165.                 <a href="">
  166.                     <span>我写的代码跟您的一样 在浏览器打开的时候为什么是乱码呢</span>
  167.                     <span>2019-12-27</span>
  168.                 </a>
  169.                 <a href="">
  170.                     <span>我写的代码跟您的一样 在浏览器打开的时候为什么是乱码呢</span>
  171.                     <span>2019-12-27</span>
  172.                 </a>
  173.             </div>
  174.             <a href="">更多内容</a>
  175.         </div>
  176.     </main>
  177.     <!-- 脚部 -->
  178.     <footer>
  179.         <a href=""><i class="icon iconfont icon-shouyeshouye"></i>首页</a>
  180.         <a href=""><i class="icon iconfont icon-yunhang"></i>视频</a>
  181.         <a href=""><i class="icon iconfont icon-fenzuguanli"></i>社区</a>
  182.         <a href=""><i class="icon iconfont icon-huiyuan2"></i>我的</a>
  183.     </footer>
  184. </body>
  186. </html>

css样式

  1. /* 导入公共初始化样式 */
  2. @import "public_reset.css";
  4. body {
  5.     max-width: 768px;
  6.     margin: auto;
  7. }
  9. /* 头部 */
  10. body > header {
  11.     position: fixed;
  12.     top: 0;
  13.     width: 100vw;
  14.     max-width: 768px;
  15.     height: 5vh;
  16.     background-color: #2d353c;
  17.     display: flex;
  18.     justify-content: space-between;
  19.     align-items: center;
  20.     padding: 0 1vw;
  21.     box-sizing: border-box;
  22.     z-index: 999;
  23. }
  24. body > header > a {
  25.     color: #ffffff;
  26.     display: flex;
  27. }
  28. body > header img {
  29.     width: auto;
  30.     height: 3vh;
  31. }
  32. body > header > a:nth-of-type(2) img {
  33.     height: 5vh;
  34. }
  36. /* 主体内容 */
  37. body > main {
  38.     position: relative;
  39.     margin: 5vh 0 7vh 0;
  40.     display: flex;
  41.     flex-direction: column;
  42. }
  43. body > main h2 {
  44.     margin-bottom: 2vw;
  45. }
  47. /* 轮播图 */
  48. body > main > .lbt > a {
  49.     display: flex;
  50. }
  52. /* 导航区域 */
  53. body > main > nav {
  54.     background-color: #fff;
  55.     width: 100vw;
  56.     margin-bottom: 1vh;
  57.     max-width: 768px;
  58.     display: flex;
  59.     flex-flow: row wrap;
  60. }
  61. body > main > nav > a {
  62.     flex-basis: 25vw;
  63.     max-width: 192px;
  64.     margin: 1vh auto;
  65.     align-items: center;
  66.     display: flex;
  67.     flex-direction: column;
  68. }
  69. body > main > nav > a img {
  70.     width: 45px;
  71.     height: 45px;
  72. }
  74. /* 推荐课程 */
  75. body > main > .list1 > .comment {
  76.     display: flex;
  77.     flex-direction: column;
  78. }
  79. body > main > .list1 > .comment > div {
  80.     display: flex;
  81. }
  82. body > main > .list1 > .comment > div:nth-of-type(1) {
  83.     justify-content: space-around;
  84. }
  85. body > main > .list1 > .comment > .kc > a {
  86.     flex-basis: 40vw;
  87. }
  88. body > main > .list1 > .comment > div > a img {
  89.     max-width: 380px;
  90. }
  91. body > main > .list1 > .comment > .kc > div {
  92.     flex-basis: 50vw;
  93.     padding: 0 1vw;
  94.     display: flex;
  95.     flex-direction: column;
  96.     justify-content: space-around;
  97. }
  98. body > main > .list1 > .comment > .kc {
  99.     display: flex;
  100.     padding: 1vw;
  101.     background-color: #fff;
  102.     margin-bottom: 1vh;
  103.     justify-content: space-around;
  104. }
  105. body > main > .list1 > .comment > .kc > div > div > span:first-of-type {
  106.     background-color: #2d353c;
  107.     color: #fff;
  108.     padding: 0.4vw;
  109.     border-radius: 1vw;
  110. }
  112. /* 最新更新 */
  113. body > main > .list2 > .article > div {
  114.     display: flex;
  115.     justify-content: space-around;
  116.     background-color: #fff;
  117.     padding: 1vw;
  118.     margin-bottom: 1vw;
  119. }
  120. body > main > .list2 > .article > div > a {
  121.     flex-basis: 40vw;
  122. }
  123. body > main > .list2 > .article > div > div {
  124.     flex-basis: 50vw;
  125.     padding: 0.4vw;
  126.     display: flex;
  127.     flex-direction: column;
  128.     justify-content: space-between;
  129. }
  130. body > main > .list2 > .article > div > div > span {
  131.     width: 50vw;
  132.     max-width: 380px;
  133.     overflow: hidden;
  134.     text-overflow: ellipsis;
  135.     white-space: nowrap;
  136. }
  137. body > main > .list2 > .article > div > div > div > span:nth-of-type(1) {
  138.     background-color: #2d353c;
  139.     color: #fff;
  140.     padding: 0.4vw;
  141.     border-radius: 1vw;
  142. }
  143. body > main > .list2 > .article > div > div > div {
  144.     display: flex;
  145.     justify-content: space-between;
  146. }
  148. /* 最新文章 */
  149. body > main > .list3 > .article {
  150.     display: flex;
  151.     flex-direction: column;
  152.     justify-content: space-around;
  153. }
  154. body > main > .list3 > .article > a {
  155.     display: flex;
  156.     justify-content: space-around;
  157.     background-color: #fff;
  158.     padding: 0.4vw;
  159.     margin-bottom: 1vw;
  160.     box-shadow: 0 0 8px #cccccc;
  161. }
  162. body > main > .list3 > .article > a > div {
  163.     flex-basis: 70vw;
  164.     display: flex;
  165.     flex-direction: column;
  166.     justify-content: space-around;
  167.     padding: 0.4vw 1vw;
  168. }
  169. body > main > .list3 > .article > a > img {
  170.     flex-basis: 30vw;
  171.     max-width: 180px;
  172. }
  174. /* 最新博文 */
  175. body > main > .list4 > .article {
  176.     display: flex;
  177.     flex-direction: column;
  178.     justify-content: space-around;
  179. }
  180. body > main > .list4 > .article > a {
  181.     display: flex;
  182.     justify-content: space-between;
  183.     background-color: #fff;
  184.     padding: 0.4vw 1vw;
  185.     margin-bottom: 1vw;
  186.     align-items: center;
  187.     box-shadow: 0 0 8px #cccccc;
  188. }
  189. body > main > .list4 > .article > a > span {
  190.     flex-basis: 50vw;
  191.     max-width: 380px;
  192. }
  193. body > main > .list4 > .article > a > span:last-of-type {
  194.     text-align: right;
  195. }
  196. body > main > .list4 > a {
  197.     display: block;
  198.     background-color: #fff;
  199.     text-align: center;
  200.     padding: 0.4vw 1vw;
  201. }
  203. /* 最新问答 */
  204. body > main > .list5 > .article {
  205.     display: flex;
  206.     flex-direction: column;
  207.     justify-content: space-around;
  208. }
  209. body > main > .list5 > .article > a {
  210.     display: flex;
  211.     justify-content: space-between;
  212.     background-color: #fff;
  213.     padding: 0.4vw 1vw;
  214.     margin-bottom: 1vw;
  215.     align-items: center;
  216.     box-shadow: 0 0 8px #cccccc;
  217. }
  218. body > main > .list5 > a {
  219.     display: block;
  220.     background-color: #fff;
  221.     text-align: center;
  222.     padding: 0.4vw 1vw;
  223. }
  224. body > main > .list5 > .article > a > span {
  225.     flex-basis: 50vw;
  226.     max-width: 380px;
  227. }
  228. body > main > .list5 > .article > a > span:last-of-type {
  229.     text-align: right;
  230. }
  232. /* 脚部 */
  233. body > footer {
  234.     width: 100vw;
  235.     max-width: 768px;
  236.     margin: auto;
  237.     position: fixed;
  238.     bottom: 0;
  239.     height: 6vh;
  240.     background-color: #edeff0;
  241.     display: flex;
  242.     justify-content: space-around;
  243.     margin-top: 2vh;
  244.     border-top: 1px solid #ccc;
  245.     z-index: 999;
  246. }
  247. body > footer > a {
  248.     display: flex;
  249.     flex-direction: column;
  250.     justify-content: center;
  251.     align-items: center;
  252. }

公共初始化样式

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. body {
  6.     color: #333;
  7.     background-color: #edeff0;
  8. }
  9. a {
  10.     color: #333;
  11.     text-decoration: none;
  12. }
  13. li {
  14.     list-style: none;
  15. }
  16. img {
  17.     width: 100%;
  18. }
上一条：12.28用Grid网格布局重写网页组件下一条：CentOS7下PHP7.2安装redis扩展
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
L2019-12-30 11:31:001楼
嗯呢，自己写，可以高度自定义，多练习，可以更熟练

相关文章

查看更多