search

博客列表 >移动端网站（前端页面）

移动端网站（前端页面）

可乐
可乐原创
2021年10月03日 18:35:30589浏览

HTML

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>移动端网站首页</title>
  8.     <link rel="stylesheet" href="index.css" />
  9.     <script src="iconfont.js"></script>
  10.  </head>
  11.   <div>
  12.     <!--菜单栏-->
  13.     <div class="home-a">
  14.       <div class="header-a">
  15.         <li>
  16.           <a href="">
  17.             <svg class="icon" aria-hidden="true">
  18.               <use xlink:href="#icon-didiandingwei"></use>
  19.             </svg> </a>地址
  20.         </li>
  21.         <svg class="icon" aria-hidden="true">
  22.           <use xlink:href="#icon-mianbao"></use>
  23.         </svg>
  25.         <a href="">登录用户</a>
  26.       </div>
  27.       <div class="search">
  28.         <a href="">
  29.           <svg class="icon" aria-hidden="true">
  30.             <use xlink:href="#icon-sousuo"></use>
  31.           </svg>
  32.           <form action="">
  33.             <input type="search" name="search" value="荞麦面包" />
  34.           </form>
  35.         </a>
  36.       </div>
  37.     </div>
  38.     <div class="main">
  39.       <!--导航-->
  40.         <div class="navs">
  41.           <a href="" class="icon-a">
  42.                   <img src="nav/jingxuanshipin.png" alt="" class="icon-b" />
  43.                   <div class="txt">精选</div>
  44.                 </a>
  45.                 <a href="" class="icon-a">
  46.                     <img src="nav/mianbao.png" alt="" class="icon-b" />
  47.                     <div class="txt">面包</div>
  48.                   </a>
  49.                   <a href="" class="icon-a">
  50.                     <img src="nav/tianpin.png" alt="" class="icon-b" />
  51.                     <div class="txt">甜品</div>
  52.                   </a>
  53.                   <a href="" class="icon-a">
  54.                     <img src="nav/guozhi.png" alt="" class="icon-b" />
  55.                     <div class="txt">果汁</div>
  56.                   </a>
  57.                   <a href="" class="icon-a">
  58.                     <img src="nav/wuliu.png" alt="" class="icon-b" />
  59.                     <div class="txt">物流</div>
  60.                   </a>
  61.                   <a href="" class="icon-a">
  62.                     <img src="nav/lipinka.png" alt="" class="icon-b" />
  63.                     <div class="txt">礼品卡</div>
  64.                   </a>
  65.                 </div>
  66.         </div>
  67.     <!--轮播图-->
  68.         <div class="picture">
  69.             <div class="imglist">
  70.               <a href="" class="active"><img src="banner/mianbao.jpg" alt="" /></a>
  71.               <a href=""><img src="banner/mianbao.jpg" alt="" /></a>
  72.               <a href=""><img src="banner/mianbao.jpg" alt="" /></a>
  73.               <div class="button">
  74.                 <span class="item active"></span>
  75.                 <span class="item"></span>
  76.                 <span class="item"></span>
  77.             </div>
  78.         </div>
  80.         <!--产品区-->
  82.         <div class="list-container">
  83.           <div class="title-ctnr">
  84.             <h5>甜品</h5>
  85.             <small>推荐</small>   
  86.            </div>
  87.           <ul class="block-ctnr">
  88.             <li>
  89.               <div class="cover-wrap">
  90.                 <img src="product/cake.PNG" alt="">
  91.               </div>
  92.               <div class="cover-cont">
  93.                 <div class="mov-detail">巧克力甜品</div>
  94.                 <div class="mov-info">
  95.                   <div>
  96.                     <i class="iconfont">&#xe8e3;</i>
  97.                     <span>产品价格</span>
  98.                   </div>
  99.                   <li>
  100.                     <div class="cover-wrap">
  101.                       <img src="product/cake.PNG" alt="">
  102.                     </div>
  103.                     <div class="cover-cont">
  104.                       <div class="mov-detail">巧克力甜品</div>
  105.                       <div class="mov-info">
  106.                         <div>
  107.                           <i class="iconfont">&#xe8e3;</i>
  108.                           <span>产品价格</span>
  109.                         </div>
  110.                         <li>
  111.                           <div class="cover-wrap">
  112.                             <img src="product/cake.PNG" alt="">
  113.                           </div>
  114.                           <div class="cover-cont">
  115.                             <div class="mov-detail">巧克力甜品</div>
  116.                             <div class="mov-info">
  117.                               <div>
  118.                                 <i class="iconfont">&#xe8e3;</i>
  119.                                 <span>产品价格</span>
  120.                               </div>
  121.                               <li>
  122.                                 <div class="cover-wrap">
  123.                                   <img src="product/cake.PNG" alt="">
  124.                                 </div>
  125.                                 <div class="cover-cont">
  126.                                   <div class="mov-detail">巧克力甜品</div>
  127.                                   <div class="mov-info">
  128.                                     <div>
  129.                                       <i class="iconfont">&#xe8e3;</i>
  130.                                       <span>产品价格</span>
  131.                                     </div>
  132.                                     <li>
  133.                                       <div class="cover-wrap">
  134.                                         <img src="product/cake.PNG" alt="">
  135.                                       </div>
  136.                                       <div class="cover-cont">
  137.                                         <div class="mov-detail">巧克力甜品</div>
  138.                                         <div class="mov-info">
  139.                                           <div>
  140.                                             <i class="iconfont">&#xe8e3;</i>
  141.                                             <span>产品价格</span>
  142.                                           </div>
  143.                                           <li>
  144.                                             <div class="cover-wrap">
  145.                                               <img src="product/cake.PNG" alt="">
  146.                                             </div>
  147.                                             <div class="cover-cont">
  148.                                               <div class="mov-detail">巧克力甜品</div>
  149.                                               <div class="mov-info">
  150.                                                 <div>
  151.                                                   <i class="iconfont">&#xe8e3;</i>
  152.                                                   <span>产品价格</span>
  153.                                                 </div>
  154.                                               </div>
  155.                                             </div>
  156.                                           </li>
  157.                                         </ul>
  158.                                       </div>
  159.                                        <!-- footer-->
  160.                                       <div class="footer">
  161.                                         <li>
  162.                                           <a href="">
  163.                                             <svg class="icon" aria-hidden="true">
  164.                                               <use xlink:href="#icon-shouyeshouye"></use>
  165.                                             </svg> </a>首页
  166.                                         </li>
  167.                                         <li>
  168.                                           <a href="">
  169.                                             <svg class="icon" aria-hidden="true">
  170.                                               <use xlink:href="#icon-chanpin"></use>
  171.                                             </svg> </a>产品
  172.                                         </li>
  173.                                         <li>
  174.                                           <a href="">
  175.                                             <svg class="icon" aria-hidden="true">
  176.                                               <use xlink:href="#icon-gouwuche"></use>
  177.                                             </svg> </a>购物车
  178.                                         </li>
  179.                                         <li>
  180.                                           <a href="">
  181.                                             <svg class="icon" aria-hidden="true">
  182.                                               <use xlink:href="#icon-wode"></use>
  183.                                             </svg> </a>我的
  184.                                         </li>
  185.                                           </div>
  186.                                     </div>
  187.                                   </body>
  188.                                 </html>

CSS

  1. @import url(shangpin/iconfont.css);
  3. * {
  4.   margin: 0;
  5.   padding: 0;
  6.   box-sizing: border-box;
  7. }
  9. a {
  10.   text-decoration: none;
  11.   color: #666;
  12. }
  14. li {
  15.   list-style: none;
  16. }
  18. @media screen and (min-width: 480px) {
  19.   :root {
  20.     font-size: 12px;
  21.   }
  22. }
  24. @media screen and (min-width: 640px) {
  25.   :root {
  26.     font-size: 14px;
  27.   }
  28. }
  30. @media screen and (min-width: 720px) {
  31.   :root {
  32.     font-size: 16px;
  33.   }
  34. }
  36. @media screen and (min-width: 1080px) {
  37.   :root {
  38.     font-size: 18px;
  39.   }
  40. }
  41. /*  菜单栏 */
  42. .home-a .header-a {
  43.   background-color: rgb(236, 189, 189);
  45.   display: grid;
  46.   grid-template-columns: 5rem 1fr 5rem;
  47.   place-items: left;
  48.   color: #fff;
  49. }
  51. .home-a .header-a li {
  52.   font-size: 15px;
  53.   color: blue;
  54. }
  55. .home-a .header-a .icon {
  56.   width: 1em;
  57.   height: 1em;
  58.   vertical-align: -0.15em;
  59.   fill: currentColor;
  60.   overflow: hidden;
  61.   font-size: 30px;
  62. }
  63. .home-a .search .icon {
  64.   width: 1em;
  65.   height: 1em;
  66.   vertical-align: -0.15em;
  67.   fill: currentColor;
  68.   overflow: hidden;
  69.   font-size: 20px;
  70. }
  72. .home-a .search form input {
  73.   min-height: 30px;
  74.   min-width: 30px;
  75.   outline: none;
  76.   border: none;
  77.   color: gray;
  78.   background-color: black;
  79. }
  81. /*  */
  82. /* 导航 */
  83. .main .navs {
  84.   display: flex;
  85.   padding: 0.6rem 0.5rem;
  86.   place-content: space-evenly;
  87.   place-items: center;
  88.   flex-direction: row;
  89.   align-items: center;
  90. }
  92. .main .navs .icon-a {
  93.   display: flex;
  94.   flex-direction: column;
  95.   place-items: center;
  96.   font-size: 14px;
  97.   color: #666;
  98. }
  99. .main .nvas .icon-a .icon-b {
  100.   width: 4rem;
  101.   height: 4rem;
  102. }
  104. .main .navs img {
  105.   height: 40px;
  106.   width: 40px;
  107. }
  108. /* 轮播图 */
  109. .picture {
  110.   width: 100vw;
  111.   height: 60px;
  112.   position: relative;
  113. }
  115. .picture .imglist {
  116.   width: 100%;
  117.   height: 200px;
  118. }
  120. .picture .imglist img {
  121.   width: 100%;
  122.   height: 300px;
  123. }
  124. .picture .imglist a {
  125.   display: none;
  126. }
  128. .picture .imglist a.active {
  129.   display: block;
  130. }
  132. .picture .button {
  133.   width: 6rem;
  134.   height: 3rem;
  135.   position: absolute;
  136.   top: 10rem;
  137.   right: 0em;
  138.   display: flex;
  139.   justify-content: center;
  140. }
  142. .picture .button .item {
  143.   height: 1.1rem;
  144.   width: 1.1rem;
  145.   border-radius: 50%;
  146.   background-color: #ccc;
  147.   margin: 0.6rem;
  148. }
  150. .picture .button .item:hover {
  151.   cursor: pointer;
  152. }
  154. .picture .button .item.active {
  155.   background-color: #e90e9c;
  156. }
  158. /* 产品区 */
  160. .list-container {
  161.   margin: 2rem 0;
  162.   display: grid;
  163.   grid-template-rows: 3rem 1fr;
  164.   background-color: #fff;
  165. }
  166. .list-container .title-ctnr {
  167.   display: flex;
  168.   padding: 4.5rem;
  169.   place-content: space-between;
  170.   place-items: center;
  171. }
  173. .list-container .title-ctnr span {
  174.   color: grey;
  175. }
  177. .list-container .title-ctnr h5 {
  178.   font-size: 1rem;
  179. }
  181. .list-container .block-ctnr {
  182.   width: 100%;
  183.   padding: 2.5rem;
  184.   display: grid;
  185.   grid-template-columns: repeat(2, 1fr);
  186.   grid-template-rows: repeat(2, 1fr);
  187.   gap: 1rem;
  188. }
  189. .list-container .block-ctnr li {
  190.   height: 15rem;
  191. }
  192. .list-container .block-ctnr li img {
  193.   width: 100%;
  194.   height: 10rem;
  195. }
  196. .cover-cont .mov-detail {
  197.   font-size: 1.4rem;
  198. }
  199. .cover-cont .mov-info {
  200.   margin-top: 1rem;
  201.   display: flex;
  202.   place-content: space-between;
  203.   align-items: baseline;
  204.   color: grey;
  205. }
  207. /* footer */
  208. .footer {
  209.   display: flex;
  210.   padding: 0;
  211.   place-content: space-evenly;
  212.   place-items: center;
  213.   flex-direction: row;
  214.   align-items: center;
  215. }
  217. .footer li {
  218.   font-size: 20px;
  219.   color: black;
  220. }
  222. .footer .icon {
  223.   width: 1em;
  224.   height: 1em;
  225.   vertical-align: -0.15em;
  226.   fill: currentColor;
  227.   overflow: hidden;
  228.   font-size: 45px;
  229. }

效果图



上一条：Dom元素操作-增删改查下一条：第三课：表单、CSS选择器作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议