Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1227-移动端
Blogger Information
Blog 13
fans 0
comment 0
visits 10283
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
600 people have browsed it

HTML

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>移动端首</title>
  8.     <link rel="stylesheet" href="demo1.css">
  9. </head>
  10. <body>
  11. <header>
  12.     <img src="static/images/user-pic.jpeg" alt="">
  13.     <img src="static/images/logo.png" alt="">
  14.     <img src="static/images/user-nav.jpg" alt="">
  15. </header>
  17. <div class="Carousel">
  18.     <img src="static/images/banner.jpg" alt="">
  19. </div>
  21. <!--导航区-->
  22. <nav>
  23.     <ul>
  24.         <li>
  25.             <a href="">
  26.                 <img src="static/images/html.png" alt="">
  27.                 <span>HTML/CSS</span>
  28.             </a>
  29.         </li>
  30.         <li>
  31.             <a href="">
  32.                 <img src="static/images/JavaScript.png" alt="">
  33.                 <span>JavaScipt</span>
  34.             </a>
  35.         </li>
  36.         <li>
  37.             <a href="">
  38.                 <img src="static/images/code.png" alt="">
  39.                 <span>服务器端</span>
  40.             </a>
  41.         </li>
  42.         <li>
  43.             <a href="">
  44.                 <img src="static/images/sql.png" alt="">
  45.                 <span>数据库</span>
  46.             </a>
  47.         </li>
  48.     </ul>
  49.     <ul>
  50.         <li>
  51.             <a href="">
  52.                 <img src="static/images/app.png" alt="">
  53.                 <span>移动端</span>
  54.             </a>
  55.         </li>
  56.         <li>
  57.             <a href="">
  58.                 <img src="static/images/manual.png" alt="">
  59.                 <span>手册</span>
  60.             </a>
  61.         </li>
  62.         <li>
  63.             <a href=""><img src="static/images/tool2.png" alt="">
  64.                 <span>工具</span>
  65.             </a>
  66.         </li>
  67.         <li>
  68.             <a href="">
  69.                 <img src="static/images/live.png" alt="">
  70.                 <span>直播</span>
  71.             </a>
  72.         </li>
  73.     </ul>
  74. </nav>
  76. <!--课程-->
  77. <main>
  78. <article class="course">
  79. <h3>推荐课程</h3>
  80.     <section>
  81.         <a href=""><img src="static/images/tjkc1.jpg" alt=""></a>
  82.         <a href=""><img src="static/images/tjkc2.jpg" alt=""></a>
  83.     </section>
  85.     <section>
  86.         <div>
  87.             <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
  88.             <span>
  89.                 <a href="">一个推荐课程</a>
  90.                 <span><i>高级</i>888888</span>
  91.             </span>
  92.         </div>
  93.         <div>
  94.             <a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
  95.             <span>
  96.                 <a href="">一个推荐课程</a>
  97.                 <span><i>初级</i>99999</span>
  98.             </span>
  99.         </div>
  100.     </section>
  101. </article>
  102. </main>
  103. <footer>
  104.     <img src="static/font-icon/geren.png" alt="">
  105.     <img src="static/font-icon/luntan.png" alt="">
  106.     <img src="static/font-icon/video.png" alt="">
  107.     <img src="static/font-icon/zhuye.png" alt="">
  108. </footer>
  109. </body>
  110. </html>

CSS

  1. img {
  2.     width: 100%;
  3. }
  4. ul, li {
  5.     margin: 0;
  6.     padding: 0;
  7. }
  8. li  {
  9.     list-style: none;
  10. }
  12. a {
  13.     text-decoration: none;
  14.     color: gray;
  15. }
  16. /*头部*/
  17. header {
  18.     position: fixed;
  19.     top:0;
  20.     width: 768px;
  21.     height: 42px;
  22.     background-color: #444444;
  23.     display: flex;
  24.     justify-content: space-between;
  25. }
  27. header > img:first-of-type,
  28. header > img:last-of-type {
  29.     width: 26px;
  30.     height: 26px;
  31.     margin: 5px;
  32. }
  33. header > img:first-of-type {
  34.     border-radius: 50%;
  35. }
  37. header > img {
  38.     width: 94px;
  39. }
  41. /*轮播图*/
  42. .Carousel {
  43.     display: flex;
  44.     height: 200px;
  45. }
  47. /*导航*/
  48. nav {
  49.     background-color: #fff;
  50.     display: flex;
  51.     flex-flow: column nowrap;
  52. }
  54. nav img {
  55.     width: 45px;
  56.     height: 49px;
  57. }
  59. nav > ul {
  60.     display: flex;
  61. }
  62. nav  ul li {
  63.     flex: 1;
  64. }
  66. nav ul li a {
  67.     display: flex;
  68.     flex-flow: column wrap;
  69.     align-items: center;
  70.     margin: 10px;
  71. }
  72. nav ul li a span {
  73.     margin-top: 5px;
  74. }
  76. main {
  77.     display: flex;
  78.     flex-direction: column;
  79. }
  81. main > .course > section:first-of-type {
  82.     display: flex;
  83. }
  84. main > .course > section:first-of-type > a {
  85.     margin: 5px;
  86.     flex: 1;
  87. }
  88. main > .course > section:first-of-type > a  > img {
  89.     height: 90px;
  90. }
  92. /*课程*/
  93. main > .course > section:last-of-type {
  94.     display: flex;
  95.     flex-direction: column;
  96. }
  98. main > .course > section:last-of-type > div {
  99.     background-color: #fff;
  100.     margin: 5px;
  102.     display: flex;
  104. }
  105. main > .course > section:last-of-type > div img {
  106.     width: 350px;
  107.     height: 90px;
  108. }
  109. main > .course > section:last-of-type > div > span {
  111.     flex: 1;
  112.     display: flex;
  113.     flex-direction: column;
  114.     margin-top: 5px;
  115.     padding-left: 10px;
  116. }
  118. main > .course > section:last-of-type > div > span i {
  119.     font-style: normal;
  120.     background-color: #333333;
  121.     color: white;
  122.     border-radius: 3px;
  123.     padding: 0 5px;
  124.     font-size: smaller;
  125. }
  127. main > .course > section:last-of-type > div > span > span {
  128.     margin-top: 40px;
  129.     display: flex;
  130.     justify-content: space-between;
  132. }
  134. footer {
  135.     position: fixed;
  136.     bottom:0;
  137.     width: 100%;
  138.     height: 24px;
  139.     display: flex;
  140.     flex-direction: row;
  141.     justify-content: space-between;
  142.     align-items: center;
  143.     background-color: #edeff0;
  144. }
  145. footer > img {
  146.     width: 26px;
  147.     height: 26px;
  148.     margin: 5px;
  149. }

效果图

总结

移动端和电脑端一样，也是搭积木搬一点一点拼起来，只是需要对可视范围左调整

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