- 博客(28)
- 收藏
- 关注
RSS订阅原创 SVG 矩形rect 学习
1 基础写法以下两种写法都可以定义图形的样式，矩形默认的填充颜色是黑色。<svg> <rect width="300" height="100" /></svg><svg> <rect style="width:300px;height:100px;" /></svg>效果截图：2 填充背景色fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）。<svg> <re
2022-04-12 17:47:32
3364
原创 命名转小驼峰大驼峰中划线
1 中划线转驼峰说明：不区分大小写，一律转换为驼峰。默认转为小驼峰。转换示例：t-button-test-1 => tButtonTest1t-Button-Test-1 => tButtonTest1Test-BUTTON-test-1 => testButtonTest1TEST-BUTTON-TEST-1 => testButtonTest1/** * 将中划线字符转换为驼峰字符,默认转为小驼峰。 *
2021-12-01 09:46:46
1343
原创 nginx配置允许资源跨域
项目部署在 nginx 下，访问时报跨域问题1 错误信息No 'Access-Control-Allow-Origin' header is present on the requested resource.2 解决方法在 nginx.conf 配置文件 http 下增加以下代码http { ... #support cross domain access add_header Access-Control-Allow-Origin *; add_header Access-Co
2021-11-29 13:27:14
1634
原创 nginx常用命令
start nginx 启动nginx 或者双击文件夹下的nginx.exenginx -s quit 优雅停止nginx，有连接时会等连接请求完成再杀死worker进程 nginx -s reload 优雅重启，并重新载入配置文件nginx.confnginx -s reopen 重新打开日志文件，一般用于切割日志nginx -v &n
2021-11-29 13:24:55
966
原创 平铺数据、树形数据结构转换
1 树形结构转为平铺结构1.1 示例数据const dataTree = [{ "name": "a1-name", "id": "a1", "parentId": "root", "children": [{ "name": "a2-name", "id": "a2", "parentId": "a1", "children": [{ "name": "a3-name", "id": "a3", "parentId": "a2", "children":
2021-11-29 11:14:49
1288
原创 CSS 实现文字渐变色
给需要渐变的标签增加以下代码：.icon { background-image: -webkit-linear-gradient(left bottom, #fb2c61 , #0700ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}属性说明：background-image: -webkit-linear-gradient(left bottom, #fb2c61 , #fac36.
2021-08-19 13:50:35
706
原创 CSS 获取除第一个子元素外的其他子元素
效果预览：一、基础的代码结构<div class="box"> <div class="box-item">1</div> <div class="box-item">2</div> <div class="box-item">3</div></div><style> .box { display: flex; } .box .box-item
2021-07-06 16:33:08
396
原创 CSS 修改滚动条样式
/*修改滚动条样式*/::-webkit-scrollbar { width: 8px; height: 10px;}::-webkit-scrollbar-button { background-color: red;}::-webkit-scrollbar-track-piece { background: yellow;}::-webkit-scrollbar-thumb { background: blue; border-radius: 4px;}
2021-07-06 14:04:33
84
原创 纯CSS实现各种三角形
一、上箭头.arrows-up { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 30px solid #45FFF8;}二、下箭头.arrows-down { width: 0; height: 0; border-left: 20px solid tr.
2020-11-30 16:26:27
165
原创 jq判断元素是否显示
一、判断元素是否显示if($('p').is(':visible')){ alert("显示");}else{ alert("不显示");}二、判断元素是否隐藏if($('p').is(':hidden')){ alert("隐藏");}else{ alert("没隐藏");}
2020-11-30 15:32:10
3308
原创 jq事件绑定与解绑
一、动态添加的元素的事件绑定、解绑// 绑定$('body').on('click', 'p', function() { alert('绑定事件啦！');});//解绑$('body').off('click', 'p');二、元素事件绑定、解绑// 绑定$('p').on('click', function() { alert('绑定事件啦！');});//解绑$('p').off('click');...
2020-11-30 14:27:45
440
原创 jq给动态元素绑定事件
给body中的动态p元素绑定事件$('body').on( 'click', 'p', function() { alert('绑定事件啦！');});
2020-11-13 18:23:18
131
原创 js/jq iframe父子页面交互
一、子页面调父页面1、获取父页面元素 $('#objId', parent.document)2、获取父页面方法parent.parentFun()二、父页面调子页面1、获取子页面元素$("#iframeId").contents().find('#objId')2、获取子页面方法$('#iframeId')[0].contentWindow.childrenFun()...
2020-11-13 17:33:10
293
原创 CSS超出变点
一、单行overflow: hidden;text-overflow: ellipsis;white-space: nowrap;二、多行
2020-11-13 16:56:59
524
原创 nginx启动报1113错（1113: No mapping for the Unicode character exists in the target multi-byte code page）
一、错误信息1113: No mapping for the Unicode character exists in the target multi-byte code page二、原因nginx文件解压后的路径存在中文路径。
2020-09-22 09:51:56
5780
1
原创 CSS3动画结束后停在最后一帧
animation-fill-mode: forwards;//保留最后一帧的状态一、定义和用法animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。animation-fill-mode : none | forwards | backwards | both;二、属性介绍值描述none不改变默认行为。forwards当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。backwards在 animation-d
2020-09-02 13:05:18
4091
原创 link与@import的区别
一、语法1、link语法结构<link href="CSSurl路径" rel="stylesheet" type="text/css" />2、@import语法结构<style>@import + 空格+ url(CSS文件路径地址);</style>二、区别1、语法结构不一样link是属于html 标签，需要在html源代码中使用，@import是css提供的一种引用方式，在css文件中直接引入，在html源码中则需要加上标签才可引用样式；2
2020-08-31 16:38:32
143
原创 HTML字符实体
显示结果描述实体名称实体编号 空格  <小于号<<>大于号>>&和号&&持续更新中…
2020-08-31 16:07:39
62
原创 HTML文档基本结构
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>html</title></head><body></body></html>DOCTYPE 声明位于文档中的最前面的位置。DOCTYPE 声明不是一个 HTML 标签，它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
2020-08-31 15:50:00
324
原创 HTML简介
一、什么是HTML？HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言，而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页二、...
2020-08-31 15:18:52
113
原创 js iframe通过postMessage实现父子页面传值
一、语法otherWindow.postMessage(message, targetOrigin);otherWindow 其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。postMessage中第一个参数代表要传回的值，第二个是限定消息接收范围(域名设置)，不限制使用 '*’。二、父页面向子页面传值父页面function handleEvent() { //
2020-08-31 14:41:58
8597
4
原创 CSS圆角border-radius
div { border-radius: 25px; <!-- 相等于以下代码： border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px; -->}一、属性定义border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合
2020-08-30 12:07:35
80
原创 CSS计算函数calc()
div { width: calc(100% - 100px);}一、定义和用法calc() 函数用于动态计算长度值。需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；任何长度值都可以使用calc()函数进行计算；calc()函数支持 “+”, “-”, “*”, “/” 运算；calc()函数使用标准的数学运算优先级规则；二、举例代码如下：<!DOCTYPE html><html><he
2020-08-30 11:42:54
829
原创 CSS强制不换行/自动换行
一、强制不换行p { white-space: nowrap;}二、自动换行p { word-wrap: break-word; word-break: normal;}三、强制英文换行p { word-break:break-all;}
2020-08-28 22:55:16
403
原创 CSS文本之间的间距
word-spacing:30px;一、属性定义及使用说明word-spacing属性增加或减少字与字之间的空白。注意： 负值是允许的。二、举例代码如下：<!DOCTYPE html><html><head><meta charset="utf-8"> <title>文本之间的间距</title> <style>p{ word-spacing:30px;}</style>
2020-08-28 22:41:27
955
原创 CSS文本排列方向
writing-mode: horizontal-tb; //默认writing-mode: vertical-rl; //文字垂直排列 向左对齐writing-mode: vertical-lr; //文字垂直排列 向右排列一、属性定义及使用说明writing-mode 属性定义了文本在水平或垂直方向上如何排布。语法格式如下：writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
2020-08-28 22:12:30
6380
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人