- 博客(26)
- 收藏
- 关注
RSS订阅原创 什么是弹性盒子
align-self属性：调整自身在侧轴的对齐方式，弹性容器中被选中子项的对齐方式（设置在子元素中）flex是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。- space-evenly:弹性项目平均分布在该行上,相邻项目的间隔，项目与容器之间空间相等。- justify-content 属性：设置主轴的对齐方式,弹性子元素在主轴方向上的对齐方式,- align-content: space-between;
2023-02-24 17:24:54
174
原创 Gird网格布局
设为网格布局以后，容器子元素（项目）的float、display: inline-block、vertical-align和column-*等设置都将失效。- grid-column属性是grid-column-start和grid-column-end的合并简写形式。表示共两列，每列各100px。- grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。- place-self属性是align-self属性和justify-self属性的合并简写形式。
2023-02-24 17:21:55
76
原创 矢量图标与移动端布局
一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px。这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。移动端浏览器：百度浏览器，火狐浏览器，谷歌浏览器，uc浏览器，360浏览器，qq浏览器，苹果浏览器，猎豹浏览器，搜狗浏览器，2345浏览器等等。
2023-02-24 17:18:55
68
原创 过渡动画transition
## css3过渡动画——transition属性- 语法```csstransition: transition-proterty transition-duration transition-timing-function transition-delay;transition: css样式 动画的执行时间 速度类型 动画的延迟时间; 多个css属性用逗号隔开 transition: transform 2s, background-color 2s;注意：谁发生了属性的改变 就加在谁身上```-
2023-02-24 17:17:44
57
原创 响应式开发
在设置分界点时，要注意先后顺序，当使用max-width数值大的在前面，数值小的在后面；@media screen and (min-width:1200px){ ... }/* 大型设备（大台式电脑，1200px 以上） */@media screen and (min-width:768px) { ... } /* 小型设备（平板电脑，768px 以上） */@media screen and (min-width:992px){ ... }/* 中型设备（台式电脑，992px 以上） */
2023-02-24 17:14:12
63
原创 HTML第二十天
media screen and (min-width:1200px){ ... }/* 大型设备（大台式电脑，1200px 以上） *//* 以上代码将实现父元素宽度小于图像本身宽度时，图像跟随父元素改变，当父元素宽度大于图片时，图片宽度以自身本身宽度显示 *//* 图片的大小会根据父元素宽度改变而改变，图片高度为auto,图像自身宽高比例不会发生变化,宽高按照其宽高比进行放大 */以上代码将实现父元素宽度小于图像本身宽度时，图像跟随父元素改变，当父元素宽度大于图片时，图片宽度以自身本身宽度显示。
2022-10-09 00:24:43
38
原创 HTML第十九天
css3动画库，预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、旋转（rotateIn|rotateOut）、翻转（flip）、淡入淡出（fadeIn|fadeOut）等动画效果。animation: 动画名称 动画执行时间 动画速度曲线 延迟时间 动画播放次数 动画运动方向 动画结束之后显示的状态。响应式布局是根据设备屏幕宽度不同适当调整标签显示的布局，从而在每种设备屏幕宽度下呈现的界面是不同的。1、过渡动画是需要触发条件的(hover事件或click事件等)，只能完成简单的动画。
2022-10-09 00:23:58
286
原创 HTML第十八天
一个值（沿着水平方向位移），两个值 | 像素px | transform: translateX();| 一个值（沿着水平方向倾斜）、两个值 | deg角度 | transform: skewX();[image-20210424182819043](C:/Users/Administrator/Desktop/web/系统班课程大纲/day17/笔记/image-20210424182819043.png)- a 指的是一个旋转角度值，如果为正值，元素围绕 Z 轴顺时针旋转；
2022-10-09 00:22:49
82
原创 HTML第十七天
原理：确定基准值以常见的750像素宽度的设计稿为例，根据vw单位的原理100vw = 750px,即 1vw = 7.5px，根据设计稿中的px值，转换成对应的vw值进行布局，也可以直接写px。对于安卓手机而言，使用率最高的就是webkit内核，国内目前尚无自主研发的内核，都是基于开源内核webkit上进行的二次开发，并不是完全的自主内核。移动端浏览器：百度浏览器，火狐浏览器，谷歌浏览器，uc浏览器，360浏览器，qq浏览器，苹果浏览器，猎豹浏览器，搜狗浏览器，2345浏览器等等。
2022-10-09 00:21:51
70
原创 HTML第十六天
四周对齐，子元素之前、之间、之后都留有空白空间，且空间自行分配,项目之间的间隔比项目与边框的间隔大一倍。* align-self属性：调整自身在侧轴的对齐方式，弹性容器中被选中子项的对齐方式（设置在子元素中）- justify-content 属性：设置主轴的对齐方式,弹性子元素在主轴方向上的对齐方式,默认值，主轴顶端对齐。
2022-10-09 00:20:56
403
原创 HTML第十五天
percentage：以父元素的百分比来设置背景图像的宽度和高度。/* - ele:nth-last-of-type(n){ } 选择一组元素中特定类型的倒数第n个ele元素 *//* - ele:nth-of-type(n){ } 选择一组元素中特定类型的第n个ele元素 */- ele:nth-last-child(n){ } 选择一组相同元素中的倒数第n个元素，n表示数值、关键词、表达式。/* - ele:last-of-type 选择一组元素中特定类型的最后一个子元素的每个元素 */
2022-10-09 00:20:10
34
原创 HTML第十四天
Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的。- 用于输入电话号码的文本输入域，服务于触屏网页开发，在电脑网页中无效，在触屏网页中点击输入域，显示虚拟电话键盘（0-9、*、#）range类型的min值默认为0，max属性默认值为100。- 是css技术的升级版本，在css2的基础上，新增了许多特性，弥补了css2的不足，使web页面的开发变得更加高效、便捷。
2022-10-09 00:19:22
44
原创 html第十三天
文件”--“存储为web所用格式”（“导出”--“存储为web所用格式” 或 Ctrl + shift + alt + s）-- “预设”（选择jpeg高|gif|png),修改图片品质，单击“存储”--选择保存文件的位置，修改文件名，选择格式（仅限图像），切片（选中的切片（按住shift选择）或所有用户切片），设置--（其它--设置切片命名及方式）单击“保存”PxCook（像素大厨）是一款切图设计工具软件。
2022-10-09 00:18:27
95
原创 html第十二天
image-20210414133803719](C:/Users/Administrator/Desktop/web/系统班课程大纲/day08/笔记/image-20210414133803719.png)将中间背景盒向右移动左侧盒子宽度（left: 左侧盒宽度）、右侧背景盒向移动中间盒子宽度（left: 中间盒宽度）可以沉迷，可以抱怨，可以奔溃，，可以抱怨，可以奔溃，人要有自愈能力可以沉迷，可以抱怨，可以奔溃，，可以抱怨，可以奔溃，人要有自愈能力。左、中、右盒分别设置宽度，高度（最小高度）、浮动。
2022-10-09 00:17:37
380
原创 html第十天
div class="right">出师表出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师表出师表出师表 原因：浮动 脱离标准流不脱离文本流 浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字 反而还会环绕浮动的盒子。-- 原因：浮动 不会脱离文本流 浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字 反而还会环绕浮动的盒子。spread：阴影大小。可选 单位： px。
2022-10-08 02:38:47
52
原创 html第九天
如果元素的四个边的位置是使用“top”、“right”、“bottom”和“left”来描述的，那么元素的“height”和“width”将隐式地由偏移量决定。注意：所有的元素都能使用以上的属性，元素脱离正常文档流之后，不再区分块级和行级元素，宽度没有设置时，由内容撑开，行内元素可以设置宽高，类似于行内块元素。表示“将元素放在文档布局流的默认位置，HTML 元素的默认值，即没有定位，遵循正常的文档流对象。没有定位父级时相对于html进行定位，有定位父级时相对于最近的定位父级进行定位。
2022-10-08 02:36:47
40
原创 html第八天
边偏移定位元素的位置，使用“top”、“right”、“bottom”和“left”来描述。“background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置。我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图介。相对于元素本身的位置进行一个位置调整，占位依然在原来的位置，也就是说，元素设置相对定位后，其原来的位置还占位。
2022-10-08 02:35:58
49
原创 html第七天
4.在浮动元素之后，与浮动元素呈并列关系的位置，加一个不浮动块元素（空的div标签（div本身不浮动，没有尺寸）），在空的div标签上加上属性：clear：both;概念：当样式声明发生冲突时，用户代理需要确定样式声明的最终值，既要考虑样式的来源又要考虑样式的特殊声明又要考虑优先级、以及先后顺序 ，这个过程就叫做层叠。文档中可以显示的对象在排列时所占的位置，实际上就是一个网页内标签正常从上到下，从左到右的排列，比如，块级标签会独占一行，行级标签会在一行显示。不浮动，默认值，并且会显示在其文本中出现的位置。
2022-10-08 02:34:57
41
原创 html第六天
特殊情况下我们需要进行元素的模式转换，改变默认元素模式使其拥有另一种元素模式的特性，使用display属性能够将三者任意转换。- 行内元素只能容纳文本或者其他行级元素（此处请注意，不要在行级元素中嵌套块级和行内块元素）。- 默认横向显示——默认水平布局，相邻的行级元素会在同一行显示，直到一行排不下，才会换行；- 默认横向显示——默认水平布局，相邻的行级元素会在同一行显示，直到一行排不下，才会换行。样式不冲突，优先级没有意义。- 本身属性为display:inline-block的元素称为行级块元素。
2022-10-08 02:34:09
29
原创 html第五天
image-20210427201245343](C:/Users/Administrator/Desktop/web/系统班课程大纲/day04/笔记/image-20210427201245343.png)[](C:/Users/Administrator/Desktop/web/系统班课程大纲/day04/笔记/1-元素并列.png)[](C:/Users/Administrator/Desktop/web/系统班课程大纲/day04/笔记/2-元素嵌套.png)两个值：上下边框 左右边框。
2022-10-08 02:33:14
25
原创 html第四天
image-20210413093344913](C:/Users/Administrator/Desktop/web/系统班课程大纲/day04/笔记/image-20210413093344913.png)1.英文的关键词：red红色，orange橙色，yellow黄色，green绿色，cyan青色，blue蓝色，purple紫色。CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：外间距、边框、内填充、和实际内容。
2022-10-08 02:32:26
37
原创 html第三天
image-20210427175625072](C:/Users/Administrator/Desktop/web/系统班课程大纲/day03/笔记/image-20210427175625072.png)[image-20210427204252842](C:/Users/Administrator/Desktop/web/系统班课程大纲/day03/笔记/image-20210427204252842.png)按住alt键，放大图纸，为了测量更加准确，滚动滚轮，向外滚表示放大，向内滚表示缩小。
2022-10-08 02:31:29
28
原创 html第二天
image-20210427203749840](C:/Users/Administrator/Desktop/web/系统班课程大纲/day03/笔记/image-20210427203749840.png)[image-20210427203612642](C:/Users/Administrator/Desktop/web/系统班课程大纲/day03/笔记/image-20210427203612642.png)单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
2022-10-08 02:30:24
35
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人