Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 2019年12月27日 作业 m.php.cn网站的首页布局(Flex实现)
Blogger Information
Blog 7
fans 0
comment 2
visits 5441
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
2019年12月27日 作业 m.php.cn网站的首页布局(Flex实现)
L
Original
713 people have browsed it

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. }
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：现在有许多商业的公共样式css文档可以直接用了, 但是自己写一个是不是也不错呢?
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
1 comments
L 2019-12-30 11:31:00
嗯呢，自己写，可以高度自定义，多练习，可以更熟练
1 floor
Author's latest blog post