用的canvas。这个问题测试妹子反馈了好几次bug，解决了好多次，虽然用了比较僵硬的办法，但总算最终解决了。 因为php的同事说，页面上的图片要直接调用七牛的接口上传到七牛，所以后端那边不能处理，必须前端这边把图片处理到2m以下。可是我感觉用之前的办法只是把宽高变小，并不能保证压缩后
图片等比例缩放方案 在Web开发时无可避免的需要将图片进行缩放，缩放时需要保证图片不变形，也就是需要等比例缩放。 设定宽度或高度 引入图片时，仅设置图片的width或者是height就可以使另一边自适应，从而实现等比例缩放。 <section> <img id="t1" src="http://www.sdust.edu.cn/__l
前言： 前面是Avl树的介绍写的比较详细，这一篇主要写怎么实现 最简单的旋转 依次插入1 2 3节点，1的左子树为空高度为0，而右子树高度为2，旋转后，左右高度都为1 单旋转 依次插入6 3 7 1 4，插入2时，树的平衡被破坏 步骤： 获取k1节点=k2的左边节点 设置k2的左边节点为k1的右边节点Y 设
效果图 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/style.css"> </head>
效果图 跟着，渡一教育学前端，脑壳炸了
目录： 1、水平居中 2、垂直居中 水平居中 块级标签：设置 margin : 0 auto 行内标签：设置 text-align : center 行内-块级标签：设置 text-align : center 块级标签水平居中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style>
题目：https://leetcode-cn.com/problems/container-with-most-water/ 给你 n 个非负整数 a1，a2，...，an，每个数代表坐标中的一个点 (i, ai) 。在坐标内画 n 条垂直线，垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0)。找出其中的两条线，使得它们与 x 轴共同构成的容器可以容纳最
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>BFC - 块级格式化上下文</title> 5 <!-- 6 BFC的布局规则: 7 1. 内部的Box会在垂直方向，一个接一个地放置。 8 2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin
今天博主给大家分享一个自己做的购物车页面，使用的是html+css实现： 话不多说，直接上图： 这个页面只是实现了其布局视图，没有使用js或者jquery相关语言，在博主看来是比较利于我们将其加入到自己的程序中的 以下是相关代码： index.html <!DOCTYPE html> <html> <head> <meta char
效果图 实现原理 利用vue的生命周期-钩子函数mounted()来触发变量修改; css的过渡动画属性transition.可以参考这里：#transform #transition 通过类名实现文字动画过渡 具体逻辑代码 组件 1 - 登录 DOM上使用vue的class绑定一个控制变量ifActiveCustomStyle， <div :class="{I
HTML如下： <html> <link href="css/index.css" rel="stylesheet" type="text/css"> <body> <div style="width:100%" align="center"> <div id="top" align="left">
效果图如下所示 图片素材:https://pan.baidu.com/s/1Fa_kFBTVmps3BZf-LsC32Q 提取码: ebvr .wxml <button bindtap="popup">签到</button> <view class="load" style="{{sign?'':'top:calc((100vh - 750rpx)/2);opacity: 0;z-index:
jQuery实现购物车计算价格统计功能 #功能介绍 进入界面，刷新触发onload方法跳转到JS代码，可以对购物车内商品数量进行增加-减少，商品价格自动统计、当更改商品数量的输入框value值时，整个购物表商品的价格，商品的小计和总计会根据数量发生变化。 话不多说直接上代码 <style type
(指趣学院笔记) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tab选项卡面向对象版</title> <style> *{ margin: 0; padding: 0; }
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minim
在做电商后台管理系统项目事遇到的问题，可能视频是去年的，element现在已经是新版本了，有些地方修改了，从而导致了以下问题 级联选择器的位置不对 解决的方法就是在全局css中添加以下代码： .el-cascader-menu { height: 300px; } 完美解决！！！
用stylus画可爱的小丸子 之前看了一些关于二次元用css来画卡通图画的文章，都写得非常棒，但是对于我这样一个有密集恐惧症的小白来说相当的头疼，密密麻麻的括弧和标点让人眼花缭乱，最近学习了一些关于stylus的知识，觉得用stylus来写样式相当地简洁，层级嵌套逻辑关系也非常清晰，索性结合Di
1.添加水印 #绘画库 from PIL import ImageDraw #字体库 from PIL import ImageFont #图片库 from PIL import Image #读取指定文件目录下的图片 img = Image.open('./static/upload/%s'%myfile_name) #print(im.format,im.size,im.mode) #获取图片的属性 类型，大小，模式
本文引自：https://www.cnblogs.com/qinqin-me/p/11259430.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css">
在我们实际项目中，轮播图（走马灯）是一个使用很频繁的功能组件。今天就自己动手实现一个简单的轮播图组件，在实际动手中加深对基础知识的理解，在项目中更加熟练的去应用。 首先整理下实现此组件的基本功能以及思路：1.把几张图片放置在一个容器中，每次只显示一张2.根据图片在容器中的偏移来
浮动（float） 1.标准流（文档流 普通流） 一个网页的标签元素正常是从上往下，从左到右排列，块级元素独占一行，行内元素按照顺序依次前后排列 三种布局 标准流 浮动 定位 2.什么是浮动 元素设置了浮动属性会脱离标准流控制（脱标）。 float:left / float:right 3.浮动特
<template> <div id="root"> <nav-con id="nav" ref="nav" :title="'他们送上了祝福'"></nav-con> <div class="container" :class="{'container-ipx':
点击涟漪效果 前天看到b站上一个视频，up主实现了一个按钮点击然后以点击点为圆心出现一个圆，然后这个圆慢慢变大最后消失，感觉很吊的样子，我觉得我也能实现，废话不多说，干就完了。 。。。。。。。。。。。。。。。 经过两分钟的编写，终于实现了 （如下图：点击了第二个按钮，然后出现了一个涟漪
/*swtich整体大小及背景色*/ .wx-switch-input{ width:80rpx !important; height:35rpx !important; background: #ccc !important; border: #ccc !important; } /*白色样式（false的样式）*/ .wx-switch-input::before{ width:80rpx !important; height: 35rpx !importan
1.写在前面 两个多周的时间没有写文章了，手好痒好痒，趁着公司在装修，从上周末到本周都在家办公，同时公司的项目并不紧急，于是抽着时间梳理了一下CSS中关于行高line-height的理解，今天发布出来，大家准备好了吗？ 2.基本概念 2.1行高的定义与图解 行高，顾名思义指的就是一行文字的高度。按照
