- 博客(14)
- 收藏
- 关注
RSS订阅原创 将后台返回的图片转换成base64格式
将后台返回的图片转换成base64格式通过 imgsrc 将图片装成 base64function getVagueImage(imgSrc) { return new Promise((resolve) => { let imgWrap = new Image(); imgWrap.crossOrigin = 'Anonymous'; imgWrap.src = imgSrc; imgWrap.onload = function() { let canvas = docu
2022-02-28 11:11:20
1116
原创 浏览器中复制图片
实现图片的复制和粘贴首先有一张图，然后一个按钮作为交互，点击复制图片代码如下const testImg = document.getElementById('img1');const copyBtn = document.getElementById('copyBtn')function handleCopyImg() { const canvas = document.createElement('canvas'); const ctx = canvas.getContext
2022-02-18 11:23:50
993
原创 CSS3增加的属性
精灵图（sprite）CSS精灵图是将网页中一些小的背景图片整合到一张大图中（精灵图），网页需要其中的某一个小图标，只需要定位到该区域即可优点：1.用户访问页面时，网页只需要向服务器发送一次请求，大大的提高了页面的性能2.只需要加载一张图片，浏览页面时加载的更加快速使用精灵图用到的属性：background-image：使用精灵图的路径background-repeat：no-repeat; 不平铺background-position：用来精确定位所需背景图片的位置2D转换2D转
2020-07-07 09:32:32
134
原创 浮动和定位
浮动（float）：脱离标准流且不占位float：left; 左浮动float:right; 右浮动清除浮动的影响clear: left; 清除左浮动clear: right; 清除右浮动clear: both; 清除左右两端的浮动但是我们一般在程序中，直接调用一个选择器，该选择器中的内容属性能够清除浮动的影响/* 我个人一般这么写清除浮动 */.clearfix { content:''; //用伪类选择器必须使用的属性，填写后面添加额内容 display
2020-07-06 01:08:30
290
原创 背景（background）属性
渐变色：background-image: linear-gradient()对于文字的渐变色：background-clip：text； //规定背景的区域为文本
2020-07-06 00:44:26
346
原创 盒模型
标准盒模型：宽=内容的宽+左右内边距+左右外边距+左右边框高=内容的高+上下内边距+上下外边距+上下边框CSS3中的弹性盒模型：宽和高设置后，盒子中的内容想要往左或者往右移动时，用padding属性，但是盒子的大小不会发生改变。不会像标准盒模型那样被撑开。内边距（padding）padding-bottom： 设置元素的底部填充padding-left： 设置元素的左部填充padding-right： 设置元素的右部填充padding-top： 设置元素的顶部填充len
2020-07-03 10:29:01
102
原创 CSS选择器
选择器有ID选择器，类选择器、标签选择器和通配符选择器在css3中的选择器：1、伪类选择器:link 未访问的链接时的样式:visited 已访问的链接的样式:hover 光标悬停时发生的事件或属性变化:active 选定的事件时的样式2、结构（位置）伪类选择器:first-child 选取属于父元素第一个首个子元素指定选择器:last-child 选取属于父元素最后一个子元
2020-07-03 09:46:24
250
原创 文本属性的设置
text 文本样式属性：所有的文本样式属性都可以被继承color：设置文本颜色color-name: 颜色值为颜色名称的颜色hex-name: 颜色值为十六进制表示的颜色rgb-number: 颜色值为rgb代码的颜色rgba（）：最后一项的取值范围为0-1，为0时，颜色透明inherit： 规定从父元素继承颜色direction：设置文本方向ltr： 默认。文本方向从左向右rtl： 文本方向从右向左。实际效果不好，无法像bdo标签完
2020-07-03 09:45:57
1355
原创 CSS的引入样式及标签的显示模式
CSS的引入方式：1、外部样式表：在head中插入link标签，通过href属性，引入CSS文件2、内部样式表：在head中插入style标签，将样式 写在style标签中3、内联样式（行内样式）：通过在标签内部使用style属性添加样式标签显示模式（display）1、display：block； //行内转块级元素（也可用来显示隐藏的事件）块级元素特点：1.高度、行高、、宽度和内外边距都能控制2.独占一行，使用时从新的一行开始3.宽度是默认元素的100%4.可容纳内联元素
2020-07-03 09:45:21
177
原创 CSS样式中字体的属性
font属性font-size：字体大小smaller： 把字体大小设置比父元素更小的字体larger： 把字体大小设置比父元素更大的字体length： 把字体大小设置为一个固定的值% 把字体大小设置为基于父元素的百分比inherit 从父元素继承font-style：字体格式normal： 默认。浏览器显示一个标准的字体格式italic： 浏览器显示一个倾斜字体的样式oblique： 浏览器显示一个倾斜字体的样式inherit： 从父元素继
2020-07-03 09:44:43
248
原创 图片标签和多媒体标签的使用
[img]标签是用来定义图片的标签。[img src="" alt="" title=""]src：代表source，填写的是要放入图片的路径。alt：代表alter，是用来放置当图片无法正常显示时替换的文本。title：当鼠标（光标）悬停在图片上时，指针右下角提示的内容。多媒体标签embed：可用来插入各种媒体[embed src=""]src：代表source，用来放入文件的路径属性设置自动播放(autostart)：[embed src="" autostart=true]
2020-06-18 09:59:04
269
原创 HTML中iframe框架和网页的小图标
iframe：定义一个内联框架用于加载页面[iframe src=" " ][/iframe]src:规定在iframe框架中显示的网页/文档的URL(统一资源定位符）frameborder：是否显示iframe的边框name：定义iframe的名称在[head][/head]标签中写：[link rel=“shortcut icon” type=“image/x-icon” href=" "/]link:链接标签rel：声明type：image/x-icon类型href：小图
2020-06-14 23:05:33
297
原创 INPUT控件的使用以及一些新标签的使用
input控件：[input/]标签为单标签，type属性为最基本的属性，除了type属性外， [input/]标签还可以定义很多其他属性。单选框：性别: [input type=“radio” name=“sex”] 女[input type=“radio” name=“sex” /] 男 [br /]复选框：爱好: [input type=“checkbox” name=“hobby” /]游泳[input type=“checkbox” name=“hobby” /]跑步都是靠name给的相
2020-05-28 08:58:53
1016
原创 HTML列表及表格使用
无序列表：各列表项之间无顺序之分,[ul]中只能放[li],[li]中能放任何元素[ul][li][li/][li][li/][ul/]有序列表：各列表项之间有排序[ol][li][li/][li][li/][/ol]自定义列表：[dt]之间放的是一个词 [dd]之间放的是对[dt]间名词的解释[dl][/dt]名词[/dt][dd]解释一[/dd][dd]解释二[/dd][/dl]表格:[table]用于定义一个表格[tr]用于定义表格中的一行，必须嵌套在[table]标
2020-05-28 08:44:30
250
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人