- 博客(26)
- 收藏
- 关注
RSS订阅原创 动画23.2.22
取值：linear匀速 ease默认值 ease-in以慢速开始 ease-out以慢速结束 ease-in-out慢速开始和结束。（动画执行时间 单位：s、ms 1s=1000ms）animation-iteration-count：infinite；允许负值（-1 使动画立马开始，但是跳过1s进入动画）（动画名称 绑定关键帧动画的）animation-play-state：；
2023-02-24 18:45:00
66
原创 屏幕区间设定
在设置分界点时，要注意先后顺序，当使用max-width数值大的在前面，数值小的在后面；@media screen and (max-width:1200px) { ... } /* 中型设备（台式电脑，1200px 以下） */@media screen and (min-width:1200px){ ... }/* 大型设备（大台式电脑，1200px 以上） */@media screen and (min-width:992px){ ... }/* 中型设备（台式电脑，992px 以上） */
2023-02-24 17:46:26
251
原创 媒体查询的引入方式
对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：桌面优先（从桌面端开始向下设计）；如：尽量少使用绝对宽度、百分比布局、弹性盒、弹性网格\浮动技巧、定位技巧的应用、box-sizing,显示隐藏的应用。无论基于那种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化，主要的布局方式主要有以下几种。以上代码将实现父元素宽度小于图像本身宽度时，图像跟随父元素改变，当父元素宽度大于图片时，图片宽度以自身本身宽度显示。/* 横屏 宽大于高 */
2023-02-24 17:44:58
221
原创 响应式web开发
具体的实践方式由多方面组成，包括弹性盒、弹性网格布局、响应式图片、CSS media query的使用等。这样就可以不必为不断到来的新设备做专门的版本设计和开发了。响应式设计的页面会根据用的的行为以及设备的环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。背景：移动互联网的发展，为了满足移动互联网多终端显示的需求 催生了响应式式布局的诞生，1.虚拟窗口：创建虚拟窗口，自定义窗口的大小和缩放功能，能适应移动设备的屏幕大小。1.可以根据设备显示器的特性，来设置不同的css的样式。
2023-02-24 17:41:59
102
原创 网格布局2
简写：grid-column属性是grid-column-start和grid-column-end的合并简写形式。place-items属性是align-items属性和justify-items属性的合并简写形式。grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。- place-self属性是align-self属性和justify-self属性的合并简写形式。grid-column-start属性：左边框所在的垂直网格线。一个双引号一行，一个空格一列。
2023-02-24 17:35:34
129
原创 23.2.24 CSS Grid网格布局
repeat（）函数：接受2个参数，第一个为重复的次数，第二个为所需要的数值，多个值也可以重复。fr关键字（fraction）---弹性系数 按照比例分配剩余空间 一般与绝对单位搭配使用（1fr和2fr 后者是前者的两倍）；column-rule-style：线型 solid dashed...；column-rule-width：线型 solid dashed...；列的宽度：column-width：100px；简写：column-rule：10px solid red；百分比相对于容器进行计算。
2023-02-24 17:16:09
91
原创 2D 23.2.23
transform：scale（x，y）沿着x轴和y轴缩放 只有一个值时，沿着水平和垂直方向等比例缩放。例：transform：translate3d（1，1，1，45deg）;transform：translate3d（x，y，z，度数）;平移属性：transform:translate(x,y)；ease（默认值）慢速开始---速度变快---慢速结束。
2023-02-23 21:31:09
57
原创 Day21
流式布局是宽度使用百分比代替固定宽度px，高度大多使用px来固定，因此在大屏幕手机下显示的效果会变成页面元素的宽度被拉长，高度和原来保持一致。rem---css3中的一个单位，相对单位，根据【根元素】的字号大小进行计算的单位。Height：设置viewport（电脑屏幕的视口）的高度（一般情况用不到）缺点：1、实际显示的效果不友好，屏幕越大，宽度被拉的很长，容易变形。width：虚拟窗口的屏幕宽度 device-width设备宽。允许用户手动缩放，默认值。initial-scale：页面的初始缩放比。
2023-02-22 21:45:00
29
原创 Day20
缩小的宽=（当前元素的宽*shrink值）/（元素1*元素1的shrink值+元素2*元素2的shrink值...）*溢出的空间宽度（子元素宽度之和-父盒子宽度）定义弹性盒子元素的基准值（参与计算的最终值---1、基于它计算了容器的剩余空间 2、基于它计算增长以后的最终值）弹性子元素--类似于行内块元素，如果不设置宽高，由内容撑开；默认的交叉轴（侧轴）方向---y轴的方向，水平向下（上方为侧轴起点，下方为侧轴的终点）默认的主轴方向---x轴的方向，水平向右（左侧边为主轴的起始点，右侧边为主轴的终点）
2023-02-21 21:45:00
33
原创 Day19
语法：background：repeating-radial-gradient（渐变形状，圆心，颜色1 范围1；语法：background：repeating-radial-gradient（渐变形状，圆心，颜色1 范围1；Background：repeating-linear-gradient（方向，颜色1，范围1，颜色2，范围2...）语法：background：radial-gradient（渐变的形状，颜色1 范围1，颜色2 范围2...）;（方向，颜色1，范围1，颜色2，范围2...）
2023-02-20 19:30:00
39
原创 Day18
ele：nth-last-child（n）选择一组相同元素中的倒数第n个元素，n表示数值、关键词、表达式。ele：nth-child（n）{选择一组相同元素中的第n个元素，n表示数值、关键词、表达式}/* 左上 右上、左下 右下*/.wrap div[class*=n]{带有class属性,并且属性值有n的div元素}ele：nth-last-of-type（n）{选择一组元素中特定类型的倒数第n个元素}ele：nth-of-type（n）{选择一组元素中特定类型的第n个元素}/* 四个角都相同 */
2023-02-19 17:15:00
37
原创 Day17
input type="text" placeholder="提示信息" name="nane" autocomplete="on" autofocus>-- 包括完整的传输协议以及路径，在提交表单时，自动验证url的值 -->-- 验证邮箱 -->
2023-02-18 11:07:33
34
原创 Day16
Padding提前延伸背景 margin负值抵消padding的占位。原理：盒子的层层嵌套，利用内盒子高度变化，外盒子的高度也会同步变化。：指多列子元素在父元素中实现等高视觉效果的布局技巧。原理：利用padding和margin负值相互抵消。
2023-02-13 22:39:23
38
原创 Day17
input type="text" placeholder="提示信息" name="nane" autocomplete="on" autofocus>-- 包括完整的传输协议以及路径，在提交表单时，自动验证url的值 -->-- 验证邮箱 -->
2023-02-13 22:38:01
36
原创 Day18
ele：nth-last-child（n）选择一组相同元素中的倒数第n个元素，n表示数值、关键词、表达式。ele：nth-child（n）{选择一组相同元素中的第n个元素，n表示数值、关键词、表达式}/* 左上 右上、左下 右下*/.wrap div[class*=n]{带有class属性,并且属性值有n的div元素}ele：nth-last-of-type（n）{选择一组元素中特定类型的倒数第n个元素}ele：nth-of-type（n）{选择一组元素中特定类型的第n个元素}/* 四个角都相同 */
2023-02-13 22:35:55
39
原创 2023.2.13 Day19
Background：repeating-linear-gradient（方向，颜色1，范围1，颜色2，范围2...）Background：radial-gradient（渐变的形状，颜色1 范围1，颜色2 范围2...）；（方向，颜色1，范围1，颜色2，范围2...）百分比：按照盒子的大小进行百分比计算，宽，高 如果只设置一个值，第二个值会被自动设为auto。h-shadow：阴影的水平偏移量，正数右，负数左，必须属性，单位px。v-shadow：阴影的垂直偏移量，正数下，负数上，必须属性，单位px。
2023-02-13 22:33:00
47
原创 什么是BFC
块级格式化上下文”它是一个独立的渲染区域，只有block-level box（当前盒子）参与，它规定了内部的lock-level box如何布局，并且与这个区域外毫不相干。每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)即使存在，浮动也是如此。Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。BFC渲染规则（特性）
2023-02-03 21:28:30
34
原创 2023.2.2精灵技术
css精灵英文叫法“CSS sprites”，通常被解释为“CSS 图像拼合”或“CSS 贴图定位”，其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS“background image”，“background-repeat”，“background-position”的组合进行背景定位，background-position精确的定位出背景图片的位置。/* 溢出显示省略号 *//* 强制不换行 */适用于一般小图片（小图标、小背景），不适合大背景大布局的图片。/* 溢出隐藏 */
2023-02-02 11:47:14
49
原创 Day08
隐藏 隐藏该元素，并且该元素所占的空间也不存在了（占位）注意：name属性是必须属性，只有设置了name属性表单元素在提交的时候才会传递他们的值。隐藏 隐藏该元素，并且该元素所占的空间也不存在了(不占位）input标签：是最重要的表单元素。value属性：默认显示文本是“提交”可以使用value属性修改里面的内容。value属性：默认显示文本是“重置”可以使用value属性修改里面的内容。通过label标签的for属性值与相关元素的id值实现绑定。属性：src:指定图片的路径 alt:指定替换的文本。
2022-11-11 15:25:32
81
原创 Day07
行内块元素--本身属性为display：inline-block；的元素才能被称为行内块元素。行级元素--本身属性为display：inline；的元素才能被称为行级元素。块级元素--本身属性为display：block；的元素才能被称为块级元素。2、行级元素只能容纳文本或其他的行级元素（不能在行级元素里嵌套块级元素）2、在不设置宽度的情况下：块级元素的宽度是他父级元素内容的宽度。3、在不设置高度的情况下：块级元素的高度是他本身内容的高度。html元素分为三大类：块级元素、行级元素、行内块元素。
2022-11-10 22:56:01
106
原创 Day06
描述：当父元素没有padding、border时，子元素与父元素直接相邻，子元素的margin值会传递给父元素并且再次与父元素的margin值发生合并，取两个值中的较大值。css盒模型本质上就是一个盒子，封装周围的html元素，包括：实际内容（weight+height）+内填充（padding）+边框（border）+外间距（margin）margin-top上外边距 margin-bottom 下外边距 margin-left左外边距 margin-right右外边距。上下外边距20、左右外边距30。
2022-11-10 22:54:43
78
原创 Day05（11.8）
margin-top上外边距 margin-bottom 下外边距 margin-left左外边距 margin-right右外边距。border-width:10px 20px 30px 40px 上边框10 右边框20 下边框30 左边框40。上外边距20、右外边距30、下外边距40、左外边距50。border-width:10px 20px 30px 上边框10 左右边框20 下边框30。上下外边距20、左右外边距30。
2022-11-08 22:12:07
224
原创 Day04（11.7）
margin-top上外边距 margin-bottom 下外边距 margin-left左外边距 margin-right右外边距。padding-top上填充 padding-bottom下填充 padding-left左填充 padding-right右填充。九级自重：100~900；注意：如果字体名称里包含空格、汉字、特殊符号，必须加引号“”长度值（px）：16px（浏览器默认字体为16像素）取值：一个字体名称 微软雅黑 浏览器的默认字体。语法：字体风格 字体加粗 字号/行高 字体；
2022-11-07 22:59:49
172
原创 day03
总结：划分表格的语义，实现长表格的分布加载，改变结构顺序，进行优先加载tbody。--定义表格的主体内容 一个表格里面可以包含多个tbody -->使用table标签定义表格，每个表格由若干行（由tr定行），每行被分为若干个单元格（由td定义）-- 表格标题 必须紧跟着table标签-->以前整个页面的布局都使用的是表格、结构复杂、维护起来麻烦。1、未定宽度和高度的表格，单元格的内容自适应。-- 定义表格页脚内容 -->cellpadding：用的间距来定义单元格中的内容和边框之间。
2022-11-03 20:48:33
26
原创 标签.html
html：Hyper Text mark-up Language：超文本标记语言。内容注意事项：P标签里不能再嵌套【块级标签】；注意事项：h1标签在一个页面中只能有一个，h2~h6可以有多个。作用：用来划分网页的区块，里面可以嵌套任何标签。搭建网页结构的基本标签---盒子：无语义标签。双标签：内容应用场景：文章中的段落，页面中的文字块。单标签：或h系列标签：标题标签 h1~h6。
2022-11-01 19:49:10
75
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人