海滨擎蟹

图片和单行文字对齐比较简单，在图片和文字（行内元素）上加 vertical-align: middle;。图片与多行文字对齐的解决方法，就是将多行包装成单行，单行内再用 <br/> 进行换行。以下我调试过的一个版本：<style> img { vertical-align: middle; } p { display: inline-block; v

- 阅读全文 -

给公司网站做了新页面，然后手就闲不住的这边点点，那边点点。发现图片总是被拖着走，就好烦。想着有没有可以禁止图片被拖拽的方法，然后找到了一个比较简便的方法：<img src="xxx" alt="xxx" draggable="false"/>给需要禁止拖动的图片添加拖动属性，设置值为 false 即可。如果是对整个页面上的图片

- 阅读全文 -

需求说明需要在鼠标悬停（hover）在一个元素上时，显示隐藏的 div。使用场景：PC 端 hover 一个按钮，展示隐藏的二维码，如微信公众号，App 下载等。实现过程当然可以直接用 jQuery 的 hover() 事件，直接绑定或者使用 onmouseover 和 onmouseout 绑定回调函数。然后在回调函数中隐藏或显示目标元素。CSS 也有这样一种用法，a:hover b {}，但我

- 阅读全文 -

问题说明input 标签中的 reset 按钮有重置表单的效果，比如，将 text、password textarea 用户输入的内容清空，将单选、多选等恢复默认选择状态等。一般的表单提交不会用到 reset 按钮，要么提交，要么取消。最近有一需求，需要表单中存在重置按钮。但点击 reset 按钮，表单并没有被重置。原因分析网上找到了 reset 不能清空的原因：reset 重置是将表单中的元素标

- 阅读全文 -

问题描述页面添加一个返回顶部的按钮（fixed），并监控窗口的 scroll 滚动事件。当 scrollTop（滚动条距离顶部的距离，及文档滚动距离）在一定范围内（比如视窗高度）隐藏返回顶部按钮；当 scrollTop 超过一定高度，则显示返回顶部按钮。具体 demo<div id="back-to-top"> <img src="./ima

- 阅读全文 -

之前做过一些案例，将 div 展示到文档的中间，一般会考虑用 margin: 0 auto; 或者 text-align: center;。如何将一个 div 绝对定位到页面正中间呢？这个功能需求主要应用在一些弹框或者提示信息展示上。网络上找到一个合适的（也是用 margin 来实现）：.fixed-div { width: 300px; height: 150px; bo

- 阅读全文 -

IOS 让人很郁闷的一点就是，经常会出现样式不一致的情况。一开始没怎么注意，后来修改登录、注册页面发现，新写的按钮样式什么的都变了，本来是浅蓝色，变成了类似 #467B96 的浅绿色，橙黄色变的蜡黄色，莫名其妙。今天发现新写的页面也是这样色的，突然就忍不了，百度找了一下对策。解决方法：input,select,button{ -webkit-appearance:none; appeara

- 阅读全文 -

更新内容有网友说是微信内置浏览器的问题，而并非系统之过。用我自己的 IOS 13.6 系统版本的苹果手机测试了一下，并不准确。浏览器自动填充次数 微信内置浏览器2 Safari1 QQ 浏览器2 搜狗浏览器2 Chrome2 另外，由于获取验证码页面在授权登录（这里用的 QQ 授权）之后，UC 和 夸克因为众所周知的原因，无法调起 QQ 授权登录，测试不了；Firefox（火狐）调起后，返回参数错

- 阅读全文 -

兼容性placeholder 属性是 css3 中新增加的属性，IE9 和 Opera12 以下版本的 CSS 选择器均不支持占位文本。修改 placeholder 默认的字体、颜色和大小方式 1：因为每个浏览器的 CSS 选择器都有所差异，所以需要针对每个浏览器做单独的设定(可以在冒号前面写 input 和 textarea)。::-webkit-input-placeholder { /* W

- 阅读全文 -

swiper 作为一滑动插件非常好用，但 swiper 存在一些限制。比如我这次遇到的 swiper 内部元素显示受到 .swiper-container 样式 overflow:hidden 限制，具体例子就是提示框。当用户 hover 到某个元素上，需要展示出提示框。但因为 overflow:hidden 的限制，超出外部 div 层的部分都被隐藏了。swiper 使用方法我使用的版本是 sw

- 阅读全文 -