HTML
关注
分享
扫一扫
CaseyWei
感激每个遇见的人
展开
-
(转)css实现盒子高度随宽度等比例缩放的四种方式
前提：先去下margin,padding,方便看效果*{ margin:0; padding:0}方法一：定位css.container { background-color: silver; width: 100%; position: relative; display: inline-block;}.dummy { margin-top: 100%;}.content { position: absolut...原创 2024-03-15 15:23:32 · 1118 阅读 · 0 评论 -
关于OWL-carousel插件在ajax调用后需要重新实例化问题(页面无轮播效果)
维护公司老项目，发现问题，记录一下~原创 2023-10-13 14:35:19 · 2870 阅读 · 0 评论 -
echarts饼图只显示数据为前五的标签提示
数据展示模块，饼图展示数据过多，标签提示遮挡，优化记录一下 ~原创 2023-04-26 11:26:55 · 1942 阅读 · 0 评论 -
Vue获取URL图片的宽高
Vue获取URL图片的宽高原创 2023-01-30 15:21:30 · 1925 阅读 · 0 评论 -
html5实现移动端抢红包雨
html5实现移动端抢红包雨原创 2022-07-29 15:12:47 · 1333 阅读 · 0 评论 -
JS——事件代理和应用场景
click，mousedown，mouseup，keydown，keyup，keypress从上面应用场景中，我们就可以看到使用事件委托存在两大优点减少整个页面所需的内存，提升整体性能动态绑定，减少重复工作focus、blur这些事件没有事件冒泡机制，所以无法进行委托绑定事件mousemove、mouseout这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗高，因此也是不适合于事件委托的https。......原创 2022-07-21 17:19:55 · 342 阅读 · 1 评论 -
（转）css怎么一个DIV盒子同时插多张张背景图片
在使用多个背景图时，首先把background-image属性的值用逗号隔开，列出需要用的图像；然后用background-repeat定义重复属性；最后用background-position定义每张小图的位置即可。在使用多个背景图时，只需把 background-image 属性的值用逗号隔开，列出想用的图像，然后用 background-repeat 定义重复属性，最后用 background-position 定义每张小图的位置。HTML代码：<div></div.原创 2022-04-16 08:31:51 · 7102 阅读 · 0 评论 -
（转）点击按钮向左侧滑动效果（Drawer 抽屉）
平时都是使用ui组件库里的轮子实现动效，古老项目需要原生实现一下，记录一下。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>向左侧滑动效果</title><script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>&..原创 2022-04-01 10:48:02 · 1662 阅读 · 0 评论 -
fixed定位——定宽高盒子垂直水平居中
1.通过transform实现：<style type="text/css"> .center { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }</style>2.通过设置margin实现：<style type="text/css"> .center {原创 2022-03-25 16:28:00 · 1149 阅读 · 0 评论 -
（转）H5的pushState与replaceState的用法
一、简介HTML5引入了history.pushState()和history.replaceState()方法，它们分别可以添加和修改历史记录条目。这些方法通常与window.onpopstate配合使用。二、pushState() 方法的例子假设在 http://mozilla.org/foo.html 中执行了以下 JavaScript 代码:var stateObj = { foo: "bar" };history.pushState(stateObj, "page 2...原创 2021-12-31 11:16:59 · 2203 阅读 · 0 评论 -
移动端rem适配方案
适配方案有很多，rem方案使用了很久了，一直没有记录，今天记录一下。原理：通过根据屏幕尺寸，成比例改变html的font-size实现适配。优化：1.大家好多使用媒体查询改变html的font-size比较死板，遇到一些屏幕不能完美的适配有一点偏差，通过获取设备屏幕尺寸，精准计算，精准适配。2.平时UI以iphone6为尺寸出设计稿，通过下边方案，1rem即代表设计稿的10px，便于计算编写页面。代码：//动态为根元素设置字体大小function init () ...原创 2021-12-22 15:56:37 · 583 阅读 · 0 评论 -
jquery实现下拉加载更多
实现思路：只要滚动条拉到的某个位置距离底部距离大于边框的高度立即加载新数据。代码如下：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>滚动加载更多</title> <style type="text/css"> body,div{ margin:0;原创 2021-08-19 17:55:43 · 1768 阅读 · 1 评论 -
通过cookie控制首页弹框一天只显示一次
具体代码如下：<div id='mask' style="display: none">mask</div> <Script> function setCookie(name, value, expire) { window.document.cookie = name + "=" + escape(value) + ((expire == null) ? "" : (";原创 2021-08-19 17:35:06 · 630 阅读 · 6 评论 -
CSS实现抽奖大转盘
1.转盘效果：2.代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>幸运大转盘</title> <style> * { /* 重置默认样式 */ margin: 0; padding: 0; border: none; outlin..原创 2021-08-05 15:01:26 · 1620 阅读 · 1 评论 -
css自定义弹出框（不使用任何框架样式）
1.效果图如下：该效果完全手写css，不引用外部框架css2.html代码：<!-- 底部透明灰色层 --><div class='mask' style="position:fixed;top:0;left:0;z-index:998;width:100%;height:100%;display:none;background-color:#000;opacity:0.5;overflow:hidden;"></div><!-- 提示层 -.原创 2021-08-05 14:52:43 · 1060 阅读 · 0 评论 -
vue——项目打包之后background-image引用都用相对路径（../../）图片无法显示404的解决办法
问题：项目中图片都放在src/img文件夹，img和background-image引用都用相对路径，即../../这种形式在打包build的设置路径assetsPublicPath: ‘./‘，然后那些没有转成base64的背景图都失效了，图片都404了。比如：<div :style="{background-image:'url('assets/img/common/bg.png')'}"></div><span :style="{background-原创 2021-04-25 18:38:05 · 2306 阅读 · 0 评论 -
（转） ＜script＞ 标签以及其加载顺序问题，包含 defer & async
谈谈<script>标签加载顺序的问题这篇文章比较长，如果你耐心读完了，我会感谢你愿意在这篇文章上花费时间，也希望你有收获。其实说起<script>，几乎搞前端的都知道他的作用：引入JavaScrit代码。没错，这就是<script>被创建的最初原因。<script>标签出现的很早，这个元素是由 Netscape 创造，并在 Netscape Navigator 2中首先实现。后来，这个元素被加入到正式的 HTML 规范中。JavaScri...原创 2020-08-28 09:44:56 · 569 阅读 · 0 评论 -
（转）vue——图片懒加载v-lazy
vue v-lazy官方API：https://www.npmjs.com/package/vue-lazyload1.安装插件npm install vue-lazyload --save-dev2.在入口文件main.js中引入并使用import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload, { loading: require('img/loading.png'),//加载中图片，一定要有，不然会一直...原创 2020-08-24 09:31:50 · 1262 阅读 · 0 评论 -
tr，td设置高度不生效
功能：表格内容较长，但是页面高度有限，超出显示滚动条阻碍：给tr或者td加高度都不生效，不显示滚动条解决方案：td中加div，设置高度和内容溢出时的样式<table border='1' width='300'> <tr> <th>繁华之处</th> </tr> <tr> <...原创 2020-03-02 09:05:10 · 4899 阅读 · 0 评论 -
top.location和window location href的区别
top.location.href=”url” 在顶层页面打开url（跳出框架）self.location.href=”url” 仅在本页面打开url地址parent.location.href=”url” 在父窗口打开Url地址this.location.href=”url” 用法和self的用法一致if (top.loca...原创 2019-07-09 12:10:10 · 598 阅读 · 0 评论 -
解决iframe重定向让父级页面跳转或子页面控制父级页面跳转
原文：http://www.jb51.net/article/40583.htm有内嵌iframe的页面，当session过期时，点击连接重定向后的跳转会在iframe中跳转，在登录页面中加入下面的代码，就会在最外层页面跳转原文：http://www.cnblogs.com/JemBai/archive/2011/10/09/2203429.html<script languag...原创 2019-07-09 11:51:55 · 3557 阅读 · 0 评论 -
Js——ScrollTop、ScrollHeight、ClientHeight、OffsetHeight汇总
一直对ScrollTop、ScrollHeight、ClientHeight、OffsetHeight这些内容傻傻分不清楚，今天整体下。scrollHeightscrollHeight含有scroll当然这个高度与滚动相关。读写：只读 描述：包括overflow样式属性导致的视图中不可见内容，没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值c...原创 2019-06-17 16:18:55 · 6974 阅读 · 1 评论 -
小程序内嵌H5网页web-view组件图文教程
一、小程序内嵌网页web-view图文教程1) 微信公众平台，登录小程序账号2) 左侧-设置-开发设置-业务域名-配置3) 小程序管理员微信扫码4) 填写小程序业务域名，域名需ICP备案5) 下载校检文件上传至服务器指定目录，保存6) 小程序业务域名配置完成7) 打开微信开发者工具，添加小程序项目8) 进入小程序调试，点击底部导航-外链页page10001,右侧找到...原创 2019-06-12 17:02:42 · 4427 阅读 · 0 评论 -
svg-icon教程
1.webpack.base.conf中配置svg的依赖和loader { test: /\.svg$/, loader: 'svg-sprite-loader', include: [resolve('src/icon')], options: { symb...原创 2019-04-16 10:34:38 · 7509 阅读 · 0 评论 -
详解HTML中的window对象和document对象
Window -- 代表浏览器中一个打开的窗口： window //窗口自身 window.self //引用本窗户window=window.self window.name //为窗口命名 window.defaultStatus //设定窗户状态栏信息 window.location //URL地址，配备布置这个属性可以打开新的页面对象属性对象方法 w...原创 2019-03-31 23:45:05 · 1125 阅读 · 0 评论 -
Smarty模板引擎模板文件.tpl和.html的区别
在WEB开发中,PHP作为业务逻辑,HTML作为表现逻辑.但是在Smarty一些文档中可以看到模板文件的拓展名是.tpl,而不是.html,其实所谓的.tpl就是.html.模版文件可以用任意的扩展名,如果是.html扩展名,渲染模板为$smarty->display('xx.html'); ,如果是.tpl拓展名,渲染模板为$smarty->display('xx.tpl');...原创 2019-03-05 10:57:09 · 1855 阅读 · 0 评论 -
h5移动端设备像素比dpr介绍
首先介绍一下概念 devicePixelRatio其实指的是window.devicePixelRatio window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。 公式表示就是：window.devicePixelRatio = 物理像素 / dips 好了，到了这里有出来了...原创 2019-01-07 16:17:49 · 347 阅读 · 0 评论 -
IOS微信6.7.4输入框失去焦点，软键盘关闭后，被撑起的页面无法回退到原来正常的位置
IOS微信6.7.4输入框失去焦点，软键盘关闭后，被撑起的页面无法回退到原来正常的位置 近期在开发微信H5页面时碰到这个问题，如图，软键盘弹起后，若原输入框被遮挡，页面整体将会上移，然而当输入框失焦，软键盘收起后，页面未恢复，这也是ios的微信版本更新6.7.4之后才遇到的bug。目前的解决办法是给输入框（或select选择框）添加失去焦点的事件，当输入框失去焦点，页面自动滚动到顶...原创 2018-12-13 12:05:25 · 1654 阅读 · 0 评论 -
H5移动端常见问题
解决jquery ajax调用远程接口的跨域问题首先,接口必须允许远程调用.这是后端或者运维的事情.你必须保证你得到的一个接口是允许远程调用的.否则,就没啥了.$.ajax({ type:'get', url:url, // 下面的两行代码,就是解决跨域的关键 xhrFields: {withCredentials: true}, crossDom...原创 2018-11-06 10:34:18 · 397 阅读 · 0 评论 -
localStorage使用总结
localStorage使用总结一、什么是localStorage、sessionStorage在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。...原创 2018-10-18 14:49:42 · 178 阅读 · 0 评论 -
canvas基础教程
01.canvas简单的认识canvas 是html5提供给我们的一个绘图标签 默认大小 300X150 背景透明<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>canvas简单的认识</titl原创 2018-07-27 11:11:28 · 407 阅读 · 0 评论 -
HTML通过canvas实现简单的画图功能
功能描述： 有红绿蓝三种颜色的画笔，可以选择画笔的粗细，画出的图可以保存到右边的六个画框中。当右边的六个画框都画满之后，便不能继续保存来了。可以清除画框，清除画布。保存的图片可以右击保存为png格式。实现效果如图所示： 实现代码：<!DOCTYPE html><html lang="en"><head> <meta cha...原创 2018-07-25 23:33:12 · 5313 阅读 · 0 评论 -
关于CSS与HTML知识点总结（二）
HTML知识点整理置换元素：浏览器根据标签和属性来决定元素的具体显示内容，如 img input textarea select object video 等Form <input type='radio'>的选择变化可由onfocus属性控制 <select>的变化可由onchange属性控制 selectedIndex对应当前选中option的in...原创 2018-07-25 09:00:20 · 159 阅读 · 0 评论 -
关于CSS与HTML知识点总结（一）
一，html+css基础1-1Html和CSS的关系学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有...原创 2018-07-24 23:28:22 · 296 阅读 · 0 评论 -
关于html5和css3的一些常见面试题
一、HTML5 CSS3CSS3有哪些新特性？1. CSS3实现圆角（border-radius），阴影（box-shadow），2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0d...原创 2018-07-22 23:18:48 · 691 阅读 · 0 评论 -
响应式布局之二 SS3 Media Query
响应式布局有三种实现方式：CSS3 Media Query 原生 JS 代码 第三方开源框架（最常见的有 bootstrap） CSS3 -- Media Query1. 媒体查询实现方式方式一：styleSheet样式表中的写法：如：<style>标签中使用@media <style> @media screen and ...原创 2018-07-22 23:10:28 · 147 阅读 · 0 评论 -
HTML常用标签
HTML文档采用目录树这样一种结构，基本结构如：<!DOCTYPE html><html><head><title>文档的标题</title></head><body>文档的内容......</body></html>第一行声明浏原创 2018-07-19 18:57:38 · 304 阅读 · 0 评论 -
36道前端面试题html+css
1. 对WEB标准以及W3C的理解与认识?标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;定制这些标准主要是为了提高网页加载速度，便于开发。同时这也是一...原创 2018-07-18 21:21:16 · 357 阅读 · 0 评论 -
关于H5的20道面试题及答案
1 DOCTYPE有什么作用？标准模式与混杂模式如何区分？它们有何意义?告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。标准模式（Standards mode）以浏览器支持的最高标准运行；混杂模式（Quirks mode）中页面是一种比较宽松的向后兼容的方式显示。2 HTML5为什么只需要写 ？HTML5不基于SGM...原创 2018-07-18 21:20:31 · 41918 阅读 · 0 评论 -
超全前端面试题及答案
HTML+CSS1.对WEB标准以及W3C的理解与认识标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；2.xhtml和html有什么区别HTML是一种基...原创 2018-07-18 21:19:31 · 2966 阅读 · 0 评论