Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 前端学习-1227号作业
Blogger Information
Blog 4
fans 0
comment 0
visits 2266
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
前端学习-1227号作业
天
Original
521 people have browsed it

1227号作业

效果图展示

HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="moblie.css">
  6.     <title>移动端布局</title>
  7. </head>
  8. <body>
  9.     <div class="header">
  10.         <a href="" ><img src="static/images/ico/login.png" alt=""></a>
  11.         <a href="" ><img src="static/images/ico/logo.png" alt=""></a>
  12.         <a href="" ><img src="static/images/ico/login.png" alt=""></a>
  13.     </div>
  14.     <div class="main">
  15.         <div class="banner">
  16.             <img src="static/images/ico/2.jpg" alt="">
  17.         </div>
  18.         <div class="nav-1">
  19.             <div class="nav-list">
  20.                 <a href=""><img src="static/images/ico/html.png" alt=""></a>
  21.                 <span>HTML/CSS</span>
  22.             </div>
  23.             <div class="nav-list">
  24.                 <a href=""><img src="static/images/ico/html.png" alt=""></a>
  25.                 <span>HTML/CSS</span>
  26.             </div>
  27.             <div class="nav-list">
  28.                 <a href=""><img src="static/images/ico/html.png" alt=""></a>
  29.                 <span>HTML/CSS</span>
  30.             </div>
  31.             <div class="nav-list">
  32.                 <a href=""><img src="static/images/ico/html.png" alt=""></a>
  33.                 <span>HTML/CSS</span>
  34.             </div>
  35.         </div>
  36.         <div class="nav-2">
  37.             <div class="nav-list">
  38.                 <a href=""><img src="static/images/ico/html.png" alt=""></a>
  39.                 <span>HTML/CSS</span>
  40.             </div>
  41.             <div class="nav-list">
  42.                 <a href=""><img src="static/images/ico/html.png" alt=""></a>
  43.                 <span>HTML/CSS</span>
  44.             </div>
  45.             <div class="nav-list">
  46.                 <a href=""><img src="static/images/ico/html.png" alt=""></a>
  47.                 <span>HTML/CSS</span>
  48.             </div>
  49.             <div class="nav-list">
  50.                 <a href=""><img src="static/images/ico/html.png" alt=""></a>
  51.                 <span>HTML/CSS</span>
  52.             </div>
  53.         </div>
  54.         <div class="article">
  55.             <div class="section-tuijian">
  56.                 <h3>推荐视频</h3>
  57.                 <div class="banner-1">
  58.                     <a href=""><img src="static/images/ico/tian.jpg" alt=""></a>
  59.                     <a href=""><img src="static/images/ico/tian.jpg" alt=""></a>
  60.                 </div>
  61.                 <div class="banner-2">
  62.                     <div class="banner-list">
  63.                         <a href=""><img src="static/images/ico/HTML5.jpg" alt=""></a>
  64.                         <div class="banner-list-intro">
  65.                             <a href="">CI框架30分钟极速入门</a>
  66.                             <div>
  67.                                 <span>中级</span>
  68.                                 <span>56179次播放</span>
  69.                             </div>
  70.                         </div>
  71.                     </div>
  72.                     <div class="banner-list">
  73.                         <a href=""><img src="static/images/ico/HTML5.jpg" alt=""></a>
  74.                         <div class="banner-list-intro">
  75.                             <a href="">2018前端入门_HTML5</a>
  76.                             <div>
  77.                                 <span>初级</span>
  78.                                 <span>56179次播放</span>
  79.                             </div>
  80.                         </div>
  81.                     </div>
  82.                 </div>
  83.             </div>
  84.             <div class="section-new-update">
  85.                 <h3>最新更新</h3>
  86.                 <div class="banner-list">
  87.                     <a href=""><img src="static/images/ico/new1.png" alt=""></a>
  88.                     <div class="banner-list-intro">
  89.                         <a href="">PHP快速操控Excel之PhpSpreadsheet</a>
  90.                         <span>老的PHPExcel已经停止更新了！目前最新的是使用phpOffice插件PhpSpreadshe...</span>
  91.                         <div>
  92.                             <span>中级</span>
  93.                             <span>56179次播放</span>
  94.                         </div>
  95.                     </div>
  96.                 </div>
  97.             </div>
  98.             <div class="section-new-article">
  99.                 <h3>最新文章</h3>
  100.                 <div class="banner-list-intro">
  101.                     <div>
  102.                         <a href="" >如何设置vscode打开文件时新建窗口</a>
  103.                         <a href="" >发布时间：2019-12-30</a>
  104.                     </div>
  105.                     <div class="banner-list">
  106.                         <a href=""><img src="static/images/ico/art1.jpg" alt=""></a>
  107.                     </div>
  108.                 </div>
  109.                 <a href="">更多内容</a>
  110.             </div>
  111.             <div class="section-new-bowen">
  112.                 <h3>最新博文</h3>
  113.                 <div>
  114.                     <a href="">php核心特性 - 错误处理</a>
  115.                     <span>2020年01月04日</span>
  116.                 </div>
  117.                 <a href="">更多内容</a>
  118.             </div>
  119.         </div>
  120.     </div>
  121.     <div class="footer">
  122.         <div>
  123.             <a href="" >
  124.                 <img src="static/images/ico/login.png" alt="">首页
  125.             </a>
  126.         </div>
  127.         <div>
  128.             <a href="" >
  129.                 <img src="static/images/ico/login.png" alt="">登录
  130.             </a>
  131.         </div>
  132.         <div>
  133.             <a href="" >
  134.                 <img src="static/images/ico/login.png" alt="">视频
  135.             </a>
  136.         </div>
  137.         <div>
  138.             <a href="" >
  139.                 <img  src="static/images/ico/login.png" alt="">其他
  140.             </a>
  141.         </div>
  143.     </div>
  144. </body>
  145. </html>

CSS代码

  1. @import "public_reset.css";
  3. body{
  4.     width: 768px;
  5.     /*height: 100vh;*/
  6. }
  7. body > .main {
  8.     flex: 1;
  9.     /*超出页面显示，增加滚动条*/
  10.     overflow: auto;
  11.     display: flex;
  12.     flex-direction: column;
  13. }
  14. /*头部样式*/
  15. body > .header{
  16.     display: flex;
  17.     height: 42px;
  18.     background-color: black;
  19.     justify-content: space-between;
  20. }
  21. body > .header > a{
  22.     display: flex;
  23.     width: 25px;
  24.     height: 25px;
  25.     align-self: center;
  26. }
  27. body > .header > a:nth-child(2) {
  28.     width: auto;
  29.     height: 42px;
  30. }
  31. /*轮播图样式*/
  32. body > .main >.banner > img{
  33.     display: flex;
  34.     width: 768px;
  35.     height: 150px;
  36. }
  37. /*导航栏样式*/
  38. body > .main > .nav-1{
  39.     display: flex;
  40.     flex-flow: row wrap;
  41.     justify-content: space-evenly;
  42.     background-color: white;
  43. }
  44. body > .main > .nav-2{
  45.     display: flex;
  46.     flex-flow: row wrap;
  47.     justify-content: space-evenly;
  48.     padding-bottom: 10px;
  49.     background-color: white;
  51. }
  52. body > .main > .nav-1 > .nav-list{
  53.     display: flex;
  54.     flex-flow: column;
  55.     justify-content: space-evenly;
  56. }
  57. body > .main >.nav-2 > .nav-list{
  58.     display: flex;
  59.     flex-flow: column;
  60.     justify-content: space-evenly;
  61. }
  62. body > .main > .nav-1 > .nav-list > a{
  63.     display: flex;
  64.     width: 45px;
  65.     height: 49px;
  66.     align-self: center;
  67.     margin: 10px 0;
  68. }
  69. body > .main > .nav-2 > .nav-list > a{
  70.     display: flex;
  71.     width: 45px;
  72.     height: 49px;
  73.     align-self: center;
  74.     margin: 10px 0;
  75. }
  76. body > .main > .nav-1 > .nav-list span{
  77.     text-align: center;
  78. }
  79. body > .main > .nav-2 > .nav-list span{
  80.     text-align: center;
  81. }
  82. /*推荐视频样式*/
  83. body > .main > .article > .section-tuijian{
  84.     display: flex;
  85.     flex-direction: column;
  86.     margin: 20px 0;
  87.     padding: 0 10px;
  88. }
  89. body > .main > .article > .section-tuijian h3{
  90.     padding-bottom: 10px;
  91. }
  92. body > .main > .article > .section-tuijian > .banner-1{
  93.     display: flex;
  94.     justify-content: space-between;
  95. }
  96. body > .main > .article > .section-tuijian > .banner-1 > a{
  97.     display: flex;
  98. }
  99. body > .main > .article > .section-tuijian > .banner-1 > a img{
  100.     height: 90px;
  101.     width: 366px;
  102. }
  104. body > .main > .article > .section-tuijian > .banner-list{
  105.     display: flex;
  106.     flex-direction: row;
  107. }
  108. body > .main > .article > .section-tuijian > .banner-2{
  109.     display: flex;
  110.     flex-direction: column;
  112. }
  113. body > .main > .article > .section-tuijian > .banner-2> .banner-list{
  114.     display: flex;
  115.     margin: 10px 0;
  116.     padding: 10px;
  117.     background-color: white;
  119. }
  120. body > .main > .article > .section-tuijian > .banner-2> .banner-list > a{
  121.     display: flex;
  122. }
  123. body > .main > .article > .section-tuijian > .banner-2> .banner-list > a img{
  124.     width: 295px;
  125.     height: 80px;
  126. }
  127. body > .main > .article > .section-tuijian > .banner-2> .banner-list > .banner-list-intro{
  128.     display: flex;
  129.     flex-direction: column;
  130.     justify-content: start;
  131.     margin-left: 20px;
  132.     flex: 1;
  133. }
  134. body > .main > .article > .section-tuijian > .banner-2> .banner-list > .banner-list-intro > div{
  135.     display: flex;
  136.     margin-top: 20px;
  137. }
  138. body > .main > .article > .section-tuijian > .banner-2> .banner-list > .banner-list-intro > div a{
  139.     font-size: 20px;
  140.     height: 50px;
  141. }
  142. body > .main > .article > .section-tuijian > .banner-2> .banner-list > .banner-list-intro > div span:first-of-type{
  143.     background-color: black;
  144.     color: white;
  145.     border-radius: 5px;
  146.     margin-right: 5px;
  147. }
  148. /*更新文章样式*/
  149. body > .main > .article > .section-new-update{
  150.     display: flex;
  151.     flex-direction: column;
  152.     margin: 20px 0;
  153.     padding: 0 10px;
  154. }
  155. body > .main > .article > .section-new-update h3{
  156.     padding-bottom: 10px;
  157. }
  158. body > .main > .article > .section-new-update > .banner-list{
  159.     display: flex;
  160.     padding: 10px;
  161.     background-color: white;
  162. }
  163. body > .main > .article > .section-new-update > .banner-list >.banner-list-intro{
  164.     display: flex;
  165.     flex-direction: column;
  166.     justify-content: space-between;
  167.     margin-left: 20px;
  168. }
  169. body > .main > .article > .section-new-update > .banner-list >.banner-list-intro > div{
  170.     display: flex;
  171.     justify-content: space-between;
  172. }
  173. body > .main > .article > .section-new-update > .banner-list >.banner-list-intro > div > span:first-of-type{
  174.     background-color: black;
  175.     border-radius: 5px;
  176.     color: white;
  177. }
  178. body > .main > .article > .section-new-update > .banner-list > a{
  179.     display: flex;
  180. }
  181. body > .main > .article > .section-new-update > .banner-list > a img{
  182.     width: 295px;
  183.     height: 80px;
  184. }
  185. /*最新文章样式*/
  186. body > .main > .article > .section-new-article{
  187.     display: flex;
  188.     flex-direction: column;
  189.     margin: 20px 0;
  190.     padding: 0 10px;
  191. }
  192. body > .main > .article > .section-new-article > h3{
  193.     padding-bottom: 10px;
  194. }
  195. body > .main > .article > .section-new-article > .banner-list-intro{
  196.     display: flex;
  197.     justify-content: space-between;
  198.     padding: 10px;
  199.     background-color: white;
  200.  }
  201. body > .main > .article > .section-new-article > .banner-list-intro > div{
  202.     display: flex;
  203.     flex-direction: column;
  204. }
  205. body > .main > .article > .section-new-article > .banner-list-intro > div a{
  206.     font-size: 15px;
  207. }
  208. body > .main > .article > .section-new-article > .banner-list-intro > div > a:first-of-type{
  209.     font-size: 15px;
  210.     font-weight: 900;
  211. }
  212. body > .main > .article > .section-new-article > .banner-list-intro > div > a:last-of-type{
  213.     padding-top: 10px;
  214.     box-sizing: border-box;
  215. }
  216. body > .main > .article > .section-new-article > .banner-list-intro > .banner-list > a img{
  217.     display: flex;
  218.     width: 219px;
  219.     height: 65px;
  220. }
  221. body > .main > .article > .section-new-article > a{
  222.     text-align: center;
  223.     background-color: #fff;
  224.     margin: 10px 0;
  225. }
  226. /*最新博文样式*/
  227. body > .main > .article > .section-new-bowen {
  228.     display: flex;
  229.     flex-direction: column;
  230.     padding: 10px;
  231. }
  232. body > .main > .article > .section-new-bowen > h3{
  234.     padding: 10px;
  235. }
  236. body > .main > .article > .section-new-bowen > div{
  237.     display: flex;
  238.     justify-content: space-between;
  239.     padding: 10px;
  240.     background-color: #fff;
  241. }
  243. body > .main > .article > .section-new-bowen > a{
  244.     text-align: center;
  245.     background-color: #fff;
  246.     margin: 10px 0;
  247. }
  248. /*底部样式*/
  249. body > .footer{
  250.     display: flex;
  251.     justify-content: space-around;
  252.     border-top: 1px gray solid;
  253. }
  254. body > .footer > div{
  255.      display: flex;
  256.      flex-direction: column;
  257.      text-align: center;
  259.  }
  261. body > .footer > div > a{
  262.     display: flex;
  263.     flex-direction: column;
  264.     width: 45px;
  265.     height: 49px;
  266.     font-size: 15px;
  267.     padding-top: 10px;
  268. }

在布局样式的时候，我添加了滚动条，但是一直没有出现，也百度了一下，现在还没有解决，没有找到问题所在。。。

老师，css和html应该也存在加载效率的问题吧？我总是感觉我写的东西不是最优的方案，感觉我的代码很冗余。哈哈。。。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：别担心代码冗余, 随着网速越来越快, 特别是5G时代的到来, 这些都不再是关注的重点, 除了极端环境
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