- 博客(33)
- 收藏
- 关注
RSS订阅原创 作用域 全局变量，局部变量
全局变量/函数：在函数外声明的变量/函数，可以在任意地方被访问和修改，一直存储在内存中，直到页面关闭。全局变量/函数：在函数外声明的变量/函数，可以在任意地方被访问和修改，一直存储在内存中，直到页面关闭。局部变量/函数：在函数内部声明的变量/函数，只能在函数里面使用，出了函数括号就会被销毁。局部变量/函数：在函数内部声明的变量/函数，只能在函数里面使用，出了函数括号就会被销毁。//注意1：只有函数{}内声明的是局部，其他都是全局。//注意2：声明变量没有加var，这就是一个全局变量。var n = 10;
2023-05-22 10:25:32
95
原创 运算符和表达式的概念以及循环
流程控制语句顺序结构（代码从上往下执行）选择结构(分支语句) ： (if if-else if-else if switch)循环结构：（for,while ,do-while,for-in).选择结构（分支语句） 单分支语法：if(条件){ 条件成立是执行的代码 }//1.案例： 如果有钱(>1000), 买煎饼果子加两鸡蛋 ， 买瓶敌敌畏//条件成立时执行，不成立就不执行console.log("买煎饼果子加两鸡蛋");console.log("买瓶敌敌畏");注意点。
2023-05-16 09:10:49
121
原创 数据类型，字符串
/undefined 未定义，空变量，声明变量，但是没有赋值。//NaN : not a number 运算得不到正确答案的时候，就会是NaN。//小数运算的时候会有偏差(精度缺失)，不要用小数运算做判断。//str.charAt(下标) ： 获取对应下标位置的字符。//十六进制：以0x开头，表示十六进制 0-9 a-f。//string:字符串类型 引号引起来的就是字符串。//八进制：以0开头，并且没有超过8的值，表示八进制。//boolean:布尔类型 true，false。
2023-05-11 08:53:47
83
原创 js变量命名
/y is not defined 报错：没有声明没有赋值。//undefined 未定义，声明了变量但是没有赋值。//undefined ，声明了没有赋值 未定义。变量：存储数据的容器，变量名（标识符）给存储数据的区域取的名字。//=赋值，把等号右边的值赋值给左边。var m = "吃",n = "饭";//声明变量：var 变量名 = 值。//4.同时声明多个变量，用逗号隔开。//变量:存储数据的容器。//3.声明的同时赋值。//6.不建议的写法。
2023-05-09 15:12:27
113
原创 js鼠标事件
/ console.log("被点名了");// console.log("鼠标移动");//3. onmouseover : 鼠标移入事件。console.log("鼠标移入");console.log("鼠标移出");//5. onmousemove : 鼠标移动事件。//6. onmousedown : 鼠标按下事件。console.log("鼠标按下");console.log("鼠标抬起");//4. onmouseout : 鼠标移出事件。//7. onmouseup : 鼠标抬起事件。
2023-05-09 15:09:40
1028
原创 定义帧动画
* 在25%的时候进行的一个动画 *//* 在50%的时候进行的一个动画 */from,to表示开始、结束状态，也可以使用0%,100%定义。@keyframes 动画名称（英文） {/* 动画的开始 *//* 动画结束 *//* 动画开始 *//* 动画结束 */@keyframes 动画名称（英文） {
2023-02-25 16:19:08
43
原创 css BFC渲染
它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。内部的Box会在垂直方向，一个接一个地放置Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。float属性不为none。
2023-02-25 16:01:29
51
原创 css显示隐藏
设置opacity元素的所有后代元素会随着一起具有透明性，【一般用于调整图片或者模块的整体不透明度】hidden 隐藏该元素但是该元素所占的内存空间还存在，即“隐身效果”。兼容性：IE6、7、8【不支持】，IE9及以上版本和标准浏览器都支持。【取值：0-1】0表示全透明，1表示全不透明，0-1之间表示半透明。none：隐藏该元素并且该元素所占的空间也不存在了。visible 显示元素。
2023-02-25 16:00:33
67
原创 css精灵图的原理及优缺点
CSS精灵英文叫法 CSS sprites，通常被解释为“CSS 图像拼合” 或 “CSS 贴图定位”，其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置。适用于一般小图片（如小图标，小背景），不适合大背景大布局背景。2.1 精灵图的原理。2.1.1 实现步骤。2.1.3 应用场景。
2023-02-25 15:58:03
316
原创 清除浮动的方法
描述：给父元素加 overflow 属性，overflow 为 visible 以外的其它值时可以帮助实现。描述：在浮动元素的最后加一个空块元素，此元素本身不浮动，且添加样式clear:both。优点：内容适应性强，不会在结构上产生冗余代码，可多次重复使用。缺点：可能会隐藏内容或触发不需要的滚动条。描述：给浮动元素的父元素固定高度。缺点：代码冗余，影响代码可读性。描述：给浮动标签的父标签添加。父元素overflow方法。解决问题即清除动的方法。提示通常使用both!
2023-02-25 15:57:41
35
原创 css3D旋转 平移 缩放
a 指的是一个旋转角度值，如果为正值，元素围绕 Z 轴顺时针旋转；a 指的是一个旋转角度值，如果为正值，元素围绕X轴顺时针旋转；a 指的是一个旋转角度值，如果为正值，元素围绕Y轴顺时针旋转；angle：一个角度值，指定在 3D 空间旋转角度，正值顺时针旋转，反之元素逆时。x：是一个 0 到１之间的数值，主要用来描述元素围绕 X 轴旋转的矢量值。y：是一个 0 到１之间的数值，主要用来描述元素围绕 Y 轴旋转的矢量值。z：是一个 0 到１之间的数值，主要用来描述元素围绕 Z 轴旋转的矢量值。
2023-02-25 15:49:41
221
原创 css项目规范
metaname= " keywords"content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!小U课堂是优就业打造的在线实用技能学习平台，我们要完成 首页、同步课程、在线练习，精品课程、视频详情、登录、注册页面、个人中心等静态页面的制作。”、“×××网作为…
2023-02-25 15:45:25
131
原创 css盒模型
padding可以单独改变元素的上、下、左、右边距，也可以一次改变所有的属性。概述：CSS通过为元素设置width和height属性值来规定元素的content内容区域的大小。CSS盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距、边框、填充、和实际内容。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。边框是围绕内容和内边距之间的一条或多条线，通过边框属性指定一个元素的边框的宽度、样式和颜色。设置标签所有边框的样式，或者单独地为各边设置边框样式。
2023-02-25 15:40:56
50
原创 css选择器
概念：当样式声明发生冲突时，用户代理需要确定样式声明的最终值，既要考虑样式的来源又要考虑样式的特殊声明又要考虑优先级、以及先后顺序 ，这个过程就叫做层叠。优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。- 当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上，内部和外部样式遵循就近原则。概述：每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。
2023-02-24 17:28:48
48
原创 阿里巴巴矢量图标
一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px。原理：确定基准值以常见的750像素宽度的设计稿为例，根据vw单位的原理100vw = 750px,即 1vw = 7.5px，根据设计稿中的px值，转换成对应的vw值进行布局，也可以直接写px。
2023-02-24 17:17:55
116
原创 什么是响应式
项目描述：小U是一套响应式跨平台电商后台管理系统包含了商品管理、订单管理、包含商品管理、订单管理、会员管理、促销管理、等模块。我们主要完成商品管理，商品添加页面、商品信息页。对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：桌面优先（从桌面端开始向下设计）；无论基于那种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化，主要的布局方式主要有以下几种。响应式设计的页面会根据用的的行为以及设备的环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。
2023-02-24 17:17:00
1572
原创 CS网格布局
justify-content水平位置 总网格区域相对于容器左右对齐方式(网格内容大小小于容器宽时) align-content 位置 总网格区域相对于容器上下对齐方式(网格内容大小小于容器高时)grid-column属性是grid-column-start和grid-column-end的合并简写形式。place-items属性是align-items属性和justify-items属性的合并简写形式。grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
2023-02-24 17:15:30
143
原创 响应式技术
也叫响应式布局，响应式开发实现不同屏幕分辨率的终端上浏览网页的不同展示方式。响应式布局是根据设备屏幕宽度不同适当调整标签显示的布局，从而在每种设备屏幕宽度下呈现的界面是不同的。
2022-10-26 19:24:10
155
原创 3D变形：平移、旋转、缩放
a 指的是一个旋转角度值，如果为正值，元素围绕 Z 轴顺时针旋转；a 指的是一个旋转角度值，如果为正值，元素围绕X轴顺时针旋转；a 指的是一个旋转角度值，如果为正值，元素围绕Y轴顺时针旋转；angle：一个角度值，指定在 3D 空间旋转角度，正值顺时针旋转，反之元素逆时。x：是一个 0 到１之间的数值，主要用来描述元素围绕 X 轴旋转的矢量值。y：是一个 0 到１之间的数值，主要用来描述元素围绕 Y 轴旋转的矢量值。z：是一个 0 到１之间的数值，主要用来描述元素围绕 Z 轴旋转的矢量值。
2022-10-24 21:06:58
102
原创 1.2D变形
* skew(30deg,45deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 45 度 */单位：deg 当角度值为正数时，元素沿着顺时针方向旋转 当角度值为负数时，元素沿着逆时针方向旋转。transform: translate(x,y) 沿着x轴和y轴移动。沿着中心点旋转，默认值。transform: translateX(x) 沿着x轴移动。transform: scale(x,y) 沿着x轴和y轴缩放。transform: skew(x,y) 沿着x轴和y轴倾斜。
2022-10-24 21:05:20
66
原创 css3过渡动画——transition属性
语法transition: transition-proterty transition-duration transition-timing-function transition-delay;transition: css样式 动画的执行时间 速度类型 动画的延迟时间; 多个css属性用逗号隔开 transition: transform 2s, background-color 2s;注意：谁发生了属性的改变 就加在谁身上 属性1、transition-protertyc
2022-10-24 21:02:34
39
原创 css3过渡动画——transition属性
语法transition: transition-proterty transition-duration transition-timing-function transition-delay;transition: css样式 动画的执行时间 速度类型 动画的延迟时间; 多个css属性用逗号隔开 transition: transform 2s, background-color 2s;注意：谁发生了属性的改变 就加在谁身上 属性1、transition-protertyc
2022-10-24 21:02:02
110
原创 css其他属性
它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。内部的Box会在垂直方向，一个接一个地放置 Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。/* 控制要显示的行数 */
2022-10-08 21:45:33
41
原创 一、阿里矢量图标(字体图标)
1.使用步骤1.登录阿里矢量图标网站2.搜索想要的图标且加到购物车3.点击右上角的购物车4.选择下载代码，下载完成后解压文件5.把下载的文件放到你的项目中6.引入iconfont.css文件或者iconfont.js文件使用三种方式：下载代码1、Unicode 方式引用Unicode 是字体在网页端最原始的应用方式，特点是：兼容性最好，支持 IE6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。
2022-10-08 21:41:17
57
原创 css布局
网页中有很多布局效果，标准流没有办法完成，使用可以利用浮动改变元素默认的排列方式，举例说明（如网页中横向排列的模块或者一左一右排列的模块）。1.1、浮动的概念浮动可以使元素【脱离文档流】，【按照指定方向排列】，直到遇到父元素的边界或另一个浮动元素【停止】。1.2、浮动属性floatleft 左浮动right 右浮动float:none 不浮动(默认值)1.3、浮动的基本特性可以使块元素在一行排列脱离文档流提升层级。
2022-09-27 22:17:53
49
原创 CSS定位布局
如果元素的四个边的位置是使用“top”、“right”、“bottom”和“left”来描述的，那么元素的“height”和“width”将隐式地由偏移量决定。浮动元素： 使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本、图片、表单标签依然会为这个元素让出位置，环绕在周围。相对于元素在正常的文档流中的位置移动它，把一个正常布局流中的元素从它的默认位置按坐标进行相对移动。表示“将元素放在文档布局流的默认位置，HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
2022-09-27 22:12:00
44
原创 CSS盒模型（1）
CSS盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距、边框、填充、和实际内容。（即装东西的容器）所有 HTML 标签可以看作盒子，在 CSS 中，"box model" 这一术语是用来设计和布局时使用的。（即网页布局就是利用 CSS 摆盒子）
2022-09-21 20:48:54
51
原创 CSS字体，文本属性
可继承的属性 font-size font-family font-style font-weight font line-height text-align text-indent color。白色： rgb(255,255,255) 、黑色 : rgb(0,0,0) 红色： rgb(255,0,0) 、绿色： rgb(0,255,0) 、蓝色： rgb(0,0,255)/*font-family:"宋体","微软雅黑";/*font-family:"微软雅黑","宋体";
2022-09-20 20:51:38
207
原创 表格标签、tr、td、th、table
为HTML标记语言提供了一种样式描述，即【设置HTML页面中的元素的位置、排版、样式外观等】 如文本内容（字体、大小、对齐方式等）、图片的外形（宽、高、边框等）。每个表格均有若干行（由tr标签定义），每行被分割为若干单元格（由td标签定义）。当读到一个样式表时，浏览器会根据它来格式化 HTML 文档，插入样式表的方法有三种：行间样式表、内部样式表、外部样式。作用：定义表格数据（table data） 单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。语法:
2022-09-19 20:27:34
6371
原创 EM,Strong，b，i，del，br，span标签
为了强调重要的词，在口语方面我们往往用重音强调，在文字方面则是用粗体字来达到强调的效果。区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等。常常我们在需要手动换行地方，加入换行标签 ，即可实现内容强制换行。定义粗体文本,用于吸引读者的注意到该元素的内容上。作为行内容器包含短语内容，通常用来区分文本样式。被从文档中删除的文字内容。强调，用于标记强调内容。标记重要强调的内容。待办事项中已完成的项。
2022-09-18 20:34:27
79
原创 p.hr.div.h1-h6标签 五个浏览器以及内核
h1-h6标题标签；标题标签中文字大小依次减小，重要程度依次减弱。（h1标题一个页面中只有一个，h2~h6是可以有多个的。五大浏览器：chrome、safari、Firefox、Opera、IE。可以用来划分页面的区块，里面嵌套任何的标签。段落标记（p标签不能嵌套块级标签）内核：presto blink。内核：webkit、blink。2.Firefox 火狐浏览器。3.Safari 苹果浏览器。hr标签：水平分割线 块级标记。4.opera 欧朋浏览器。内核：trident。
2022-09-15 21:42:59
184
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人