- 博客(27)
- 收藏
- 关注
RSS订阅原创 响应式的应用
media screen and (max-width:1200px) { ... } /* 中型设备（台式电脑，1200px 以下） */@media screen and (min-width:1200px){ ... }/* 大型设备（大台式电脑，1200px 以上） */@media screen and (min-width:992px){ ... }/* 中型设备（台式电脑，992px 以上） *//* 小屏幕 768px-992px 屏幕宽度在768px以上显示的颜色*/
2022-10-26 19:46:45
72
1
原创 动画的关键帧
css3动画库，预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、旋转（rotateIn|rotateOut）、翻转（flip）、淡入淡出（fadeIn|fadeOut）等动画效果。animation: 动画名称 动画执行时间 动画速度曲线 延迟时间 动画播放次数 动画运动方向 动画结束之后显示的状态。- 允许负值，（-2s 使动画马上开始，但跳过 2 秒进入动画)2.ease 默认值 慢速度开始--速度变快--慢速度结束。5.ease-in-out 以慢速度开始和结束的过渡效果。
2022-10-26 19:42:26
156
原创 弹性盒子的属性
align-self属性：调整自身在侧轴的对齐方式，弹性容器中被选中子项的对齐方式（设置在子元素中）flex是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。- space-evenly:弹性项目平均分布在该行上,相邻项目的间隔，项目与容器之间空间相等。- justify-content 属性：设置主轴的对齐方式,弹性子元素在主轴方向上的对齐方式,- justify-content: center;
2022-10-25 21:31:45
140
原创 弹性盒子的
将容器设置为flex布局之后，子元素中的float、clear、vertical-align属性都会失效。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行 排列、对齐和分配空白空间。> 弹性子元素-类似于行内块元素，如果不设置宽高，由内容撑开；- 原理：为父元素设置flex属性，控制子元素的位置及排列方式。- 弹性盒模型的内容包括：弹性容器、弹性子元素——项目。- 弹性盒子是CSS3的一种新的布局模式。- - 操作方便，布局简单，移动端使用广泛。- 在盒模型中较为灵活。
2022-10-25 21:29:17
45
原创 怎末在盒子居中
子父元素宽度固定，父元素设置 text-align：center，子元素设置display：inline-block，并且子元素不能设置浮动，否则居中失效。- 子元素相对于父元素绝对定位，子元素 top，left 设置 50%，子元素margin-top 和 margin-left 减去各自宽高的一半。- 子父元素宽度固定，子元素设置 margin：auto，并且子元素不能设置浮动，否则居中失效。- 子元素相对于父元素绝对定位，子元素上下左右全为 0，然后设置子元素margin：auto。
2022-10-25 21:26:08
44
原创 新增的选择器
* - ele:nth-last-of-type(n){ } 选择一组元素中特定类型的倒数第n个ele元素 *//* - ele:nth-of-type(n){ } 选择一组元素中特定类型的第n个ele元素 */- ele:nth-last-of-type(n){ } 选择一组元素中特定类型的倒数第n个ele元素。- ele:nth-last-of-type(n){ } 选择一组元素中特定类型的倒数第n个ele元素。选择一组相同元素中的倒数第n个元素，n表示数值、关键词、表达式 */
2022-10-25 21:23:11
47
原创 是css3
Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的。- 是css技术的升级版本，在css2的基础上，新增了许多特性，弥补了css2的不足，使web页面的开发变得更加高效、便捷。- 有些css3的属性还只是最新版的预览版，还没有正式发版, 没有形成标准,只是某些浏览器的专属属性 ,就需要加前缀。选择器、框模型、背景和边框、文本效果、2D|3D转换、动画、多列布局、用户界面。
2022-10-25 21:21:03
43
原创 新增的表单元素
用于输入电话号码的文本输入域，服务于触屏网页开发，在电脑网页中无效，在触屏网页中点击输入域，显示虚拟电话键盘（0-9、*、#）- 包含e-mail地址的输入域，在提交表单时，自动验证email域的值。- 包含访问协议的完整路径的输入域，在提交表单时，自动验证url域的值。
2022-10-25 21:17:57
41
原创 多媒体元素
MP3 audio/MPEG 支持浏览器 chrome、firefox、OPera10+、IE9+、safari。- wav audio/wav 支持浏览器 chrome、Firefox、Opera、Safari。- MPEG4--mp4 支持的浏览器chrome、Firefox、Safari、IE9+- WebM 支持的浏览器chrome、Firefox、Opera。- ogg 支持的浏览器chrome、Firefox、Opera。- src属性：音频文件的路径。
2022-10-25 21:16:12
85
原创 新增的软件
百度静态资源库：（国内推荐使用）http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js。- Google 资源库：（不稳定）http://html5shiv.googlecode.com/svn/trunk/html5.js。● 标签定义 frameset 中的一个特定的窗口（框架）● 标签规定文本的字体、字体尺寸、字体颜色。● 标签定义目录列表。● 呈现大号字体效果。
2022-10-25 21:13:42
42
原创 新增的语义
注意：使用javascript新增元素的方法解决，新增的出来的html5标签是行级元素，需要css把行内元素转为块。- 典型应用：论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组，或者其他独立的内容项目。- 作用：元素表示文档、页面、应用或网站中的独立结构，可以成为可独立分配的或可复用的结构。- 典型应用：主导航、侧边栏导航、页内导航、菜单、面包屑导航、分页、目录和索引等。被主体内容引用的，相对独立的内容块，如：图表、代码块、图片等。- 定义文档中的节（页面中内容的区段、文章中的章节）。
2022-10-25 21:11:46
48
原创 弹性盒子的
align-self属性：调整自身在侧轴的对齐方式，弹性容器中被选中子项的对齐方式（设置在子元素中）flex是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。- space-evenly:弹性项目平均分布在该行上,相邻项目的间隔，项目与容器之间空间相等。- justify-content 属性：设置主轴的对齐方式,弹性子元素在主轴方向上的对齐方式,- align-content: space-between;
2022-10-17 21:21:28
44
原创 新增的html5
用于输入电话号码的文本输入域，服务于触屏网页开发，在电脑网页中无效，在触屏网页中点击输入域，显示虚拟电话键盘（0-9、*、#）- wav audio/wav 支持浏览器 chrome、Firefox、Opera、Safari。- 典型应用：论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组，或者其他独立的内容项目。- MPEG4--mp4 支持的浏览器chrome、Firefox、Safari、IE9+- 作用：元素表示文档、页面、应用或网站中的独立结构，可以成为可独立分配的或可复用的结构。
2022-10-14 08:31:39
75
原创 等高布局的
当前，新冠疫情的防疫已进入新常态新阶段，如何防患于未然，把基层常态化防控的藩篱扎得更牢，显得愈加重要。当前，新冠疫情的防疫已进入新常态新阶段，如何防患于未然，把基层常态化防控的藩篱扎得更牢，显得愈加重要。当前，新冠疫情的防疫已进入新常态
2022-10-12 19:47:55
41
原创 项目的规划
meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!小U课堂是优就业打造的在线实用技能学习平台，我们要完成 首页、同步课程、在线练习，精品课程、视频详情、登录、注册页面、个人中心等静态页面的制作。- 如标题根据重要性用 h1-h6不同等级的标签标记 、段落标记用p，结构简章重复的部分用 ul、li标签。
2022-10-12 08:31:43
48
原创 ps 的使用
Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出，以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。Photoshop默认保存的文件格式，可以保留所有有图层、色版、通道、蒙版、路径、未栅格化文字以及图层样式等。- 色彩丰富的图片（摄影图像（产品图，照片，渐变，banner图））
2022-10-10 22:03:32
210
原创 文字的阴影
text-shadow: x轴偏移量 y轴偏移量 模糊值 阴影颜色;> 可以在一个文字中设置一个或多个阴影，阴影之间用逗号隔开。h-shadow 必需，水平阴影的位置，允许负值；v-shadow 必需，垂直阴影的位置，允许负值；color 可选，阴影的颜色；blur 可选，模糊距离；
2022-10-10 08:26:39
150
原创 阿里图标引入
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。如果添加新的图标，可以把这些图标添加到已有的项目文件，这样原来的图标和这次新添加的图标就可以在新的一个文件里了。font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。如果添加新的图标，需要再新下载一个文件，且这个文件的图标与上个文件的图标不能在一个文件中，是两个独立的文件。3.解压文件，把文件放到代码中(此时下载的这个文件包括上次选的图标，也包括这次选的新的图标)
2022-10-08 21:45:01
214
原创 一些概念的东西
它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。用来限制在一个块元素显示的文本的行数。- 每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)，>-webkit-box-orient必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。/* 控制要显示的行数 */
2022-09-29 21:41:42
52
原创 精灵的技术### 1、CSS 精灵**概述：**CSS精灵英文叫法 `CSS sprites`，通常被解释为“CSS 图像拼合” 或 “CSS 贴图定位”，其实就是把网页中一些背景图片整合到一
利用 CSS “background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景。CSS精灵英文叫法 `CSS sprites`，通常被解释为“CSS 图像拼合” 或 “CSS 贴图定位”，其实就是把网页中一些背景图片整合到一张图片文件中，再。- hidden 隐藏该元素但是该元素所占的内存空间还存在，即“隐身效果”。- none：隐藏该元素并且该元素所占的空间也不存在了。
2022-09-28 20:41:35
47
原创 浮动的解析
img src="D:/web/2021/2021一阶段资料/day07/笔记/media/day07_01.jpg" style="zoom:50%;>如果元素的四个边的位置是使用“top”、“right”、“bottom”和“left”来描述的，那么元素的“height”和“width”将隐式地由偏移量决定。相对于元素在正常的文档流中的位置移动它，把一个正常布局流中的元素从它的默认位置按坐标进行相对移动。表示“将元素放在文档布局流的默认位置，HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
2022-09-27 20:58:59
29
原创 浮动的问题
网页中有很多布局效果，标准流没有办法完成，使用可以利用浮动改变元素默认的排列方式，举例说明（如网页中横向排列的模块或者一左一右排。浮动可以使元素【脱离文档流】，【按照指定方向排列】，直到遇到父元素的边界或另一个浮动元素【停止】。- 描述：在浮动元素的最后加一个空块元素，此元素本身不浮动，且添加样式`clear:both`说明：左侧列固定，左侧浮动，右侧列使用margin-left预留位置，- 优点：内容适应性强，不会在结构上产生冗余代码，可多次重复使用。- 描述：给浮动元素的父元素固定高度。
2022-09-26 21:37:51
29
原创 背景颜色。
font-size、font-style、font-weight、font-family、font、text-align、text-indent、cursor、list-style等。- 当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上，内部和外部样式遵循就近原则。概念：当样式声明发生冲突时，用户代理需要确定样式声明的最终值，既要考虑样式的来源又要考虑样式的特殊声明又要考虑优先级、以及先后顺。指定百分数值将同时应用于元素和图像，左上角是 0% 0%；
2022-09-22 22:00:57
61
原创 边框的属性
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。SS盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距、边框、填充、和实际内容。边框是围绕内容和内边距之间的一条或多条线，通过边框属性指定一个元素的边框的宽度、样式和颜色。adding可以单独改变元素的上、下、左、右边距，也可以一次改变所有的属性。SSpadding（内边距）属性，定义元素边框与元素内容之间的空间。设置标签所有边框的样式，或者单独地为各边设置边框样式。设置所有边框宽度，或者单独地为各边边框设置宽度。
2022-09-21 20:25:10
226
1
原创 文本属性css
](D:/web/2021/2021一阶段资料/day03/笔记/media/day03_08.png)/*font-family:"宋体","微软雅黑";*//*与上一个相比产生的效果不同，谁在前使用哪一个*/红色： rgb(255,0,0) 、绿色： rgb(0,255,0) 、蓝色： rgb(0,0,255)- 白色： rgb(255,255,255) 、黑色 : rgb(0,0,0)/*font-family:"微软雅黑","宋体";font-family:"微软雅黑abc","宋体";
2022-09-20 21:26:32
49
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人