随笔分类 - CSS3
摘要：1. 设置不同颜色的 border <div class="block"></div> .block { display: inline-block; height: 0; width: 0; border-top: 50px solid yellowgreen; border-bottom: 50
阅读全文
摘要：如图： 代码： index.html <span className={styles.voice}> <i className={styles.first} /> <i className={styles.second} /> <i className={styles.three} /> <i cl
阅读全文
摘要：1. 选择需要的图标，添加到购物车 2. 打开购物车，添加至我的项目 3. 打开项目列表 更多操作 编辑项目 修改FontClass/Symbol前缀，自定义一个名称，例如：v icon custom 4. 点击下载至本地，解压文件后 将里面各个文件(除去demo_index.html和demo.c
阅读全文
摘要：通常在页面中，需要使页脚 footer 部分始终处于底部。当页面高度不够 100% 时， footer 处于页面最底部，当页面内容高于 100% 时，页脚元素可以被撑到最底部。 方法一：绝对定位 方法二: flex 布局
阅读全文
摘要：CSS calc() 函数 calc() 函数用于动态计算长度值。 注意，运算符前后都需要保留一个空格，例如：width: calc(100% 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 "+", " ", " ", "/" 运算； calc()函数使用标准的
阅读全文
摘要：当首页内容或图片比较多时，加载时间会比较长，此时可能出现页面白屏的情况，用户体验较差。所以，在页面完全加载出来之前，可以考虑加入loading效果，当页面完全加载完后，是loading消失即可。 1. 方法 html: 在页面开头部分加入： js: 在页面最后面引入： css: 2. 效果如图： 3
阅读全文
摘要：移动端项目中，在滚动的时候，会报出以下提示： 解决 1. 在 的事件监听方法上绑定第三个参数 ， 通过传递 passive 为 false 来明确告诉浏览器：事件处理程序调用 preventDefault 来阻止默认滑动行为。 2. 在 CSS 中全局使用： 的使用方法见：https://devel
阅读全文
摘要：1. 纵向滚动 scroll y 当 设置为scroll y 时, 需要将其高度设为固定值 如果整个页面，即最外层标签为scroll view，需要并将其高度设为100%，也需要将page设为100%（可在app.wxss中设置）。 示例： html 文件： css 文件： bindscrollto
阅读全文
摘要：clip 属性 用于剪裁绝对定位元素。 scroll behavior: smooth; 作用在容器元素上，可以让容器（非鼠标手势触发）的滚动变得平滑。利用这个css属性可以一步将原来纯css标签直接切换，变成平滑过渡切换效果。 代码：
阅读全文
摘要：在提交 from 表单时，下面的 input 无法正常提交给后台， 发现，如果input的字段设为disabled，该表单是无法提交的。 解决方法 1. 将表单中字段 disabled 用 readonly 代替即可（如有需要，可以对该表单加上灰色的背景色） 2. 可以在写一个隐藏属性，一个用于传值
阅读全文
摘要：原生 JavaScript 和 jQuery 获取屏幕视口宽度及元素尺寸的方法： 屏幕视口宽度 滚动条滚动的距离 获取浏览器窗口顶部与文档顶部之间的距离，即滚动条滚动的距离 获取元素尺寸 但是，如果像上面使用原生style.xxx方法获取属性，这个元素必须已经有内嵌的样式，即``； 如果原先是通过外
阅读全文
摘要：表单中，经常会使用到单选按钮和复选框，但是，input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或者手机上，显示的效果总是不统一，而且难以修改器样式。 input[type="radio"] 样式定制 代码： css 样式 效果如图： i
阅读全文
摘要：可以使用 pointer events 来阻止元素成为鼠标事件的 target。html5 新增操作元素 class 类名的方式 classList。 classList 方法 add(value)：在元素中添加一个或多个类名。如果值已经存在，就不添加了。 contains(value): 返回布尔
阅读全文
摘要：vertical align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。 inline block的默认对齐方式是vertical blo
阅读全文
摘要：参考 Element 官网，利用 js / jq 和 css3， 实现某图片随着鼠标移动呈现的视差效果。 <!DOCTYPE html banner 跟随鼠标呈现视差效果 { transition: all .3s; } .perspective { perspective: 800px; } .p
阅读全文
摘要："原文地址：https://caochangkui.github.io/mobile/" 最近开发移动端项目，发现，与PC端项目开发遇到的浏览器兼容性问题相比，移动端还有更多的坑的。这里将遇到一些问题，做出总结。 <! more 页面自适应 各种手机型号，尺寸大小不一，有的屏幕320px宽，有的屏幕
阅读全文
摘要：表单中，经常会使用到单选按钮和复选框，但是，input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或者手机上，显示的效果总是不统一，而且难以修改器样式。 input[type="radio"] 样式定制 代码： css 样式 效果如图： i
阅读全文
摘要：对于不同的移动设备，其物理像素与逻辑像素间存在不同的比例关系。所以我们仅仅在CSS中为border设置1px时，在手机上看起来会显得比较粗，达不到预期效果。 关于物理像素与逻辑像素 物理像素 移动设备出厂时，不同设备自带的不同像素，也称硬件像素； 逻辑像素 即css中记录的像素。 物理像素与逻辑像素
阅读全文
摘要：Flexbox，是一种CSS3的布局模式，也叫做弹性盒子模型，用来为盒装模型提供最大的灵活性。
阅读全文
摘要：Vue.js 2.0实战项目 基于Vue + Vuex + Vue router + Webpack 2.0 打造移动端音乐WebAPP，实现了轮播图、音乐推荐、歌手列表、音乐搜索、注册等功能。 技术栈 MVVM框架：Vue.js 2.0 状态管理：Vuex 前端路由：Vue router 数据交互
阅读全文
