- 博客(80)
- 收藏
- 关注
RSS订阅原创 media案例
ul { list-style: none; margin: 0; padding: 0;}li { list-style: none;}a { color: #666; text-decoration: none;}a:hover { text-decoration: none;}/* 修改container的最大宽度为 1280 根据设计稿来走 */@media screen and (min-width: 1280) {
2021-06-02 10:56:34
149
原创 slot
slot目的让原来的设备具备更多扩展性组件的插槽使封装组件更具扩展性灵活更改组件内部一些内容 <div id="app"> <cpn> <span slot="center">change</span> </cpn> <cpn> <button slot="right">return</button&
2021-04-04 11:49:36
115
原创 v-bind
对属性动态绑定， 如a元素的href属性，img元素的src属性作用： 动态绑定属性缩写：:预期：any (with argument) | Object (without argument)参数: attrOrProp (optional)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa.
2021-03-11 22:57:53
102
原创 Mustache
可以通过Mustache语法(也就是双大括号)，将data中的文本数据，插入到HTMLmustache语法，不仅可以直接写变量，也可以写简单的表达式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo
2021-03-09 21:16:32
269
原创 Vue 中 el data methods
el:类型: string | HTMLElement作用：决定之后Vue实例会管理哪一个DOMdata:类型：Object | Function作用：Vue实例对应的数据对象methods:类型： {[key: strig]: Function}作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用...
2021-03-09 19:54:24
273
原创 媒体查询
什么是媒体查询媒体查询（Media Query）是CSS3新语法使用@media查询，可以针对不同的媒体类型定义不同的样式@media 可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果实际、Android手机，平板等设备都用得到媒体查询语法规范@media mediatype and|not|only (media feature) { CSS-Code;}用@media 开头 注意@符号mediatyp
2020-11-13 22:27:22
448
原创 js表单验证
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .one { width: 600px; margin: 100px auto; } .message { display: inline-block; font-size: 1
2020-07-27 11:01:25
84
原创 flex布局
目前在移动端用的最多，pc端也使用的越来越多两个重要的概念：1.开启了flex布局的元素叫 flex container2.flex container 里面的直接子元素叫做 flex items开启flex布局1.flex块级元素；2.inline-flex行内级元素设置display属性为flex或者inline-flex可以为flex container。（display：inline-flex）flex布局模型主轴（相当于x）：main axis； 主轴的开始位置叫main star
2020-06-28 16:44:00
182
原创 常见的鼠标事件（js）
鼠标事件 触发条件 onclick 鼠标点击触发 onmouseover 鼠标经过触发 onmouseout 鼠标离开触发 onfocus 获得鼠标焦点触发 onblur 失去鼠标焦点触发 ...
2020-06-25 19:05:22
277
原创 文本框内容的隐藏与显示（ onfocus 与 onblur ）
获得焦点： onfocus失去焦点： onblur<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> input { color: #999999; } </style> </head> <body> <
2020-06-25 18:27:18
567
原创 精灵图背景（js）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: ; } li { list-style-type: none; } .box { width: 250px;
2020-06-25 18:21:37
280
原创 点击关闭广告
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box { position: relative; width: 74px; height: 88px; border: 1px solid #ccc; margin: 100px
2020-06-25 18:14:36
349
原创 密码的显示与隐藏（js）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box { width: 400px; border-bottom: 1px solid #ccc; margin: 100px auto; position: relative;
2020-06-25 18:10:06
285
原创 更清晰的查看网页结构
想看一些网页结构时候给div增加outline结构 div { outline: 2px solid red !important; }打开检查的快捷键ctrl+shift+i 或者 f12 键
2020-03-13 21:22:48
747
原创 去掉li前的点,取消a下划线等问题
ul { list-style: none; /*去掉列表样式小点*/ }a { color: #050505; text-decoration: none; /*取消下划线*/ } header { height: 100px; /*background-color: skyblue;*/ over...
2020-03-12 15:43:02
3110
原创 a元素的相关使用 与 URL
<div> <p>打开别人的网页</p> <div> <a href="http://www.baidu.com" target="_blank">百度一下</a> </div> <p>打开自己的网页</p> <div> ...
2020-03-10 18:44:29
235
原创 JavaScript
java 服务器端的编程语言JavaScript 是一种运行在 客户端 的 脚本语言可用地方1.网页特效2.服务端开发(Node.js)3.命令行工具(Node.js)4.桌面程序(Electron)5.APP(Cordova)6.控制硬件-物联网(Ruff)7.游戏开发(cocos2d-js)分为ECMAScript-javaScript的核心网景:JavaScript ...
2020-02-11 18:20:34
160
原创 旋转轮插图
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> /* body { perspective: 1000px; } div { width: 100px; ...
2019-11-09 17:40:17
291
原创 BFC
BFC(block formatting context)直译为“块级元素上下文”BFC它是一个独立的渲染区域，只有block-level box 参与，它规定了内部block-level box如何布局，并且与这个区域外部毫不相干。（封闭的区域）以下属性可以触发BFCfloat属性不为noneposition为absolute或fixeddisplay为inline-block，ta...
2019-11-06 21:25:16
154
原创 伸缩布局 css3
css3在布局方面做了非常大的改进，使的我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向方向：默认主轴从左向右，侧轴默认从上到下主轴和侧轴并不是固定不变的，通过flex-direction可以互换<!DOCTYPE html...
2019-11-02 16:27:03
246
原创 html滚动
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } ul { list-style: none; ...
2019-11-02 12:14:39
161
原创 翻转
翻转 （backface-visibility: hidden;）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { ...
2019-09-03 18:56:58
189
原创 透视
3D变形（css3）transform左手坐标系伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方，建立一个左手坐标系，拇指、食指和中指分别代表x、y、z轴的正方向（2D x y）css3中的3D坐标系与3D坐标系有一定区别x坐标是负的，右边是正的y上面是负的，下面是正的z里面是负的，外面是正的rotateX就是沿着x立体旋转透视（perspective）电...
2019-09-02 17:20:23
257
原创 旋转
transform-origin可以调整元素转换变形的原点div {transform-origin: left top;transform: rotate(45deg);} /改变元素原点到左上角，然后进行顺时旋转45度/是4个角可以用bottom right（top left）需要精确位置可以用px像素<!DOCTYPE html><html lang="en"&g...
2019-09-01 19:18:08
97
原创 定位盒子居中对齐写法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 200px; height: 200px; ...
2019-09-01 11:30:16
191
原创 过渡效果
属性 描述 transition 简写属性，用于在一个属性中设置四个过度属性 transition-property 规定应用过渡的css属性的名称 transition-duration 定义过渡效果花费的时间（默认为0） t...
2019-08-31 19:42:40
157
原创 滑动门
使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强，常见于各种导航栏的滑动门核心技术利用的是css精灵（主要是背景位置）和盒子padding撑开宽度，来适应不同字数的导航栏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g...
2019-08-30 08:42:36
131
原创 icomoon
1.在样式里声明字体：告诉别人我们自己定义的字体@font-face { /*电脑中没有的字体，我们需要声明*/ font-family: 'icomoon'; src: url('fonts/icomoon.eot?7kkyc2'); src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype')...
2019-08-29 18:21:23
383
原创 css精灵技术
css精灵技术简单的说，css精灵是一种处理页面 背景图像 的方式，它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于页面，这样，当用户访问该页面时只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图测量时，精灵图一般拿过来第一时间锁起来，不要移动位置，否则网页中的坐标全乱。<!DOCTYPE htm...
2019-08-28 12:12:09
266
原创 溢出的文字隐藏
word-break：自动换行normal 使用浏览器默认的换行规则break-all 允许在单词内换行kepp-all 只能在半角空格或连字符处换行主要处理英文单词white-spacewhite-space设置或检索对象内文本显示方式，通常我们使用于强制一行显示内容normal： 默认处理方式nowrap： 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象换行...
2019-08-28 08:49:17
320
原创 css用户界面样式
所谓界面样式，就是更改一些用户操作样式，比如更改用户的鼠标样式，表单轮廓等，但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们放弃了，防止表单域拖拽鼠标样式cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状cursor: default小白/pointer 小手/move 移动/text 文本千万不要用hand 因为 火狐不支持pointer ie6以上都支持的...
2019-08-24 17:21:57
199
原创 元素的显示与隐藏
在css中有三个显示和隐藏的单词比较常见，我们要区分开，它们分别是display visibility和overflow它们主要目的是让一个元素在页面中消失，但是不在文档源码中删除。最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！display 显示 （常用）display 设置或检索对象是否及如何显示display:none 隐藏对象与它相...
2019-08-22 21:15:38
133
原创 定位案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } ul { ...
2019-08-22 10:20:45
226
原创 定位
定位（position）如果说浮动关键在一个“浮”字上面，那么我们的定位，关键在于一个”位“上ps：定位是我们css算是数一数二的难点了，但是，需要务必学好，css离不开定位，特别是后面的is特效，天天和定位打交道。定在某一个位置简称定位元素的定位属性元素的定位属性主要包括定位模式和边偏移两部分。1.边偏移 边偏移属性 描述 ...
2019-08-17 19:25:07
468
原创 网页部分案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>我的第一个网页（仿）</title> <style type="text/css"> /*样式*/ /*css初始化*/ * { margin: 0;...
2019-08-17 18:09:26
228
原创 网页
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*样式*/ /*css初始化*/ * { margin: 0; ...
2019-08-15 23:40:42
100
原创 选区布尔运算
选区布尔运算选区面积大小的变化。新选区:保持选中状态添加到选区：相加运算（按住shift再绘制选区）从选区减去：相减（按alt在绘制选区）与选区交叉:重合部分保留。（按alt+shift再绘制选区）...
2019-08-07 22:33:48
849
原创 ps工具
矩形选区工具 M用了选择某部分区域 为选区工具取消选区：ctrl+d（选中后，CTRL+j复制图层，然后把原来图片眼睛闭上，就可以把选中的那一块显示出来）圆形选区工具若要进行等比例缩放，则先按shift键弄出圆，在同时按alt键进行等比例缩放其中注意先松鼠标键在松键盘键，否则容易还原颜色填充前景色 alt+delete背景色 CTRL+delete...
2019-08-05 20:31:52
317
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人