小工具
关注
分享
扫一扫
AC_QI
加油~
展开
-
双飞翼布局
两翼齐飞又叫双飞翼布局，是一个三列布局，中间自适应宽度，两翼固定宽度的一种布局模型。经典布局方案1三个容器在一排，所以我们可以使用浮动布局2中间的自适应，我们可以让其占一整行，然后让子元素通过margin居中来自适应3后面橘黄色的元素，要放在最前面，移动的是绿色元素父容器的宽度，向左平移,所以设置负值4后面蓝色的元素，要放在最后面，根据浮动贴边特性，只需要向前移动蓝色盒子的宽度即可简化版(固比固布局) :就是中间自适应，左右固定，所以可以并列三个元素，前面两个脱离文档流(浮动) ，然原创 2021-07-31 18:44:22 · 451 阅读 · 0 评论 -
动画-制作立方体
制作立方体步骤:父元素设置保留子元素的3D属性transform-style: preserve -3d父相子绝前后面直接translate:正负宽度的一半上下面先沿x轴旋转90度, translate: 正负宽度的一半左右面先沿y轴旋转90度，translate: 正负宽度的一半注：图像记得最后再翻正<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"...原创 2021-07-31 14:27:00 · 103 阅读 · 0 评论 -
弹性盒模型
1含义Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。弹性布局可以使子元素按照规定的规则进行空白空间的分配、对齐和排列;弹性布局包括两个部分:弹性盒与弹性项(弹性子元素)采用Flex布局的元素，称为弹性容器(flex container)，简称"弹性盒"。它的所有子元素自动成为容器成员，称为弹性项目(flex item)，简称"弹性项"将一个盒子设置成为弹性盒:display: flex;或display: inline -flex;原创 2021-08-01 09:58:50 · 143 阅读 · 0 评论 -
浮动布局。
布局效果:头部区域自适应 尾部区域自适应 中间区域固定宽度包含两个固定宽度的模块，并且并列渲染两个盒子，一个浮动，一个在文档流上中间的内容区域自适应(例如: 80%居中)此时当页面小于内容区域最小盒子宽度的时候，头部和尾部显示不全了，我们可以让页面的最小宽度不小于该宽度即可min-width设置最小宽度min-height设置最小高度max-width设置最大宽度max-height设置最大高度<!DOCTYPEhtml>...原创 2021-07-31 17:26:48 · 77 阅读 · 0 评论 -
列表布局。
模型:在一个固定宽度的盒子内，均匀方式盒子，使他们之间的边距一致特点:盒子的宽度是一样的，盒子之间的边距时一样的布局公式:容器的宽度w，盒子的宽度是iw,边距m,放置盒子的数量nw=n*iw+(n-1)* m根据这个公式，如果三个变量是已知的，我们可以求第四个变量注意，布局的时候，每个盒子都要设置右边距，此时容器应该比原有的宽度多出一个边距来,我们可以通过修改margin（给个负值扩大）来解决(在没有显性设置宽度的时候，我们可以通过margin修改容器的宽度)<!D.原创 2021-07-31 17:49:40 · 259 阅读 · 0 评论 -
1.css3过渡
过渡的基本形式元素→元素:hover(只要元素属性发生改变就可以使用过渡)。元素原来变为hover状态都是干蹦。过渡效果就是让元素以动画形式，平滑的完成。语法: transition: all 2s linear 0s，参数解释:第一个参数:参与过渡的属性，一般我们书写all。.第二个参数:过渡完成的时间，单位是s，千万不能省略第三个参数:缓冲描述(函数)linear(匀速)，ease非匀速(两头慢中间快)，贝塞尔曲线(cubic-bezier(0, 0.33, 1,-0.3原创 2021-07-30 20:39:15 · 109 阅读 · 0 评论 -
h5：canvas绘制时钟
目录一：顿一下二：平滑一：顿一下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-s...原创 2021-09-24 22:34:52 · 207 阅读 · 0 评论 -
图片简单拖拽入垃圾桶 的三种方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-09-23 18:49:26 · 417 阅读 · 0 评论 -
js：倒计时（输入文本自动计算+默认国庆倒计时）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-09-13 17:51:50 · 388 阅读 · 0 评论