Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 12.27号作业
Blogger Information
Blog 18
fans 0
comment 0
visits 10866
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
12.27号作业
- 迷舍人
Original
675 people have browsed it

只要注意好层级关系

效果区

ml代码区

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>移动端</title>
  6.     <link rel="stylesheet" href="demo1.css">
  7.     <link rel="stylesheet" href="static/font/iconfont.css">
  8. </head>
  9. <body>
  10.     <!--头部-->
  11.     <header>
  12.         <img src="static/images/user.png" alt="">
  13.         <img src="static/images/logo.png" alt="">
  14.         <img src="static/images/user.png" alt="">
  15.     </header>
  16.     <!--轮播图-->
  17.     <div>
  18.         <a href="">
  19.             <img src="static/images/1.jpg" alt="">
  20.         </a>
  21.     </div>
  22.     <!--导航区-->
  23.     <nav>
  24.             <ul>
  25.                 <li>
  26.                     <a href="">
  27.                         <img src="static/images/user.png" alt="">
  28.                         <span>导航/名字</span>
  29.                     </a>
  30.                 </li>
  31.                 <li>
  32.                     <a href="">
  33.                         <img src="static/images/user.png" alt="">
  34.                         <span>导航/名字</span>
  35.                     </a>
  36.                 </li>
  37.                 <li>
  38.                     <a href="">
  39.                         <img src="static/images/user.png" alt="">
  40.                         <span>导航/名字</span>
  41.                     </a>
  42.                 </li>
  43.                 <li>
  44.                     <a href="">
  45.                         <img src="static/images/user.png" alt="">
  46.                         <span>导航/名字</span>
  47.                     </a>
  48.                 </li>
  49.             </ul>
  50.             <ul>
  51.                 <li>
  52.                     <a href="">
  53.                         <img src="static/images/user.png" alt="">
  54.                         <span>导航/名字</span>
  55.                     </a>
  56.                 </li>
  57.                 <li>
  58.                     <a href="">
  59.                         <img src="static/images/user.png" alt="">
  60.                         <span>导航/名字</span>
  61.                     </a>
  62.                 </li>
  63.                 <li>
  64.                     <a href="">
  65.                         <img src="static/images/user.png" alt="">
  66.                         <span>导航/名字</span>
  67.                     </a>
  68.                 </li>
  69.                 <li>
  70.                     <a href="">
  71.                         <img src="static/images/user.png" alt="">
  72.                         <span>导航/名字</span>
  73.                     </a>
  74.                 </li>
  75.             </ul>
  76.     </nav>
  77.     <!--课程区-->
  78.     <main>
  79.         <setcion>
  80.             <h3>推荐课程</h3>
  81.             <div>
  82.                 <a href="">
  83.                     <img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg" alt="">
  84.                 </a>
  85.                 <span>
  86.                     <a href="">CI框架30分钟极速入门</a>
  87.                     <span><i>中级</i>55749次播放</span>
  88.                 </span>
  89.             </div>
  90.             <div>
  91.                 <a href="">
  92.                     <img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg" alt="">
  93.                 </a>
  94.                 <span>
  95.                     <a href="">CI框架30分钟极速入门</a>
  96.                     <span><i>中级</i>55749次播放</span>
  97.                 </span>
  98.             </div>
  99.         </setcion>
  100.     </main>
  101.     <footer>
  102.         <a href="">
  103.             <i class="iconfont icon-huiyuan2"></i>
  104.             <span>首页</span>
  105.         </a>
  106.         <a href="">
  107.             <i class="iconfont icon-huiyuan2"></i>
  108.             <span>首页</span>
  109.         </a>
  110.         <a href="">
  111.             <i class="iconfont icon-huiyuan2"></i>
  112.             <span>首页</span>
  113.         </a>
  114.         <a href="">
  115.             <i class="iconfont icon-huiyuan2"></i>
  116.             <span>首页</span>
  117.         </a>
  118.     </footer>
  119. </body>
  120. </html>

css代码区

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     /*参考线*/
  5.     /*outline: 1px red dashed;*/
  6. }
  7. a {
  8.     /*去除下划线*/
  9.     text-decoration: none;
  10.     color: #222222;
  11. }
  12. li{
  13.     /*去除前面的小黑点*/
  14.     list-style: none;
  15. }
  17. body{
  18.     /*最下宽度*/
  19.     min-width: 320px;
  20.     /*最大宽度*/
  21.     max-width: 768px;
  22.     display: flex;
  23.     flex-direction: column;
  24. }
  25. /*头部*/
  26. body > header{
  27.     height: 8vh;
  28.     display: flex;
  29.     flex-direction: row;
  30.     /*两端对齐*/
  31.     justify-content: space-between;
  32. }
  33. /*设置图片大小*/
  34. body > header img{
  35.     height: 100%;
  36. }
  37. /*轮播图*/
  38. body > div{
  39.     height: 30vh;
  40. }
  41. body > div img{
  42.     height: 100%;
  43.     width: 100%;
  44. }
  45. /*导航*/
  46. body > nav > ul > li > a >img{
  47.     height: 60px;
  48.     width: 60px;
  49. }
  50. body > nav > ul{
  51.     display: flex;
  52.     justify-content: space-around;
  53.     background-color: #888888;
  54. }
  55. body > nav > ul > li > a {
  56.     margin-top: 1vh;
  57.     display: flex;
  58.     flex-direction: column;
  59. }
  60. /*课程区*/
  62. body > main > setcion >h3{
  63.     color: #666666;
  64.     margin-left: 1vh;
  65. }
  66. body > main > setcion >div{
  67.     display: flex;
  68.     flex-direction: row;
  69. }
  70. body > main > setcion > div > a > img{
  71.     width: 300px;
  72.     height: 150px;
  73. }
  74. body > main > setcion > div > span{
  75.     flex-grow: 1;
  76.     display: flex;
  77.     flex-direction: column;
  78. }
  79. body > main > setcion > div > span > span > i{
  80.     background-color: #bd2c00;
  81. }
  82. body > main > setcion > div > span > span{
  83.     margin-top: auto;
  84. }
  85. body > main > setcion > div > span > span{
  86.     display: flex;
  87.     /*两端对齐*/
  88.     justify-content: space-between;
  89. }
  90. /*尾部*/
  91. body > footer{
  92.     height: 8vh;
  93.     display: flex;
  94.     flex-direction: row;
  95.     justify-content: space-around;
  96. }
  97. body > footer > a{
  98.     margin-top: 1vh;
  99.     display: flex;
  100.     flex-direction: column;
  101. }
  102. body > footer > a > i{
  103.     font-size: 20px !important;
  104. }
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：在布局的时候, 对于这个地方为什么要用这个标签, 要想一下, 是不是可以用其它标签代替呢? 老师为什么要这样写呢? 多问几个为什么, 会学得更快
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