search

博客列表 >1227-移动端

1227-移动端


原创
2020年01月01日 01:21:49609浏览

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. }

效果图

总结

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

上一条：12月30日larave 增删改查下一条：12月24日_jQuery筛选、事件、动画和工具
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多