- 博客(28)
- 收藏
- 关注
RSS订阅原创 媒体查询的引入方式和语法续
media screen and (min-width:1200px){ ... }/* 大型设备（大台式电脑，1200px 以上） */@media screen and (min-width:768px) { ... } /* 小型设备（平板电脑，768px 以上） */@media screen and (min-width:992px){ ... }/* 中型设备（台式电脑，992px 以上） *//* 小屏幕 768px-992px 屏幕宽度在768px以上显示的颜色*/
2022-10-26 19:24:45
121
1
原创 什么是响应式设计
也叫响应式布局，响应式开发实现不同屏幕分辨率的终端上浏览网页的不同展示方式。响应式布局是根据设备屏幕宽度不同适当调整标签显示的布局，从而在每种设备屏幕宽度下呈现的界面是不同的。
2022-10-26 19:16:09
96
原创 二、animate.css动画插件
css3动画库，预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、旋转（rotateIn|rotateOut）、翻转（flip）、淡入淡出（fadeIn|fadeOut）等动画效果。1、过渡动画是需要触发条件的(hover事件或click事件等)，只能完成简单的动画。2、加统一的类名animated，然后选择自己想要的动画效果，然后复制粘贴。第一个animated是必须添加的样式名，第二个是指定的动画样式名。2、帧动画不需要任何的触发条件，可以完成复杂轨迹的动画。
2022-10-25 19:23:33
1694
1
原创 一、帧动画
keyframes 动画名称（英文） {/* 动画的开始 *//* 在25%的时候进行的一个动画 *//* 在50%的时候进行的一个动画 *//* 动画结束 */}from,to表示开始、结束状态，也可以使用0%,100%定义@keyframes 动画名称（英文） {/* 动画开始 *//* 动画结束 */}
2022-10-25 19:22:03
41
原创 3D变形：平移、旋转、缩放
a 指的是一个旋转角度值，如果为正值，元素围绕 Z 轴顺时针旋转；a 指的是一个旋转角度值，如果为正值，元素围绕X轴顺时针旋转；a 指的是一个旋转角度值，如果为正值，元素围绕Y轴顺时针旋转；angle：一个角度值，指定在 3D 空间旋转角度，正值顺时针旋转，反之元素逆时。x：是一个 0 到１之间的数值，主要用来描述元素围绕 X 轴旋转的矢量值。y：是一个 0 到１之间的数值，主要用来描述元素围绕 Y 轴旋转的矢量值。z：是一个 0 到１之间的数值，主要用来描述元素围绕 Z 轴旋转的矢量值。
2022-10-24 20:54:11
139
原创 css3动画&2D|3D
* 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 20:50:20
37
原创 css3过渡动画——transition属性
1.linear 相同的速度从开始到结束，也就是匀速 2.ease 默认值 慢速度开始--速度变快--慢速度结束 3.ease-in 慢速度开始的过渡效果，也就是以低速度开始 4.ease-out 慢速度结束的过渡效果，也就是以低速结束 5.ease-in-out 以慢速度开始和结束的过渡效果。/* 参与过渡的css属性名称 */css样式：参与过渡的css属性名称|all表示所有属性。/* 动画执行时间 *//* 速度类型 *//* 延迟时间 *//* 复合写法 */延迟时间：默认0s,单位s|ms。
2022-10-24 20:48:18
70
原创 移动端web开发
项目名称：小U商城项目描述小U商城是面向移动端的专业综合网上购物商城，我们要完成 首页、列表页、详情页等静态页面的制作技术选型布局采取rem适配布局设计图尺寸本设计图采用 750px 设计尺寸开发工具VScode蓝湖。
2022-10-18 23:21:15
186
原创 前端开发-弹性盒子
弹性盒子是CSS3的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行 排列、对齐和分配空白空间操作方便，布局简单，移动端使用广泛PC端浏览器支持情况较差IE11或更低版本中，不支持或部分支持在盒模型中较为灵活弹性盒模型的内容包括：弹性容器、弹性子元素——项目原理：为父元素设置flex属性，控制子元素的位置及排列方式应用场景 : 移动端。
2022-10-17 20:41:54
137
原创 前端开发之css3基础
是css技术的升级版本，在css2的基础上，新增了许多特性，弥补了css2的不足，使web页面的开发变得更加高效、便捷css3按模块化进行设计，比较重要的css3模块包含、 选择器、框模型、背景和边框、文本效果、2D|3D转换、动画、多列布局、用户界面css3优点: CSS3是完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。
2022-10-15 19:36:09
41
原创 HTML5
html经过了第5次重大改版,增加了一些语义化的标签 高版本浏览器支持,ie9以下不支持, html5是向后兼容的,原来html4的 标签仍然可以用。
2022-10-13 22:02:16
69
原创 前端开发-布局技巧
当前，新冠疫情的防疫已进入新常态新阶段，如何防患于未然，把基层常态化防控的藩篱扎得更牢，显得愈加重要。当前，新冠疫情的防疫已进入新常态新阶段，如何防患于未然，把基层常态化防控的藩篱扎得更牢，显得愈加重要。当前，新冠疫情的防疫已进入新常态
2022-10-12 16:26:20
282
原创 前端开发之PS应用
Adobe Photoshop，简称“PS”]，是由Adobe 开发和发行的[图像处理软件]。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。
2022-10-10 20:49:41
395
原创 前端开发-项目规范
meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!小U课堂是优就业打造的在线实用技能学习平台，我们要完成 首页、同步课程、在线练习，精品课程、视频详情、登录、注册页面、个人中心等静态页面的制作。- 如标题根据重要性用 h1-h6不同等级的标签标记 、段落标记用p，结构简章重复的部分用 ul、li标签。
2022-10-09 20:58:39
429
原创 前端开发-阿里巴巴质量图标
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。如果添加新的图标，可以把这些图标添加到已有的项目文件，这样原来的图标和这次新添加的图标就可以在新的一个文件里了。font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。如果添加新的图标，需要再新下载一个文件，且这个文件的图标与上个文件的图标不能在一个文件中，是两个独立的文件。3.解压文件，把文件放到代码中(此时下载的这个文件包括上次选的图标，也包括这次选的新的图标)
2022-10-08 22:33:56
146
原创 前端开发-BFC
webkit-box-orient必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。内部的Box会在垂直方向，一个接一个地放置 Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)，
2022-09-29 22:51:48
133
原创 前端开发-精灵技术
好看的客服小姐姐一般适用于小图片，（小图标，小背景），不适合大背景布局。帮助与支持2、限定容器的大小---（根据要显示图标的大小）首页
2022-09-28 21:59:41
258
原创 前端开发第九天-定位小讲解
浮动：使用float脱离文档流，其他的元素会无视这个元素，但是其它盒子内的文本，图片、表单元素依然会为这个元素让出位置，环绕在周围。相对于元素在正常文档流中的位置移动它，把一个正常文档流中的元素从它的默认位置按坐标进行相对移动。表示将元素放在正常文档流的默认位置，html元素的默认值，也就是没有定位，遵循正常的文档流布局方式。定位：使用position脱离文档流，其他的元素完全无视他，包括里面的文本，图片、表单元素。未定宽度的块级元素适应元素的内容，（不能继承父元素的宽度，手动继承 width：100%）
2022-09-27 22:07:41
153
原创 前端开发第八天-浮动小知识
浮动：浮动可以使元素【脱离文档流】，【按照指定的方向进行排列】，直到遇到遇到父元素的边界或者另一个浮动元素【停止】在浮动元素的最后加一个空的块级元素，此元素本身不浮动，并且给元素添加清除浮动的属性 clear 属性。给父元素添加overflow属性，overflow不为 visible 默认值，其它值都可以实现。/* 触发滚动条 强制加上水平和垂直的滚动条 *//* 触发滚动条 前置条件有内容被隐藏 */content: "";给浮动元素的父元素添加 clearfix。
2022-09-26 22:01:02
72
原创 前端开发的第七天-特性总结
2.行级元素里面只能容纳文本或者行级元素（不能往行级元素里面嵌套快级元素）本身属性为display:inline-block:的元素都是行内块元素。行内块级特性总结：1.默认并排显示，可以设置宽高，宽度和高度取决内容。2.在不设置宽度的情况下：块级盒子的宽度是它父级元素内容的宽度。3.在不设置高度的情况下：块级盒子的高度是它本身内容的高度。本身属性为display:inline:的元素都是行级元素。本身属性为display:block:的元素都是块级元素。1.默认是并排显示，不能设置宽高，宽高取决于内容。
2022-09-25 21:17:00
61
原创 前端开发的第六天
2.1 继承性2.1.1 概念父元素向后代元素传递属性的机制。2.1.2、表现后代元素会继承父元素的属性。2.1.3、总结常用可继承的属性font-size、font-style、font-weight、font-family、font、text-align、text-indent、cursor、list-style等2.1.4、强制继承每个CSS属性都接受这些值inherit，表示强制开启了继承”。2.1.5、作用恰当地使用继承可以简化代码，降低CSS样式的复杂性。3.2、优先级。
2022-09-23 10:23:50
42
原创 前端开发的第五天
CSS盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距、边框、填充、和实际内容。（即装东西的容器）所有 HTML 标签可以看作盒子，在 CSS 中，"box model" 这一术语是用来设计和布局时使用的。（即网页布局就是利用 CSS 摆盒子）正在上传…重新上传取消正在上传…重新上传取消。
2022-09-23 09:18:56
34
原创 前端开发的第四天
如果用于字号，相对于父元素字号进行计算，如果用于其它属性，相对于当前元素的字号进行计算。数值与当前的字号相乘来设置行间距 number*font-size = 行高。700相当于bold；line-through 删除线 穿过文本的一条线。rgb(0,0,0) 0-255之间。语法： font：字体风格 字体粗细 字号/行高 字体系列;margin-right: 50px 右外边距。
2022-09-20 22:01:46
44
原创 前端开发第三天
CSS中的注释以"注释以/*开头，以*/结尾,开始和结束中间为注释内容。相对于行内样式来说,代码可以重复使用: 作用范围大于行内样式:结构样式半分离。内部样式:适用于单个页面拥有特殊样式时使用,结构样式时[半分离状态]每条声明由一个属性和一个值组成，属性与属性值之间以【冒号】分隔，用【分号】将每个声明分开。行内样式:适用于某个元素拥有特殊样式时使用.结构样式[不分离]外部样式:适用于多个页面拥有特殊样式时使用,结构样式[相分离]
2022-09-19 21:52:25
113
原创 前端开发的第二天
width/height属性作用:指定图片宽度/高度注意：值可以不带单位默认px，只指定宽或高属性其中一个，另一个按照原比例等比缩放代码演示(3)默认样式多张图片可以交列在一行显示默认产生下间隙(4)典型应用作为内容展示的图像：产品图、广告图、详情页、文章页中插图。
2022-09-17 17:29:35
55
原创 HTML及其浏览器
从狭义上讲，Web前端就是使用HTML、CSS、JavaScript等专业技能和工具将产品的UI设计稿实现成网站产品，涵盖用户PC端、移动端等网页，处理视觉和交互问题。 浏览器内核。欧朋： opera （英文名） blink（内核）以前内核是：presto【blink 眨眼的意思】2.网页:网页时网站中的一员 构成网页最基本的元素: 图片.链接.文字.声音.视频等元素组成。
2022-09-15 23:22:42
388
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人