一、用户需求 做一个简单的网页版销售合同签核系统 1.业务员需要在手机或者电脑上操作，Key入销售合同 2.业务员填入相应的合同信息，对应主管签核 3.最终签核完...1.登录界面 因为需要在手机上面显示，本人又是啥都不会，于是百度到了这样的一句话 <meta name="viewport" content="width=device-width, initial-scale...viewport 是用户<em>网页</em>的可视区域。 viewport 翻译为中文<em>可以</em>叫做”视区"。...用户可以通过平移和缩放来看网页的不同部分。...可以理解 “width=device-width”的作用就是把viewport的宽度变成了设备的宽度，无论竖屏还是横屏都一样,回头看下为什么我们在手机上打开一个正常的pc端网站，在没有手动缩放的情况下，
webkit-tap-highlight-color:transparent; 取消ios里Button、Input上的默认样式 -webkit-appearance:none; 禁用长按页面时的弹出菜单 通常当你在手机上长按图像...添加到主屏幕时设置系统顶栏颜色 当我们将一个网页添加到主屏幕时，还可以对系统显示手机信号、时间、电池的顶部状态栏 颜色进行设置，前提是开启了： 有了这个前提，你可以通过下面的方式来进行定义： content...只有3个固定值可选：default | black | black-translucent 如果设置为 default，状态栏将为正常的，即白色，网页从状态栏以下开始显示； 如果设置为 black，状态栏将为黑色...，网页从状态栏以下开始显示； 如果设置为 black-translucent，状态栏将为灰色半透明，网页将充满整个屏幕，状态栏会盖在网页之上； 该设置只在 iOS 上有效。...document.documentElement.style.position = 'fixed'; document.body.style.overflow = 'hidden'; //隐藏滚动条
" href="taobaoLogo.ico"> 在手机网页的制作上，我们一般是不让用户手动的去改变页面的大小的，所以下面的这一句是必须加上的 <meta name="viewport" content...因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获 取滚动条的值呢？...:1px; } 但是采用自适应布局会出现把屏幕撑开，从而出现横向滚动条的效果，这个是我们在手机网页中开发的大忌，所以这个时候box-sizing就解决了我们的问题，具体的文法详见http://www.w3school.com.cn...，但是在网页中确实比较常见的，原因是移动端的网页显示的比较小，相对来说比较简洁，但是这个效果却是极好的，自从有了这个特性以后，望门就可以将网页是的特定元素实现得更具立体感，完成以前的一些没有办法实现的效果...input:focus::-webkit-input-placeholder{ opacity: 0; } android局部滚动时隐藏原生滚动条 ::-webkit-scrollbar{
如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。...以下是历史原因： 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，...比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态...解决方案： fastclick可以解决在手机上点击事件的300ms延迟 zepto的touch模块，tap事件也是为了解决在click的延迟问题 触摸事件的响应顺序 1、ontouchstart 2、...19、如何禁止保存或拷贝图像（IOS） 通常当你在手机或者pad上长按图像 img ，会弹出选项 存储图像 或者 拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止： img {
在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊的样式...html标签的font-size值设置为10px，因为 16px X 62.5% = 10px，此时以后凡是html标签下的标签都可以使用rem，例如在html标签下有个p标签，要将p标签的高度设为50px...可以写成p {height: 5rem;}点击此处查看详细介绍 14....自定义滚动条的样式 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条... *解释：使用制作搜索框，当在手机上点击搜索框时会弹出一个软键盘，软键盘上的enter按钮会以搜索按钮的形式显示 27
（图左：电脑网页上的密码输入框 图右：手机APP上的密码输入框） 我们知道多数密码输入框有以下功能： a.默认隐藏密码 b.一键清除密码 c.切换显示隐藏密码 对比在电脑网页上和APP上的密码输入框...，可以推测：APP密码输入框的设计来源于互联网时代的网页设计，初代产品经理从网页过渡到APP的时候，并没有做出过多的改变。...我们可以从功能和使用场景上进行对比分析 从功能和使用场景上看，电脑网页上设计隐藏密码功能，是为了防止旁人观看。...而用户在手机上是进行触控输入，容易误触且输入不精准，当用户看不到密码时并不确定是否输入正确。可以说，在APP上注册登录时看不见密码是一个影响用户体验的功能。...用户不喜欢不确定性 --《结网》 此外，设计“一键清除”按钮，是为照顾隐藏了的密码，由于看不见密码，当用户输入错误时，只能全部擦除重新输入。而如果密码不被隐藏，那么一键清除密码的功能也可以相应去除。
iOS版微信隐藏着一个查看网页源代码的功能！ P.S.这个功能不是对所有人都有实用性。 然后设置出现后我也不知道怎么关掉它。 点击搜索微信号的输入框 ?...你就会进入到一个你从未进入过的隐藏页面，点击一下【JS调试功能】 ? 选第二项查看源码 ? 这样你就能在手机上查看网页的源码了，电脑不在身边的时候，或者装逼的时候还是很有用的 ?
在我们的开发生活中，相信很多人都会遇到形形色色的项目需求，比如更改浏览器的默认样式，在产品定下需求后给的网页设计图中我们最常遇到的是自定义滚动条的样式，或者当你想构建一个很有特色和创意的网页，那么也肯定希望自己能够去设置滚动条样式...结构布局分析 我们在开发项目中会时不时的碰到这种情况，当滚动块B超出了父级可视部分，我们总会设置overflow的属性值来隐藏超出的部分，根据默认的滚动条来操作隐藏区的内容，当将可视区A设置overflow...：auto时，网页会显示出默认的滚动条样式。...此时我们会发现，有些时候设计师给出的设计图滚动条的样式是不同的或者默认的滚动条样式会影响到我们对网页的整体感觉，所以我们需要隐藏默认滚动条，将可视区设置为overflow:hidden,自己去重新设置滚动条的样式...scrollTop值 sc.style.top = nowY + "px"; 这个时候，刷新下网页，就可以发现滚动条已经可以滚动了，同时也控制着内容区的滑动。
通过将一个不可见的iframe覆盖到当前网页上就可以劫持用户的触屏操作。由于手机屏幕范围有限，手机浏览器为了节省空间会把地址栏隐藏起来，因此在手机上的视觉欺骗更容易实施。...02触屏劫持技术原理1.桌面浏览器iOS中的safari浏览器可以将一个网页添加到桌面，当做一个独立的应用运行。添加后，主屏幕上会出现一个由网页缩略图生成的App图标。类似于快捷键方式。...2.隐藏URL地址栏为了不让用户发现点击按钮后跳转到了奇怪的url地址，我们需要进行视觉欺骗，最简单有效的就是隐藏URL地址栏，除了用全屏模式隐藏URL地址栏外，还可以使用以下代码实现URL地址栏的隐藏...图片通过将一个不可见的iframe覆盖到当前网页上就可以劫持用户的触屏操作。...RelativeLayout>相对布局，其中start按钮和premession按钮采用布局方法，将Start按钮覆盖在Premession按钮上，并设置start的透明度alpha为0
序 现在手机上的文本阅读app已经非常丰富，良好的阅读体验与海量的书库常常令我感到无比兴奋。 我想到8年前用一点几寸屏幕的mp3看电子书的情景，顿生一种淡淡的温馨。...本文以一个网页版阅读器作为案例，展示JavaScript中，对滚动条的一些处理，这是完成以后的样子： ?...js控制 我们通过jQuery的animate方法来实现回到顶部的动画，实现该功能的核心逻辑就是控制滚动条距离顶部的高度，也就是scrollTop，让它变为0就可以了。...123.gif 最后，我们还希望实现的一个效果就是，只有在滚动条往上拖动的时候，才把按钮显示出来，否则就隐藏该按钮。毕竟，我们在阅读的时候都不希望一直有个小图标吧。...然后设置按钮的透明度就行了，这时候，我们需要对滚动条进行监听，如果向上滚动就显示按钮，否则隐藏按钮，实现代码如下： var justScrollTop = 0; //记录上一次滚动条距离顶部的位置 /
=device-width,initial-scale=1,user-scalable=no"/> 移动端加上这个标签才是真正的自适应，不加的话，假如你把一个980px宽度(手机端常规是980)的PC网页...放在手机上显示，倒也能正常显示不出现滚动条，不过是移动设备对页面 做了缩小优化，所以字体等都相应缩小了 （980px是相对于手机像素的，我的是超过1000px多一些就出现滚动条了，这个没具体研究）。...我是当 focus时就把它设为 absolute，视情况而定，也有比如显示一个新的层，将含有 fixed按钮的那一层隐藏的情况等等。...){ audio.play(); }) 4.想要在 touchmove:function(e,参数一)加一个参数，结果直接使用 e.preventDefault()就会 e 报错，处理方法为... iframe， src为其他的网址等，当在微信浏览器打开时，如果 iframe里的页面过大，则 iframe的 src不能加载（具体多大不知道，只是遇到过）。
还记得小安之前跟大家说不用下载app，就可以直接在手机上运行的谷歌的黑科技吗？最近它小试牛刀，弄出了一款没有广告、信息流按照时间排列的渣浪微博PWA版。...从它的定位和形态上你可以先把它看作 Google 版小程序。不用下载app，就可以直接在手机上运行。...换种说法就是接近 APP 形态的网页，以微博 PWA 版为例，你想「获得这款 APP」，首先需要在 Android 手机上打开 Chrome、UC、360 浏览器、百度浏览器等，输入对应的网址，打开网页后登录上账号就可以刷微博了...在 Service Worker 和 Cache API 的帮助下，网页可以预先缓存一些内容。...网页与 APP 最大的区别之一是没有推送，网页因此也给用户留下了「用完即走」的印象。在 PWA 时代，这些都不存在了：就算你不打开网页，依然会收到推送的消息。
由于网页的执行都是单线程的，在JS执行的过程中，页面会呈现阻塞状态。因此，如果JS处理的数据量过大，过程复杂，可能会造成页面的卡顿。...有很多网站使用 无限分页 的模式，即网页视窗到达内容底部就自动加载下一部分的内容... 本篇就无限分页的实现模型，讲述其中奥妙。...因此，可能会出现两种情况： 1 当页面的内容很少，没有出现滚动条。 2 当页面的内容很多，出现了滚动条。...，上面隐藏的部分为0，视窗的高度是667（这个值是一直不变的），内容的高度为916 ?...当向下滚动了一下后，视窗的高度不变；上面隐藏的高度增加到100，即滚动条上面代表的部分。 ? 当触发加载后，视窗的高度保持变；上面隐藏的高度保持不变；文本的内容增加到1816； ?
有了它，即使完全不懂 CSS，也可以轻而易举做出美观的网页。 ? 我要感谢 100offer 对我提供赞助。...简单的网站，可以不用写任何 CSS 代码。 二、基本用法 Bulma 的安装只需一步，把样式表插入网页即可。...columns布局默认是在手机上垂直堆叠，其他宽度都是平铺。如果希望手机也保持平铺，可以加上is-mobile修饰类。...class=" column is-half-mobile is-one-third-tablet is-one-quarter-desktop "> 上面代码中，这个网格在手机上占据二分之一宽度...is-hidden-mobile：只在手机隐藏 is-hidden-tablet-only：只在平板隐藏 is-hidden-desktop-only ：只在桌面隐藏 is-hidden-touch：手机和平板隐藏
用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？...经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960*640分辨率，在网页里只显示了480320，这样...想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。...27、h5网站input 设置为type=number的问题 h5网页input 的type设置为number一般会产生三个问题，一个问题是maxlength属性不好用了。...none 可以解决 iOS 上的问题，但桌面版 Safari 的字体缩放功能会失效，因此最佳方案是将 text-size-adjust 为 100% 。
起因 最近使用bootstrap构建布局时，我发现不同页面container的x轴起始位置有些许不同，大概有几像素的变动，后来经过一个小时的排查发现不是代码书写问题，而是页面的滚动条也占用网页宽度，所以有滚动条的页面和没有滚动条的页面...解决方法 本来没想去解决，我觉得只要网站内容填充起来就都有滚动条了，就没有去管！...margin-right: calc(-1 * (100vw - 100%)); overflow-x: hidden; } 100vw是浏览器的宽度，100%时页面的宽度，所以100vw - 100%就是滚动条的宽度...，没有滚动条的页面这样计算完是0，然后利用margin可以为负值，让右边距为负值的滚动条宽度，这样有滚动条的页面就与没有滚动条的页面宽度一致了。...最后隐藏下x轴的滚动条就完美了！兼容的话应该时IE9起步！ linkCard('.post-content','0');
属性值 描述 visible 不剪切内容也不添加滚动条 hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll 不管超出内容否，总是显示滚动条 auto 超出自动显示滚动条，不超出不显示滚动条...实际开发场景： 清除浮动 隐藏超出内容，隐藏掉, 不允许内容超过父盒子。...1.4 显示与隐藏总结 属性 区别 用途 display 隐藏对象，不保留位置 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛 visibility 隐藏对象，保留位置...图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。...我们用css 边框可以模拟三角效果 宽度高度为0 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了 为了照顾兼容性 低版本的浏览器，加上 font-size
通过将一个不可见的 iframe 覆盖到当前网页上就可以劫持用户的触屏操作。由于手机屏幕范围有限，手机浏览器为了节省空间把地址栏隐藏起来，因此在手机上的视觉欺骗更容易实施。...1.目标网页隐藏技术目标网页隐藏技术原理是攻击者在恶意网站上通过 iframe 载入目标网页，然并隐藏目标网页，欺骗用户点击隐藏的恶意链接。...目前主要的网页隐藏技术有两种：CSS隐藏技术和双iframe隐藏技术。CSS 隐藏技术的原理是利用 CSS 技术控制网页内容显示的效果。...其中opacity参数表示元素的透明度，取值范围为0~1，默认值为1表示不透明， 取值为0时元素在网页中完全透明显示。...所以这里用个很骚的操作：按下F12,滑动滚动条至按钮的上边框与浏览器边框大致重合，在控制台输入这个函数document.documentElement.scrollTop，这个函数的大致意思就是获取你的滚动条滚动了多长
属性值 描述 visible 不剪切内容也不添加滚动条 hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll 不管超出内容否，总是显示滚动条 auto 超出自动显示滚动条，不超出不显示滚动条...实际开发场景： 清除浮动 隐藏超出内容，隐藏掉, 不允许内容超过父盒子。...1.4 显示与隐藏总结 属性 区别 用途 display 隐藏对象，不保留位置 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛 visibility 隐藏对象，保留位置...CSS精灵技术（sprite) 重点 5.1 为什么需要精灵技术 图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。...滑动门 先来体会下现实中的滑动门,或者你可以叫做推拉门： 滑动门出现的背景 制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多
有了它，即使完全不懂 CSS，也可以轻而易举做出美观的网页。 我要感谢 100offer 对我提供赞助。...简单的网站，可以不用写任何 CSS 代码。 二、基本用法 Bulma 的安装只需一步，把样式表插入网页即可。...columns布局默认是在手机上垂直堆叠，其他宽度都是平铺。如果希望手机也保持平铺，可以加上is-mobile修饰类。...class=" column is-half-mobile is-one-third-tablet is-one-quarter-desktop "> 上面代码中，这个网格在手机上占据二分之一宽度...is-hidden-mobile：只在手机隐藏 is-hidden-tablet-only：只在平板隐藏 is-hidden-desktop-only ：只在桌面隐藏 is-hidden-touch
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
