css
yzy_blog
这个作者很懒,什么都没留下…
展开
-
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
最近写小程序时,遇到了 iPhoneX 底部小黑线与内容重叠的问题,实际上是iPhoneX安全区域的适配问题,了解清楚这个问题花了挺多时间的,也实操出了结果,忍不住来总结总结。本文目录前言 · 内容与小黑线重叠情况说明1.安全区域含义2.微信小程序适配iPhoneX底部小黑条(Home Indicator) (1)适配方案一:使用已知底部小黑条高度34p...转载 2020-03-31 09:57:16 · 5700 阅读 · 1 评论 -
微信小程序中引入字体图标(阿里iconfont)
引言这篇博客算是转载的一篇文章,我在写一遍方便熟悉具体流程和方法。支持原博客作者,点击以下链接:微信小程序使用字体图标————————–更新一下—————————————————–最近发现阿里icon font官网中不可以直接在库中下载代码了,这里说一下,从哪里下载代码。将选好的图标加入库中,然后在库中点击 <添加至项目>如果没有项目,新建一个项目就好了然后在你的项...转载 2019-10-28 18:07:19 · 316 阅读 · 0 评论 -
使用渐变,一个div实现进度条
<style> div{ --c: #0ff; --p: 60%; height: 20px; background-color: silver; border-radius: 30px; background-image: radial-gradient(closest-side...原创 2019-08-14 17:55:23 · 384 阅读 · 0 评论 -
修复 iPhone X H5 底部安全区域定位按钮下内容穿透 BUG
版权声明:本文为 FengCms FungLeo 原创文章,允许转载,但转载必须注明出处并附带首发链接 https://blog.csdn.net/FungLeo/article/details/80915256修复 iPhone X H5 底部安全区域定位按钮下内容穿透 BUG今日,开发了一个 h5 项目,其中有部分页面使用了底部按钮,采用的是相对于浏览器窗口定位的样式制作的。...转载 2018-09-11 10:57:27 · 1444 阅读 · 0 评论 -
loading加载
页面加载时需要加载,请求接口也需要loading。在前端loading的需求无处不在,就是为了让用户体验更好。做loading的方式也有很多:下面我处理loading的用一张小的png图,yong .wgui-message{ position: fixed; top: 50%; left: 50%; z-index: 11010; ...原创 2018-06-27 17:12:56 · 18430 阅读 · 0 评论 -
背景固定的效果fixed
- background-attachment:fixed兼容写法:.active_main::before { content: ' '; position: fixed; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; background: url(../img/qmsd_bg.jpg) no-repeat 0 top #...原创 2018-06-27 10:01:03 · 1722 阅读 · 0 评论 -
提示弹窗的封装
function showTip(tip, delay, position_top) { tip = tip || '出错,请检查'; position_top = position_top ? position_top : '50px'; position_top = (position_top.index...原创 2018-05-16 13:30:47 · 635 阅读 · 0 评论 -
css实现响应式正方形或固定宽高比
html<div class="square"> <div class="content"> Hello! </div></div>css .square { position: relative; width: 50%;.square { position: relative; ...原创 2018-05-21 16:08:56 · 1211 阅读 · 0 评论 -
HTML/CSS/JS编码规范
HTML/CSS/JS编码规范文章是来自掘金的一篇文章。觉得写得很好,很详细。记录一下。目录:一、HTML编码规范二、CSS编码规范三、JS编码规范一、HTML编码规范1. img标签要写alt属性根据W3C标准,img标签要写alt属性,如果没有就写一个空的。但是一般要写一个有内容的,根据图片想要表达的意思,因为alt是在图片无法加载时显示的文字。如下不太好的写法:<img src="co...转载 2018-04-23 16:08:52 · 718 阅读 · 0 评论 -
不一样的方式实现text-decoration: underline;
你们有没有遇到过这样的需求呢???用text-decoration: underline;实现的是这样的,这样产品是不接受的。解决方法,利用背景图可以实现的。如下:背景图 代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css下划线&a原创 2018-03-29 14:25:11 · 1092 阅读 · 0 评论 -
美化type="radio"的样式
效果如上图。代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>radio</title> <meta name="viewport" content="width=d原创 2018-03-28 11:44:27 · 1712 阅读 · 0 评论 -
css面试题
1 介绍一下w3c标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin低版本IE盒子模型:宽度=内容宽度(content+border+padding)+ margin2 box-sizing属性?用来控制元素的盒子模型的解析模式,默认为content-boxcontext-box:W3C...转载 2018-03-19 15:56:23 · 231 阅读 · 0 评论