随笔分类 - HTML&CSS
超文本标记语言(HyperText Markup Language) & 层叠样式表(Cascading Style Sheets)
摘要：先看下兼容性： 可以看到 @supports 兼容性很好，所以使用 @supports 做兼容是个不错的选择。 例： @supports (padding-bottom: env(safe-area-inset-bottom)) or (padding-bottom: constant(safe-a
阅读全文
摘要：首先，在拖动 div 时，判断当前容器 div 是否有滚动条，如果没有，则禁止整个 div 拖动，例： const list_dom: any = document.querySelector(".list"); list_dom.addEventListener("touchmove",(ev)
阅读全文
摘要：移动端分页列表，在ios上滚动加载分页时候，使用scrollTop，会引起白屏问题。 看不少文章说是使用了-webkit-overflow-scrolling: touch;引起的硬件加速问题。亲测删除问题仍然存在。 this.$nextTick(() => { window.scrollTo(0,
阅读全文
摘要：之所以100vh在移动端出现问题，原因大致如上图，真搞不懂，为什么总是有反人类的设计出现。 经过多方参考，实测有效的方案如下： <style> :root { --vh: 1vh; } </style> <script> !(function (n, e) { function setViewHei
阅读全文
摘要：示例项目地址: https://github.com/skillnull/lottie-web-caption-animation 首先是安装AE，具体怎么安装就不赘述了，随便一搜就有很多教程。 安装完AE以后，装一个AE的插件bodymovin, github地址为: https://github
阅读全文
摘要：<template> <audio src="./static/music.mp3" id="bgMusic" preload="auto" loop></audio> <div class="bgMusicBtn" @click="bgMusicPlayOrPause('bgMusic')"> <
阅读全文
摘要：周知，表格的斑马条纹只需简单的运用伪类 :nth-child()/:nth-of-type()来处理就好了： tr:nth-child(even){ background-color: rgba(0,0,0,.2); } 但是把这种效果运用在文本行的时候就有点力不从心了，尽管js可以实现这种功能，但
阅读全文
摘要：以前写毛玻璃用的都是图层覆盖-->传送门，看了 LEA VEROU 的《CSS揭秘》后才发现还有更优雅的毛玻璃：
阅读全文
摘要：做一个登录页，全屏背景图毛玻璃效果，实现方法如下： HTML： <body> <div class="login-wrap"> <div class="login-mask"></div> <div class="login-box"></div> </div> <script> var w = w
阅读全文
摘要：微信开发的时候，如果页面顶部有轮播图，底部有导航栏，中间是栏目，那么让中间的栏目，如何根据设备的高度，来进行自适应的填充呢？ 首先想到的是运用媒体查询，但是媒体查询效果差，效率低，所以就运用jQuery写法来进行实现。 效果图： 首先知道顶部的轮播图的固定高度是200px，底部的导航栏固定高度是50
阅读全文
摘要：textarea { width: 100%; border: none; outline: none; resize: none; overflow: hidden; padding-bottom: 100%; background-color: inherit;} <textarea reado
阅读全文
摘要：::-webkit-scrollbar { // 滚动条整体部分 width: 6px; height: 8px; } ::-webkit-scrollbar-track { // 外层轨道 background-color: #eee; border-radius: 4px; } ::-webki
阅读全文
摘要：为网站的图片加上加载失败的默认占位符会让网站看起来更专业、更严谨。 <img src="__PUBLIC__/img/simple/simplelove.png" onerror="onerror=null;src='__PUBLIC__/img/defaultpic.jpg'"> 如果图片加载失败
阅读全文
摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge"> <style> .choose { margin: .5em 0; b
阅读全文
摘要：textarea::-webkit-input-placeholder{ padding: 1em; } textarea::-moz-placeholder{ padding: 1em; } 同理，input的定义方法为： input::-webkit-input-placeholder{ pad
阅读全文
摘要：先上效果： HTML: <div class="tag"> <div class="tag-box"> <div class="tag-content-box"> <div class="tag-content"> <span class="tag-content-line"></span> <sp
阅读全文
摘要：HTML： <div class="top"> <ul> <li class="finish">步骤一<span class="end"><em class="pre"></em><em class="nex"></em></span></li> <li>步骤二<span class="end"><
阅读全文
摘要：animatron
阅读全文
