简体中文（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

博客列表 >前端学习-1227号作业

前端学习-1227号作业

天
天原创
2020年01月06日 16:51:51516浏览

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应该也存在加载效率的问题吧？我总是感觉我写的东西不是最优的方案，感觉我的代码很冗余。哈哈。。。

上一条：前端学习-1226号作业下一条：​开发多人纯语音聊天直播交友平台的技术难点分析
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多