海是最蓝的天-优快云博客

原创文案生成小程序

如果您有任何建议或反馈，请写下您的想法。我们将不断改进和完善我们的产品和服务，以满足您的需求。一个文案生成类的小程序，欢迎使用，完全免费。后续会持续更新，供大家免费使用。可以微信搜索“语录锦集”。

2024-01-18 16:36:14 547 1

原创纯css画三角形

1.向上三角形<div class="triangle1"></div>.triangle1{ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid #000; border-right: 50px solid transparent; ...

2019-06-27 20:21:12 212

原创 web高效编程与优化实践

HTML/CSS优化1. 能用HTML/CSS解决的问题就不要用JS(1). 导航高亮使用hover选择器(2). 鼠标悬浮时显示使用hover选择器以及相邻选择器(3). 自定义radio/checkbox的样式(4). 需要根据个数显示不同样式使用:nth-of-type,nth-first-child,nth-last-child等等(5). 巧用CSS3伪类如:fo...

2019-06-25 14:02:03 498

原创使用echo.js实现图片懒加载

页面代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewp...

2019-04-03 17:30:31 875

原创 js实现时间与时间戳的转换

1.时间戳转换成时间var dd = new Date();var u= new Date().getTime(); //第一种方式得到时间戳var u= (new Date()).valueOf();//第二种方式得到时间戳var u= Number(new Date());//第三种方式得到时间戳var y = dd.getFullYear(); //获取当前年份var m = ...

2019-04-01 20:56:02 3703

原创 css世界笔记以及css面试题

1.object-fit属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框正常video标签定义width:100%是有效的;但在IE低版本浏览器下是不生效的需定义object-fit:fill;2.filter(滤镜) 属性修改所有图片的颜色为黑白 (100% 灰度):img { -webkit-filter: grayscale(100%); /* C...

2019-03-20 19:52:18 229

原创 vscode配置autoprefixer 自动补全css兼容性代码

遇到的问题：vscode安装完autoprefixer之后，在css文件中不生效怎么办?这种情况需要自己手动设置1.点击vscode的文件，进入首选项下面的设置里2.搜索autoprefixer 进入settings.json中3.输入： "autoprefixer.browsers": [ // "last 9 versions", "ie &gt...

2019-02-28 21:14:33 11718 3

原创移动端开发安卓和ios兼容性的那些坑以及解决方案

问题1：移动端项目要求是全屏滚动，用的是 fullpage，上下滚动时安卓正常，苹果手机浏览器上下滚动时会出现底色问题解决方案： document.body.addEventListener('touchmove', function (e) { e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果) }, {passive: false...

2019-02-28 20:52:31 5014 1

原创移动端适配方案

rem.js (function(){ var html = document.getElementsByTagName('html')[0]; var width = window.innerWidth; var fontSize = 100/640*width; html.style.fontSize = fontSize +...

2019-02-18 20:07:58 158

原创移动端点击事件的延迟处理

问题：移动端页面点击会有300毫秒的延迟,也就是说js在执行click事件的时候，需要300毫秒之后才会生效解决方案静止缩放（完全禁用缩放来达到目的,但是在部分苹果机上还是有延迟） <meta name="viewport" content="width=device-width user-scalable= 'no'"> 使用zepto中封装好的Tap事件，但是会出现点透...

2019-02-18 20:05:58 682

原创 css限制文字行数

/*限制一行*/white-space: nowrap;overflow: hidden;text-overflow: ellipsis;(超出用...显示)/*限制多行*/overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;(行数)-webkit-box-or...

2019-02-16 23:46:41 4245

原创微信小程序 swiepr定制tab栏切换效果

直接先看效果图<view class="flex-row"> <view class="{{currentTab==0 ?'flex-view-item1':'flex-view-item'}}" bindtap='tap0'>首页</view> <view class="{{currentTab==1 ?'flex-view-item1'...

2019-02-16 22:42:00 324

原创微信小程序自定义swiper的底部指示点

<view> <swiper indicator-dots="true" autoplay="true" interval="3000" duration="1000"> <block wx:for="{{imgUrls}}"> <swiper-item> <

2019-02-15 16:13:33 4791

原创微信小程序组件scroll-view实现横向滚动和垂直滚动

1.横向滚动给scroll-view标签设置 scroll-x="true"属性，scroll-view 才可以实现水平滚动，默认 scroll-x=“false”。同时还要设置两个重要的属性：1).必须给scroll-view标签添加white-space:nowrap属性2).给子元素添加display:inline-block属性<view>横向滚动</view&g...

2019-02-15 15:27:50 3307

海是最蓝的天的博客