HTML

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>移动端网站首页</title>
    <link rel="stylesheet" href="index.css" />
    <script src="iconfont.js"></script>
 </head>
  <div>
    <!--菜单栏-->
    <div class="home-a">
      <div class="header-a">
        <li>
          <a href="">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-didiandingwei"></use>
            </svg> </a>地址
        </li>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-mianbao"></use>
        </svg>
        <a href="">登录用户</a>
      </div>
      <div class="search">
        <a href="">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-sousuo"></use>
          </svg>
          <form action="">
            <input type="search" name="search" value="荞麦面包" />
          </form>
        </a>
      </div>
    </div>
    <div class="main">
      <!--导航-->
        <div class="navs">
          <a href="" class="icon-a">
                  <img src="nav/jingxuanshipin.png" alt="" class="icon-b" />
                  <div class="txt">精选</div>
                </a>
                <a href="" class="icon-a">
                    <img src="nav/mianbao.png" alt="" class="icon-b" />
                    <div class="txt">面包</div>
                  </a>
                  <a href="" class="icon-a">
                    <img src="nav/tianpin.png" alt="" class="icon-b" />
                    <div class="txt">甜品</div>
                  </a>
                  <a href="" class="icon-a">
                    <img src="nav/guozhi.png" alt="" class="icon-b" />
                    <div class="txt">果汁</div>
                  </a>
                  <a href="" class="icon-a">
                    <img src="nav/wuliu.png" alt="" class="icon-b" />
                    <div class="txt">物流</div>
                  </a>
                  <a href="" class="icon-a">
                    <img src="nav/lipinka.png" alt="" class="icon-b" />
                    <div class="txt">礼品卡</div>
                  </a>
                </div>
        </div>
    <!--轮播图-->
        <div class="picture">
            <div class="imglist">
              <a href="" class="active"><img src="banner/mianbao.jpg" alt="" /></a>
              <a href=""><img src="banner/mianbao.jpg" alt="" /></a>
              <a href=""><img src="banner/mianbao.jpg" alt="" /></a>
              <div class="button">
                <span class="item active"></span>
                <span class="item"></span>
                <span class="item"></span>
            </div>
        </div>
        <!--产品区-->
        <div class="list-container">
          <div class="title-ctnr">
            <h5>甜品</h5>
            <small>推荐</small>   
           </div>
          <ul class="block-ctnr">
            <li>
              <div class="cover-wrap">
                <img src="product/cake.PNG" alt="">
              </div>
              <div class="cover-cont">
                <div class="mov-detail">巧克力甜品</div>
                <div class="mov-info">
                  <div>
                    <i class="iconfont">&#xe8e3;</i>
                    <span>产品价格</span>
                  </div>
                  <li>
                    <div class="cover-wrap">
                      <img src="product/cake.PNG" alt="">
                    </div>
                    <div class="cover-cont">
                      <div class="mov-detail">巧克力甜品</div>
                      <div class="mov-info">
                        <div>
                          <i class="iconfont">&#xe8e3;</i>
                          <span>产品价格</span>
                        </div>
                        <li>
                          <div class="cover-wrap">
                            <img src="product/cake.PNG" alt="">
                          </div>
                          <div class="cover-cont">
                            <div class="mov-detail">巧克力甜品</div>
                            <div class="mov-info">
                              <div>
                                <i class="iconfont">&#xe8e3;</i>
                                <span>产品价格</span>
                              </div>
                              <li>
                                <div class="cover-wrap">
                                  <img src="product/cake.PNG" alt="">
                                </div>
                                <div class="cover-cont">
                                  <div class="mov-detail">巧克力甜品</div>
                                  <div class="mov-info">
                                    <div>
                                      <i class="iconfont">&#xe8e3;</i>
                                      <span>产品价格</span>
                                    </div>
                                    <li>
                                      <div class="cover-wrap">
                                        <img src="product/cake.PNG" alt="">
                                      </div>
                                      <div class="cover-cont">
                                        <div class="mov-detail">巧克力甜品</div>
                                        <div class="mov-info">
                                          <div>
                                            <i class="iconfont">&#xe8e3;</i>
                                            <span>产品价格</span>
                                          </div>
                                          <li>
                                            <div class="cover-wrap">
                                              <img src="product/cake.PNG" alt="">
                                            </div>
                                            <div class="cover-cont">
                                              <div class="mov-detail">巧克力甜品</div>
                                              <div class="mov-info">
                                                <div>
                                                  <i class="iconfont">&#xe8e3;</i>
                                                  <span>产品价格</span>
                                                </div>
                                              </div>
                                            </div>
                                          </li>
                                        </ul>
                                      </div>
                                       <!-- footer-->
                                      <div class="footer">
                                        <li>
                                          <a href="">
                                            <svg class="icon" aria-hidden="true">
                                              <use xlink:href="#icon-shouyeshouye"></use>
                                            </svg> </a>首页
                                        </li>
                                        <li>
                                          <a href="">
                                            <svg class="icon" aria-hidden="true">
                                              <use xlink:href="#icon-chanpin"></use>
                                            </svg> </a>产品
                                        </li>
                                        <li>
                                          <a href="">
                                            <svg class="icon" aria-hidden="true">
                                              <use xlink:href="#icon-gouwuche"></use>
                                            </svg> </a>购物车
                                        </li>
                                        <li>
                                          <a href="">
                                            <svg class="icon" aria-hidden="true">
                                              <use xlink:href="#icon-wode"></use>
                                            </svg> </a>我的
                                        </li>
                                          </div>
                                    </div>
                                  </body>
                                </html>

CSS

@import url(shangpin/iconfont.css);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: #666;
}
li {
  list-style: none;
}
@media screen and (min-width: 480px) {
  :root {
    font-size: 12px;
  }
}
@media screen and (min-width: 640px) {
  :root {
    font-size: 14px;
  }
}
@media screen and (min-width: 720px) {
  :root {
    font-size: 16px;
  }
}
@media screen and (min-width: 1080px) {
  :root {
    font-size: 18px;
  }
}
/*  菜单栏 */
.home-a .header-a {
  background-color: rgb(236, 189, 189);
  display: grid;
  grid-template-columns: 5rem 1fr 5rem;
  place-items: left;
  color: #fff;
}
.home-a .header-a li {
  font-size: 15px;
  color: blue;
}
.home-a .header-a .icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  font-size: 30px;
}
.home-a .search .icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  font-size: 20px;
}
.home-a .search form input {
  min-height: 30px;
  min-width: 30px;
  outline: none;
  border: none;
  color: gray;
  background-color: black;
}
/*  */
/* 导航 */
.main .navs {
  display: flex;
  padding: 0.6rem 0.5rem;
  place-content: space-evenly;
  place-items: center;
  flex-direction: row;
  align-items: center;
}
.main .navs .icon-a {
  display: flex;
  flex-direction: column;
  place-items: center;
  font-size: 14px;
  color: #666;
}
.main .nvas .icon-a .icon-b {
  width: 4rem;
  height: 4rem;
}
.main .navs img {
  height: 40px;
  width: 40px;
}
/* 轮播图 */
.picture {
  width: 100vw;
  height: 60px;
  position: relative;
}
.picture .imglist {
  width: 100%;
  height: 200px;
}
.picture .imglist img {
  width: 100%;
  height: 300px;
}
.picture .imglist a {
  display: none;
}
.picture .imglist a.active {
  display: block;
}
.picture .button {
  width: 6rem;
  height: 3rem;
  position: absolute;
  top: 10rem;
  right: 0em;
  display: flex;
  justify-content: center;
}
.picture .button .item {
  height: 1.1rem;
  width: 1.1rem;
  border-radius: 50%;
  background-color: #ccc;
  margin: 0.6rem;
}
.picture .button .item:hover {
  cursor: pointer;
}
.picture .button .item.active {
  background-color: #e90e9c;
}
/* 产品区 */
.list-container {
  margin: 2rem 0;
  display: grid;
  grid-template-rows: 3rem 1fr;
  background-color: #fff;
}
.list-container .title-ctnr {
  display: flex;
  padding: 4.5rem;
  place-content: space-between;
  place-items: center;
}
.list-container .title-ctnr span {
  color: grey;
}
.list-container .title-ctnr h5 {
  font-size: 1rem;
}
.list-container .block-ctnr {
  width: 100%;
  padding: 2.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1rem;
}
.list-container .block-ctnr li {
  height: 15rem;
}
.list-container .block-ctnr li img {
  width: 100%;
  height: 10rem;
}
.cover-cont .mov-detail {
  font-size: 1.4rem;
}
.cover-cont .mov-info {
  margin-top: 1rem;
  display: flex;
  place-content: space-between;
  align-items: baseline;
  color: grey;
}
/* footer */
.footer {
  display: flex;
  padding: 0;
  place-content: space-evenly;
  place-items: center;
  flex-direction: row;
  align-items: center;
}
.footer li {
  font-size: 20px;
  color: black;
}
.footer .icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  font-size: 45px;
}

效果图

什么是前端?

2020-07-01

690

前端即网站前台部分，是运行在PC端、移动端等浏览器上展现给用户浏览的网页。前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现。

vue.swiper是什么

2021-01-25

vue.swiper是目前应用较广泛的移动端网页触摸内容滑动js插件，是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端；能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

vue.js能做pc端吗

2020-12-17

vue.js能做pc端，因为Vue是一套构建用户界面的渐进式框架，不管是用在PC端还是用在移动端，只要提供对应的API及数据相应就可以；但是PC端单页面对于搜索引擎可能不太友好，无法让搜索引擎把整个网站收录

微信PC端登录和手机端登录逻辑分享

2020-06-29

300

PC端登录需要在微信开放平台申请，而移动端授权登录只需要有已经认证的服务号即可。然后同一个网站平台，用同一个微信用户去登录，会发现PC端获取的微信用户openid和移动端不同，这个问题如何解决？

浏览器关闭javascript有哪些影响

2021-06-15

JavaScript是前端技术中非常重要的内容，用于实现各种动态效果，提升用户体验感；若关闭JavaScript会造成页面上很多功能无法使用，使得网站体验差或网站部分功能无法使用。

javascript关闭后有什么影响

2021-07-21

803

vuejs有哪些使用场景

2021-09-10

835

vuejs的使用场景：1、单页面应用程序；2、移动端开发，可以结合i-view、Element UI等一些成熟的前端UI库一起开发；3、维护较少，组件复用要求不高的项目；4、具有复杂交互逻辑的前端应用等

asp和php网站的区别

2021-03-25

931

asp和php网站的区别：1、asp网站是用asp脚本开发的动态网站，而php网站是用php脚本开发的动态网站；2、ASP是Active Server Page的缩写，意为“活动服务器网页”，而PHP是在服务器端执行的脚本语言

vue.js支持移动端吗

vue.js支持移动端，以制作移动端的Webapp；Vue.js是一个开源JavaScript框架，能够开发单页面应用程序；它还可以用作Web应用程序框架，旨在简化Web开发。

Docker 管理面板有什么用？

2020-06-11

1089

Docker管理面板，可以把服务器端软件应用的安装行为简化到极致，堪称服务器端的应用宝，具有集群管理、自动故障转移、自动负载均衡等高级功能，可轻易搭建7*24小时在线的网站运行环境。

vuejs能做什么

2021-09-24

992

vuejs能做的事：1、能让基于网页的前端应用程序开发起来更加方便；2、可以简单写单个页面，也可以写一个大的前端系统；3、可以做从简单到复杂的前端单页应用，随处可见的Web前端都可以用Vue来开发。

vant和uniapp的区别是什么？

2021-01-15

区别：Vant是一套轻量、可靠的移动端Vue组件库，可以快速搭建出风格统一的页面，提升开发效率；而uni-app是一个使用Vue.js开发跨平台应用的前端框架，可以用于开发出兼容多端的应用。

javascript是前端还是后端

2021-04-01

491

javascript是前端。javascript是前端开发语言，经常与html、css技术一起构成前端开发；它一般通过ajax与后台进行数据交互。

php如何实现文件上传下载

2020-10-29

730

php实现文件上传下载的方法：首先创建好表单页面；然后将客户端文件上传到服务器端；最后将服务器端的文件移动到指定目录即可。

2021年前端React面试题大汇总（收藏）

2021-01-04

php中文网作为知名编程学习网站，为您整理了一些React面试题，帮助前端开发人员准备和清除React面试障碍。

PHP7留言板开发之 Ajax异步提交

2020-12-18

124

随着前端技术的不断迭代更新，网站很多功能的实现都转移到前端去实现，2018年第一季度编程语言排名来看，JavaScript仍然是最受欢...

2021年js面试题及答案（大汇总）

目前大前端开发越来越吃香，如果你想从事大前端开发，javascript要求必学必会，所以php中文网作为知名编程学习网站，为您整理了2021年最全的js面试题，包含js基础面试题、js高级面试题以及js

TP之移动端微信授权登录

2020-09-08

541

1、网页端微信登录必须在微信中实现。和PC端扫码登录不同，移动端网页无法使用普通浏览器微信授权登录，必须在微信中使用，这是必须要明确的。2、准备工作。我们需要有一个已经认证的微信服务号，这是必备条件。

jQuery JavaScript ajax区别是什么

2020-11-20

604

jQuery JavaScript ajax区别：1、javaScript广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能；2、AJAX创建交互式网页应用的网页开发技术；3、jQuery

vue中Mint UI是什么？

2020-11-25

336

在vue中，Mint UI是饿了么团队开源的一款基于Vue.js的移动端组件库。

移动端网站（前端页面）

HTML

CSS

效果图

全部评论

关注公众号QQ交流群