代码编织梦想

移动端h5+js_觅花彩碟的博客-爱代码爱编程

Posted on2022-11-23 分类: javascript 前端 css 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 移动端 -->
  <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">  
  <title>首页</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/index.css">
  <!-- 引入这个js -->
  <script src="./js/rem.js"></script>
</head>
<body>
  <!-- 头部 -->
  <div class="header">
    <div class="header_searchBox">
      <img src="./img/index_search.png" alt="搜索">
      <input type="text" placeholder="输入关键字，搜索您想要的">
    </div>
  </div>
  <!-- banner图 -->
  <div class="banner">
    <img src="./img/index_banner.png" alt="banner图">
  </div>
  <!-- 分类 -->
  <div class="category">
    <!-- 第一页 -->
    <div class="categoryList">
      <!-- 商品 -->
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box" style="margin-right: 0;">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box" style="margin-right: 0;">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
    </div>
    <!-- 第二页 -->
    <div class="categoryList">
      <!-- 商品 -->
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box" style="margin-right: 0;">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box" style="margin-right: 0;">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
    </div>
    <!-- 第三页 -->
    <div class="categoryList">
      <!-- 商品 -->
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box" style="margin-right: 0;">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box" style="margin-right: 0;">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
    </div>
  </div>
  <!-- 
      1. 点击个人中心
      2. 出现一个蒙层:   蒙层要固定定位   不能滑动
      3. 3个按钮, 并且三个按钮是平移出现的  
          (显示和隐藏的一个关系)
        过渡是不能用来实现 display: none;
    蒙层的实现方式:   z-index;
    客服和订单的实现:   透明度 + 平移
  -->
<div class="person">
  <img class="modelView_box" src="./img/index-center.png" alt="图片" />
  <div class="model">
    <img class="modelBack" src="./img/index-back.png" alt="返回">
    <img class="modelOrder" src="./img/index-info.png" alt="订单">
    <img class="modelCus" src="./img/index-info.png" alt="客服">
    <img class="modelInfo" src="./img/index-info.png" alt="信息">
  </div>
  <div class="i">
  <img src="./img/皇冠.png" alt="皇冠">
  <span class="txt">推件商品</span>
</div>
  <div>
    <!-- 第四部分吗 -->
    <div class="fiex" >
       <img src="./img/index_category_img.png" alt="">
       <img src="./img/电子数码5.png" alt="">
       <img src="./img/index_category_img.png" alt="">
    </div>
    <div style="background: #fff;">
      <img src="./img/index_category_img.png" alt="">
      <img src="./img/电子数码5.png" alt="">
      <img src="./img/index_category_img.png" alt="">
   </div>
</div>
</body>
</html>

Js index.css

html, body{
  width: 100%;
  height: 100%;
  background: #fff;
}

.header{
  width: 7.5rem;
  height: 3.48rem;
  background: url(../img/index_bg.png) no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
}
.header_searchBox{
  width: 6.98rem;
  height: 0.8rem;
  background: #FFFFFF;
  border-radius: 0.4rem;
  margin: 0.38rem auto 0;
  display: flex;
}
.header_searchBox>img{
  width: 0.24rem;
  height: 0.24rem;
  display: block;
  margin: 0.28rem 0.1rem 0.28rem 0.52rem;
}
.header_searchBox>input{
  width: 4rem;
  height: 0.34rem;
  line-height: 0.34rem;
  border: none;
  margin-top: 0.24rem;
}
/* banner 图 */
.banner{
  width: 6.92rem;
  height: 2.4rem;
  margin: -1.72rem auto 0;
  overflow: hidden;
  border-radius: 4px;
}
.banner>img{
  display: block;
  width: 100%;
  height: 100%;
}
/* 分类 */
.category{
  margin: 0.4rem 0.6rem 0.52rem;
  /* padding: 0.4rem 0.6rem 0.52rem; */
  overflow: auto;
  white-space: nowrap;
}

.categoryList{
  width: 6.2rem;
  height: 3.08rem;
  display: inline-flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.category_box{
  margin-right: 0.72rem;
}
.category_box>img{
  width: 1rem;
  height: 1rem;
  display: block;
}
.category_box_tit{
  font-size: 0.24rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 0.34rem;
}
/*第四部分*/
.person{
  width: 6.9rem;
  height: 1.02rem;
  background: url(../img/矩形.png) no-repeat;
}
.i{
  font-size: 0.3rem;
}
.center{
  width: 6.5rem;
  height: 4.14rem;
  background: url(../img/矩形.png) no-repeat; 
}
span{
  font-size: 0.32rem;
}
.di{
 flex-direction: row;
}
.div1{
  width: 1.1rem;
  height: 1.1rem;
  font-size: 0.06rem;
  text-align: center;
}
.img{
  width: 1rem;
  height: 1rem;
}


/* 悬浮 */
.modelView_box{
  width: 1.32rem;
  height: 1.32rem;
  display: block;/* 转换行内块*/
  position: fixed;
  top: 8.12rem;
  right: 0.12rem;
}
.model{
  width: 100%;
  height: 100%;
 
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all .3s;/*过渡*/   
}
.modelBack{
  width: 1.32rem;
  height: 1.32rem;
  display: block;
  position: absolute;
  top: 8.12rem;
  right: 0.12rem;
  background: #FFFFFF;
  border-radius: 50%;
}
.modelOrder{
  width: 1.32rem;
  height: 1.32rem;
  display: block;
  position: absolute;
  top: 6.86rem;
  /* right: 0.26rem; */
  right: -2rem;
  opacity: 0;
  transition: all .3s;
}
.modelCus{
  width: 1.32rem;
  height: 1.32rem;
  display: block;
  position: absolute;
  top: 7.2rem;
  /* right: 1.72rem; */
  right: -1.72rem;
  opacity: 0;
  transition: all .3s;
}
.modelInfo{
  width: 1.32rem;
  height: 1.32rem;
  display: block;
  position: absolute;
  top: 8.5rem;
  /* right: 1.44rem; */
  right: -2rem;
  opacity: 0;
  transition: all .3s;
}

.modelView_box:hover + .model{
  z-index: 99;
}

/* 1. 平移  +  透明度 */
.modelView_box:hover + .model .modelOrder{
  right: 0.26rem;
  opacity: 1;
}
.modelView_box:hover + .model .modelCus{
  right: 1.72rem;
  opacity: 1;
}
.modelView_box:hover + .model .modelInfo{
  right: 1.44rem;
  opacity: 1;
}

 

html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img {
  margin: 0;
  padding: 0
}
fieldset,img {
   border: 0
}
img {
 
}
address,caption,cite,code,dfn,th,var {
    font-style: normal;
    font-weight: normal
}
ul,ol {
    list-style: none
}
input {
    padding-top: 0;
    padding-bottom: 0;
    font-family: "SimSun","宋体"
}
input::-moz-focus-inner {
    border: 0;
    padding: 0
}
select,input {
    vertical-align: middle
}
select,input,textarea {
    font-size: 12px;
    margin: 0
}
 input[type="text"],input[type="password"],textarea {
    outline-style: none;
    -webkit-appearance: none
}
textarea {
    resize: none
}
table {
    border-collapse: collapse
}

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WH20000410/article/details/127992915

H5+搭建移动端应用-爱代码爱编程

2020-06-26 标签: web html5 js vue分类: web app 移动端

1. H5+搭建移动端应用 前两篇介绍了全栈系统里面后台和前端：后台篇：Flask搭建后台前端篇：Vue2.0搭建PC前端项目线上地址：项目访问链接，账号：admin 密码：admin 今天讲述搭建全栈系统里面的移动端。本文讲述用Vue2.0 + mint-ui创建一个移动端APP，这属于全栈系统中的移动端，项目包含以下内容： 入口页面：定义登录页面

Continue Reading

移动端H5的js操作-爱代码爱编程

2021-01-15 分类: js 前端

移动端H5处理物理退回 //手机端物理退回,重新加载前一个页面 $(document).ready(function() { window.history.pushState("","","#"); }); window.addEventListener("popstate",function(e){ //触发物理回退时,前一个页面的url

Continue Reading

h5+css3+js之移动端轮播图-爱代码爱编程

2021-02-09 分类: 前端 css3 html5 # 案例

概要 功能概要 自动播放轮播图用户手动滑动轮播图涉及知识点 采用css3中transition实现动画移动过渡效果以及transform实现动画效果采用h5中classList切换类的方式实现底部小圆圈同步变化效果移动端touch触屏事件效果预览实现代码 html <!-- 轮播图--> <div class="focu

Continue Reading

移动端H5+vue使用vue-pdf在线预览PDF-爱代码爱编程

2021-12-01 分类: javascript 前端 vue.js

  需求是点击查看收据按钮，进入新页面直接显示收据，可以放大、缩小、旋转、下载，没有分页 1、安装 npm i vue-pdf --save 2、使用 <template> <div > <pdf v-if="show" :rotate="pageRotate" ref="pdf" :src="pdf

Continue Reading

移动端H5+Mui实现滑动翻页-爱代码爱编程

2021-12-15 分类: 移动端H5 javascript html 前端

最近在做一个上滑下滑翻页的效果，由于页面内也有横向和纵向的滑动，使用文章底部链接的demo，并没有很好的实现这一效果，在此基础上借助mui的滑动实现了这一效果，特此记录一下，以备后用。 实现思路： 使用mui的滑动组件进行页面内的滑动，页面滑动到底部之后进行翻页操作 代码如下 <!DOCTYPE html> <html> &l

Continue Reading

移动端布局基础（html+css+js）-爱代码爱编程

2022-04-02 分类: 日志 h5.c3.js移动端开

1、视口 1、布局视口 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。iOS,Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。 PC端网页直接应用于移动端就只能展现一部分内容 2、视觉视口 字面意思，

Continue Reading

python实现全自动输入文本_予人三的博客-爱代码爱编程

2022-11-20 分类: python

文章目录 1. 效果图2. 示例代码3. 代码解释 1. 效果图 该Python脚本可以实现自动用Notepad++打开文本文件，然后自动输入文本，最后保存并关闭文件，从而实现全面自动化处理文本。 2.

Continue Reading