文章分类 - Html5+CSS3
摘要：在做数据可视化大屏之前，我们需要考虑到页面的布局问题以及页面缩放自适应问题，下面分别就这两个方面讲解。 页面布局 类似这种页面区块的明显划分，常用的布局方式有两种： 1、grid布局 2、flex布局 一、grid布局 grid布局可以按区块来划分页面布局，并且可以在划分布局的基础上配置区块在页面的
阅读全文
摘要：http://blog.suntemple.cn/guide/js/ http://blog.suntemple.cn/guide/js/%E9%A1%B5%E9%9D%A2%E6%BB%9A%E5%8A%A8%E5%8A%A8%E7%94%BB.html
阅读全文
摘要：官网：https://michalsnik.github.io/aos/ 使用方法： <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> <script src="https://unpkg.com/aos@
阅读全文
摘要：html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>浏览器扫
阅读全文
摘要：CSS渐变背景色是一种流行的网页设计技巧，它可以使网页元素的外观更加丰富和吸引人。渐变可以是线性的、径向的，甚至可以是复杂的多色渐变。本文将介绍如何使用CSS创建各种渐变背景色，并提供示例代码和效果展示。 线性渐变 线性渐变沿着一条直线从一种颜色过渡到另一种颜色。使用linear-gradient函
阅读全文
摘要：/* CSS */::-webkit-scrollbar { width: 8px; /* 控制滚动条宽度 */} ::-webkit-scrollbar-track { background-color: #f5f5f5; /* 控制滚动条背景色 */} ::-webkit-scrollbar-t
阅读全文
摘要：使用方式：css定义变量的方式是** 通过给一个属性加上-- **然后他就成为了一个css属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" cont
阅读全文
摘要：首先，我们得知道1vh它表示的是当前屏幕可见高度的1/100，而1%它表示的是父元素长或者宽的1%（可以这么理解？） 1、对于设置height:100%;有下面几种情况： （1）当父元素固定高度，子元素设置height:100%;时 <style> #father1 { width: 300px;
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi
阅读全文
摘要：1.利用float+margin实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
阅读全文
摘要：最后一个li不加边框 ul .li:not(:last-child)::after { position: absolute; box-sizing: border-box; content: ' '; pointer-events: none; right: 0; bottom: 0; left:
阅读全文
摘要：问题： 用canvas绘制图片的时候会模糊，但是用img显示的时候就不会，canvas和img的大小是相同的 至于为什么会变模糊，这和浏览器处理 canvas 的方式有关，相关的文章可以参考这篇 High DPI Canvas，这里不作深入介绍。 https://www.npmjs.com/pack
阅读全文
摘要：一、背景：因为之前同事用java后端生成海报，导致海报加载缓慢，所以把它放到前端来拼接 二、菜鸟教程：https://www.runoob.com/html/html5-canvas.html 三、准备好需要的材料（图片） html <!-- html中添加 --> <canvas id="myCa
阅读全文
摘要：移动设备的屏幕有两个方向： landscape（横屏）和portrait（竖屏），在某些情况下需要获取设备的屏幕方向和监听屏幕方向的变化，因此可以使用Javascript提供的 MediaQueryList 对象接口，使用方法如下： 获取当前屏幕方向（是否是竖屏状态） var mql = windo
阅读全文
摘要：摘要 最近在开发H5，就在开发过程中发现H5存在着一些坑，所以就总结一下在开发过程中遇到的坑以及解决办法，本文会持续的更新，同时也欢迎大家一起评论分享H5开发中遇到的坑、解决办法等。 常见的通用的H5开发问题 IOS端-H5开发问题 · 输入法隐藏页面留白 问题现象：iOS端软键盘失去焦点（隐藏）后
阅读全文
摘要：isSupportCss3方法的定义： var isSupportCss3 = (function(){ var ret = /MSIE (\d+\.\d+)/.exec(navigator.userAgent); if( !ret || ret[1] > 9 ){ return true; } r
阅读全文
摘要：当做页面的时候（设计稿的尺寸是1920px），可是经常会发现，当在小屏幕下浏览的时候，头部内容显示不全。 方法1：如果图片做图片的形式，使用<img>标签来插入到页面中，img{ width:100%;}，可以轻松实现图片跟随屏幕的大小来缩放.但是当在较大屏幕（width>1920px）的电脑屏幕下
阅读全文
摘要：如何实现图片和两行文字在一行显示 Lorem ipsum dolor sit amet consectetur adipisicing.Lorem ipsum dolor sit amet consectetur adipisicing.Lorem ipsum dolor s...
阅读全文
