手机端网页制作

最新推荐文章于 2024-04-25 17:52:15 发布
最新推荐文章于 2024-04-25 17:52:15 发布
阅读量1.3k 收藏 22
点赞数 5
文章标签： webview elementui css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/helongzhi/article/details/124953470
版权

html 代码

<!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, initial-scale=1.0">
    <title>Document</title>
    <!-- 01 控制屏幕大小 不放大 缩小 -->
    <meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum
    -scale=1,user-scalable=no,viewport-fit=cover">
    <!-- 02 引入flexile.js 文件 -->
    <script src="./js/flexible.js"> </script>
    <!-- 03设置rem和px换算的比例关系 1rem—>75px -->
    <link rel="stylesheet" href="./font_3424450_vdzyfrttoqm/iconfont.css">
    <link rel="stylesheet" href="./font_3426058_1paqmuljc5v/iconfont.css">
    <link rel="stylesheet" href="./index.css">
    
    

</head>
<body>
    <!-- 头部设置 -->
<header>
   <div id="header-top">
        
    <div>

        <i class="iconfont">&#xe637;</i> <input type="text" name="" id="" placeholder="输入你要搜索的内容">
    </div><i class="iconfont">&#xe61c;</i>
    </div>
</header>
<!-- 头部结束 -->



<!-- 分类专栏 -->
<ul id="zhuanglan">

<li>
    <span style="background-color:#13C27F;"><i class="iconfont">&#xe8c6;</i></span>
    <span>热门问答</span>

    
</li>

<li>
    <span style="background-color:#FF8A4D;"><i class="iconfont">&#xe650;</i></span>
    <span>知识专栏</span>

</li>


<li>
    <span style="background-color:#EFBA5E;"><i class="iconfont">&#xeafb;</i></span>
    <span>视频专栏</span>

</li>

<li>
    <span style="background-color:#72CEFD;"><i class="iconfont">&#xe67c;</i></span>
    <span>积分商城</span>


</li>

<li>
    <span style="background-color:#40A3EF;"><i class="iconfont">&#xe623;</i></span>
    <span>JAVA专栏</span>

</li>

<li>
    <span style="background-color:#F67174;"><i class="iconfont">&#xe68c;</i></span>
    <span>UI专栏</span>

</li>

<li>
    <span style="background-color:#53C7E0;"><i class="iconfont">&#xe61d;</i></span>
    <span>WEB专栏</span>

</li>

<li>
    <span style="background-color:#8D93DD;"><i class="iconfont">&#xec68;</i></span>
    <span>JS专栏</span>

</li>



</ul>
<!-- 内容专栏结束 -->


<!-- 福利专栏 -->
<ul id="fuli">


<li id="hongbao">
    <span><i class="iconfont">&#xe6da;</i></span>
    <p>
        <span>新人福利社</span>
        <span>必领的免费劵</span>
    </p>


</li>

<li id="jifeng">
    <span><i class="iconfont">&#xe6da;</i></span>
    <p>
        <span>新人福利社</span>
        <span>必领的免费劵</span>
    </p>


</li>
</ul>
<!-- 福利专栏 结束-->

<!--查看更多 -->

<div id="chakan">
<ul>
    <li>
        <img src="./屏幕截图 2022-05-24 145831.png" alt="">
        <p>arrylist长度是多少 多少新人可能都bzd</p>
        <span>5368 关注</span>

    </li>

    <li>
        <img src="./屏幕截图 2022-05-24 145831.png" alt="">
        <p>arrylist长度是多少 多少新人可能都bzd</p>
        <span>5368 关注</span>

    </li>

    <li>
        <img src="./屏幕截图 2022-05-24 145831.png" alt="">
        <p>arrylist长度是多少 多少新人可能都bzd</p>
        <span>5368 关注</span>

    </li>
</ul>

<p id="chakan-bottom">
    <span>
        <i class="iconfont">&#xe608;</i>查看更多
    </span>
    <span>

        <i class="iconfont">&#xe62d;</i>换一批

    </span>
</p>


</div>
<!--查看更多 结束-->

<!-- 热门问答 -->
<div id="wenda">

<p>  <span><i class="iconfont">&#xe632;</i></span><span>热门问答</span></p>

<div class="wenda1">

<p>
    JS的JSON数组字符串数据合并,请教下怎么写ja字符在哪
 </p>
<p>
    —个html代码写的合同页面,打印预览时有的页面最后一行显示不全?让它能把第三个KEY整合在一起怎么解决。
</p>


<p>
    <span>
         234  <i class="iconfont">&#xe632;</i> 
    </span>
    <span>3244浏览</span>
    <span>3424回答</span>
</p>

</div>



<div class="wenda1">

    <p>
        JS的JSON数组字符串数据合并,请教下怎么写ja字符在哪
     </p>
    <p>
        —个html代码写的合同页面,打印预览时有的页面最后一行显示不全?让它能把第三个KEY整合在一起怎么解决。
    </p>
    
    
    <p>
        <span>
             234  <i class="iconfont">&#xe632;</i> 
        </span>
        <span>3244浏览</span>
        <span>3424回答</span>
    </p>
    
    </div>




    <div class="wenda1">

        <p>
            JS的JSON数组字符串数据合并,请教下怎么写ja字符在哪
         </p>
        <p>
            —个html代码写的合同页面,打印预览时有的页面最后一行显示不全?让它能把第三个KEY整合在一起怎么解决。
        </p>
        
        
        <p>
            <span>
                 234  <i class="iconfont">&#xe632;</i> 
            </span>
            <span>3244浏览</span>
            <span>3424回答</span>
        </p>
        
        </div>



</div>
    













<footer>
<p>
    <i class="iconfont">&#xe603;</i>   <span>发现</span>
</p>

<p>
    <i class="iconfont">&#xe638;</i>   <span>分类</span>
</p>
<p>
    <i class="iconfont">&#xe650;</i>   <span>知识</span>
</p>
<p>
    <i class="iconfont">&#xe62f;</i>   <span>我们</span>
</p>





</footer>













</body>
</html>

css 部分

/* 清除默认样式 */
*{
    margin:0;
    padding:0;
}
body,html{
    height: 100%;
    background-color: #EFEFEF;


}
ul>li{
    list-style: none;
}
/* 头部设置 */

header{
    height: 4.6667rem;
    /* 背景图 */
background:url(./QQ截图20220524135840.png) no-repeat  ;
background-size:cover;


}






/* 头部上部分 */

#header-top{
    height: 1.2rem;
    /* background-color: aquamarine; */
    /* 弹性盒子 */
    display: flex;
    /* 右对齐 */
    justify-content: flex-end;
    /* 垂直居中 */
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 20;

}

/* 搜索栏设置 */
#header-top>div{
    height:.8rem;
    width: 6.6667rem;
    border-radius: .4rem;
    margin-right:.7733rem ;
    background-color: white;
    display: flex;
}

#header-top>div>.iconfont{
    font-size:0.8rem;
}

#header-top>div>input{
    border:none;
     outline: none;
    outline:medium; 
}


/* 图标设置 */
#header-top>.iconfont{
  font-size:.8rem ;
  color: white;
}

/* 内容专栏 */
#zhuanglan{
    height: 5.4rem;
     background-color: #FFFFFF; 
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    

}
/* 每一个小内容 */
#zhuanglan>li{
   
    width: 1.4rem;
    height: 2rem;
    /* background-color: brown; */
    margin: 0 .5333rem;
    font-size: .32rem;
    /* 弹性盒子 */
    display: flex;
    /* 改变主轴 */
    flex-direction: column;
    /* 两端对齐 */
    justify-content: space-between;
    /* 居中 */
    align-items: center;
}
/* 图标圆框设置 */
#zhuanglan>li>span:nth-of-type(1){
    width: 1.4rem;
    height: 1.4rem;

    border-radius: 50%;
    display: flex;
    /* 水平居中 */
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
    


}
/* 图标设置 */
#zhuanglan>li>span:nth-of-type(1)>.iconfont{
    font-size: 0.5067rem;
    color: white;
    
}







/* 福利专栏 */
#fuli{
    height:3rem ;
    
    background-color: #FFFFFF; 
    display: flex;
    justify-content: space-around;
    
}
/* 每一个小盒子设置 */
#fuli>li{
    width: 4.6667rem;
    height:2rem ;
    background-color: #F3F3F3;
    display: flex;
    align-items: center;
    
}
/* 红包 */
#hongbao .iconfont{
    font-size:1.7rem;
    color: red;

}
/* 文字 */
#fuli>li>p{
    display: flex;
    flex-direction: column;
}
#fuli>li>p> span:nth-of-type(1){
 font-size: 0.4667rem;
}
#fuli>li>p >span:nth-of-type(2){
   font-size: .4rem;
}

/* 积分 */
#jifeng .iconfont{
    font-size:1.7rem;
    color: red;

}
/* 查看更多 */
#chakan{
    height:7.4667rem;
    background-color: #FFFFFF; 
    margin: 0.5rem 0;
    overflow: hidden;
}
/* 上部分 */
#chakan>ul{
    height:6.2667rem;
    background-color: #FFFFFF; 
    border-bottom: 1px solid gray;
    display: flex;
    

}
/* 每一个小盒子设置 */
#chakan>ul>li{
    width:4.04rem;
    height:6.2667rem;
    font-size: 0.3067rem;
    margin: 0 .0667rem;
    /* background-color: brown; */
    /* 弹性盒 */
    display: flex;
    /* 垂直方向为主轴 */
    flex-direction: column;
    /* 水平居中 */
    align-items: center;
    
    
}
/* 图片设置 */
#chakan>ul>li>img{
    width:4.04rem;
height: 3.0667rem;
margin: .1333rem 0;
}
/* 图片下方文字设置 */
#chakan>ul>li>p{
    height: .8rem;
    /* background-color: aquamarine; */
    font-size:0.4rem;
    margin: .1333rem 0;
    font-weight: bold;
}
#chakan>ul>li>span{
    width: 2.2667rem;
   line-height:0.8rem;
    border: 1px solid red;
    text-align: center;
    color: red;
    margin-top:0.3rem ;
}
/* 查看更多下方设置 */
#chakan-bottom{
    font-size: 0.4rem;
    height: 1.2667rem;
    color: gray;
    display: flex;
    /* 距离 */
    justify-content: space-around;
    /* 垂直居中 */
    align-items:center;
    /* background-color: bisque; */
    
    
}
#chakan-bottom>span{
    height: .5333rem;
    /* background-color: aqua; */
    
}
#chakan-bottom>span>.iconfont{
    color:red;
    margin: 10px;
}
/* 热门问答 */
#wenda{
    margin-top:0.3rem;
    background-color: #FFFFFF; 
}
/* 设置上方文字 */
#wenda>p{
    height: 1.7333rem;
    border-bottom: 1px solid gray;
    font-size: 0.6rem;
    display: flex;
    /* background-color: aqua; */
    
  
   
 
}
/* 设置文字样式 */
#wenda>p>span{
    height:0.7rem;
    /* background-color: brown; */
    margin-top:0.3rem;
    margin-left: .0667rem;
}
#wenda>p>span>.iconfont{
    font-size: 0.6rem;
    color: red;
}

/* 下方每一个块元素设置 */
.wenda1{
    height: 4.8rem;
    /* background-color: aqua; */
    padding:0.2667rem ;
    border-bottom:1px solid gray ;
}
/* 第一行文字样式 */
.wenda1>p:nth-of-type(1){
    font-size: .4667rem;
    font-weight: 700;
    margin: 0.4rem 0;

}
/* 第二段文字样式 */
.wenda1>p:nth-of-type(2){
    font-size: .4133rem;
    color: gray;
}
/* 第三段文字样式 */
.wenda1>p:nth-of-type(3){
    font-size: .4133rem;
    color: gray;
    height: .5333rem;
    /* background-color: aqua; */
    margin:0.6rem 0;
    display: flex;
    justify-content: space-between;


}
.wenda1>p:nth-of-type(3)>span:nth-of-type(1){
    color:red
}
/* 第三段距离样式 */
.wenda1>p:nth-of-type(3)>span:nth-of-type(2){
    margin-left:1.9rem;
}






/* 底部 */
footer{
    height: 1.2rem;
    background-color: #EFEFEF;
    font-size: .3067rem;
    display: flex;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    width: 100%;
}
footer>p{
  width: .7333rem;
  /* background-color: aqua; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
footer>p>.iconfont{
    font-size:.7333rem ;

}

引入的flexile.js 文件

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

效果图

 

我拿青春赌未来~
关注
  • 5
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JS制作手机端自适应缩放显示
10-24
允许网页宽度自动调整的"自适应网页设计"到底是怎么做到的？下面我们就来通过示例来探讨下。
html手机端网页如何在手机显示
m0_48639378的博客
05-27 3990
手机查看移动端html文件
[转]移动前端自适应解决方案和比较
weixin_34007906的博客
04-02 2942
移动前端自适应解决方案和比较 昨天晚上仔细看了这篇文章，写的很好，转载下来，常记于心. 以下文章摘自:前端开发博客 (http://caibaojian.com/mobile-responsive-example.html) 以下为正文: 互联网上的自适应方案到底有几种呢？就我个人实践所知，有这么几种方案： 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案 使用f...
移动手机端网页布局 常用的3种方式 总结
weixin_30735745的博客
01-03 520
手机端网页现在已经发展的非常迅猛，很多公司度需要网页能兼容各种不同尺寸屏幕的手机。 下面我给大家讲讲我常用的3放布局方式： 1：响应式布局。 可以用px作为像素，网页进行平铺。全屏的用100%。高度可以用px写死，宽度可以用百分比。不管网页怎么拉伸，高度不变，宽度会相应的扩大。 2：em/rem 方式布局。 可以设置好html，body的字体大小，然后用不同的尺寸手机...
电脑点击wap页面跳转pc_手机网站和电脑网站有什么区别
weixin_39709979的博客
11-23 256
虽然我们在使用手机网站和电脑网站的时候感觉并没有太大的不同，但我们可能会觉得一个是用手，一个是用鼠标，屏幕大小不一样，一个是相似的，但实际上是不一样的，它们有本质的不同，更大的不同是平台不一样，下面就是用手机网站和电脑网站不同之处。风格特点不同PC网站和手机网站风格有“详”与“简”的区别。PC网站展现的是企业全面详细的信息，它的特点就是面面俱到;而手机网站是居于短信、定位、分享、留言等基本功能的网...
几个非常简单漂亮的手机版网页_有了这几个网站，我的工作效率提高了不止3倍！...
weixin_39890431的博客
12-05 3873
大家好，我是洁洁！随着笔记本电脑、iPad 这些移动设备的普及，现在我们不仅在办公室办公，还会在家里、机场、酒店、咖啡厅等各种地方工作。有时候临时换了电脑，却没有安装需要的应用软件，总要花时间去重新安装。几十 M 的还好，万一碰上几个 G 的 Photoshop 之类的……就哭了。我个人非常喜欢在线工具，它不需安装，只要一个浏览器就够，非常适合多终端进行工作！经过一段时间的使用和研究，今天给大家分...
如何做好手机端网页设计
Mr_GuoPengFei的博客
08-24 1660
　　你有没有想过? 移动端页面总是做不好,是设计水平不够还是方法出了问题? 　　在日常生活中，大部分人对于手机的使用度远超过电脑，随着5G时代的到来，对于手机的依赖程度仍呈现上升的趋势，而早在几年前，PC端流量就开始呈现断崖式的下滑。时至今日，有90%-95%的流量来源于手机端，所以手机端页面就成了现在设计的重中之重。 　　一、手机端网页设计与PC端的区别 　　区别一：视觉浏览比例不同 　　在设计工作进行时，PC端页面在PS中实时浏览的视觉效果，基本上就可以对应其完成上线后的实时效果，电脑上视觉浏览
手机上网页是html,如何在手机上制作自己的网页
weixin_39805732的博客
06-16 7626
在手机上制作自己的网页的方法一、工具/原料html页面vs2008二、方法/步骤1、打开vs2008了。点击【文件】【新建文件】【常规】【HTML页面】【打开】。2、如图所示，新建了一个空白的html页面，拆分视图。3、设置页面body样式信息。【-webkit-touch-callout: none; -webkit-text-size-adjust: none;】是防止用户复制和保存图片,只支...
移动WEB开发
DeDeDeFeng的博客
05-21 850
移动端常见浏览器 UC 、欧鹏、百度、360、谷歌、搜狗、猎豹浏览器...总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。
几个非常简单漂亮的手机版网页_虽然只有1.39M，但它却是手机上网最强辅助
weixin_39642990的博客
11-30 4218
最近网上冲浪的时候，有网友给我安利了一个叫万花筒的浏览器导航页。网页端长这样：手机端长这样：毫无疑问万花筒比什么 360 主页导航、2345 主页导航要简洁优雅得多，没广告，支持多个搜索引擎切换，网址分类合理，适配双平台，如果没啥特别需求，用它替换掉浏览器默认导航页很不错。但对老浏览器玩家而言，万花筒虽好，作为主要内容的网址却并不适合所有人，而在一定程度上是开发者个人喜好的体现。毕竟大家...
商城手机端设计，电商网页设计制作模板.zip
03-16
Responsiveness：后台管理系统应当是响应式设计，能够适配不同设备屏幕大小，包括电脑、平板和手机等。 权限控制：根据用户角色设定不同的权限，确保用户只能访问其权限范围内的功能。 数据安全：对用户数据进行加密...
移动开发手机网页制作精辟源码
08-22
Android、iPhone、Windows.Phone移动开发手机网页制作精辟源码
jQuery手机端搜索框样式代码
05-01
jQuery手机端搜索框样式代码基于jquery.1.9.1.min.js制作，可删除输入的搜索内容。
解决 Hbuilder打包 Apk pad 无法横屏 以及 H5 直接打包 成Apk
一码归一码@
12-18 5618
下面是创建app 项目 wap站首页地址 可以配置 你H5的登录页 也可以是 你的index 页面 然后 会有一些 配置 你可以去百度 manifest.json 这个 配置文件 配置一下 就可以了 很方便 打包后直接 可以安装 到手机上。如果 你有自己的H5 也可以 自己去创建一个空壳 只需要 加上你 H5的请求地址 就可以了。当然 你的 H5前提是做了 自适应 不然 样式会很丑的。下面是manifest.json 配置文件。
Element-plus使用记录
IT菜鸟
04-24 245
Element-plus使用中遇到的问题与解决方案。
el-popover放在el-table中点击无反应问题
Z_Gleng的博客
04-24 306
我们想在table中给btn加弹框但是 el-popover点击按钮没有任何反应。:通过插槽去添加这个组件el-popover的id是否绑定了一个值。给每个el-popover都加上单独的id。代码 给每个组件都绑定ref。通过他的id去控制关闭。
element plus：tree拖动节点交换位置和改变层级
1111111111
04-23 410
图层list里有各种组件，用element plus的tree来渲染，可以把图片等组件到面板里，面板是容器，非容器组件，比如图片、文本等，就不能让其他组件拖进来。对于其他组件来说，只有before和after是允许的，所以当type不等于inner的时候，allow-drop的返回值才是true，否则是false。比如把A节点向B节点拖动，before表示把A拖到B的前面，after表示把A拖到B的后面，inner表示把A拖到B里面去。关键点：draggable为true，设置allow-drop方法。
el-table 三角形提示
最新发布
凡尘
04-25 397
el-table 三角形提示
java扫二维码进入自己制作的手机端网页
01-22
要实现在Java中扫二维码进入自己制作的手机端网页，可以通过使用Zxing库来实现二维码的扫描和解码。首先，需要在Java项目中引入Zxing库，然后编写代码实现二维码扫描的功能。在扫描到二维码后，可以获取二维码中的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值