- 博客(26)
- 收藏
- 关注
RSS订阅原创 响应式web开发
具体的实践方式由多方面组成，包括弹性盒、弹性网格布局、响应式图片、CSS media query的使用等。这样就可以不必为不断到来的新设备做专门的版本设计和开发了。响应式设计的页面会根据用的的行为以及设备的环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。背景：移动互联网的发展，为了满足移动互联网多终端显示的需求 催生了响应式式布局的诞生，1.虚拟窗口：创建虚拟窗口，自定义窗口的大小和缩放功能，能适应移动设备的屏幕大小。1.可以根据设备显示器的特性，来设置不同的css的样式。
2023-02-25 09:58:50
227
1
原创 css网格布局
设为网格布局以后，容器子元素（项目）的float、display: inline-block、vertical-align和column-*等设置都将失效。- space-evenly - 剩余空间均等分布在单元格与单元格，单元格与项目之间。place-content属性是align-content属性和justify-content属性的合并简写形式。所以，单元格之间的间隔比单元格与容器边框的间隔大一倍。- space-between - 剩余空间分布在单元格之间，单元格与容器边框之间没有间隔。
2023-02-25 09:58:45
292
原创 移动端WEB开发
一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px。一种是基于高端机的浏览器运行的WebApp（基于WEB形式的应用程序）移动端浏览器：百度浏览器，火狐浏览器，谷歌浏览器，uc浏览器，360浏览器，qq浏览器，苹果浏览器，猎豹浏览器，搜狗浏览器，2345浏览器等等。
2023-02-25 09:55:59
310
原创 css3过渡动画
transform: translate(x,y) 沿着x轴和y轴移动。- 动画执行时间：默认0s，s|ms(毫秒) 1s=1000ms。2.ease 默认值 慢速度开始--速度变快--慢速度结束。- transform: translateX(x) 沿着x轴移动。- transform: translateY(y) 沿着y轴移动。- transform: scale(x,y) 沿着x轴和y轴缩放。
2023-02-25 09:53:51
166
原创 新型布局--弹性盒子
align-self属性：调整自身在侧轴的对齐方式，弹性容器中被选中子项的对齐方式（设置在子元素中）flex是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。- space-evenly:弹性项目平均分布在该行上,相邻项目的间隔，项目与容器之间空间相等。- justify-content 属性：设置主轴的对齐方式,弹性子元素在主轴方向上的对齐方式,- align-content: space-between;
2023-02-24 19:52:49
266
原创 线性渐变与径向渐变
backgrond: repeating-radial-gradient(渐变形状/圆心, 颜色1 范围1, 颜色2 范围2, ...);background:repeating-linear-gradient(方向, 颜色1 范围1, 颜色2 范围2,...);backgrond: radial-gradient(渐变形状, 颜色1 范围1, 颜色2 范围2, ...);background: linear-gradient(方向, 颜色1 范围1, 颜色2 范围2,...);
2023-02-24 19:52:19
212
原创 盒子阴影与背景
contain:包含，等比例缩放背景图片到完整显示在盒子中，有一边到达边界就停止放大, 可能导致另一边留白 但是背景图可能在区域范围内铺不满（宽高给大点）正数阴影扩大（阴影大小大于盒子大小），负数阴影缩小（阴影大小小于盒子大小），0阴影与盒子同等大小。/* contain:包含，等比例缩放背景图片到完整显示在盒子中，但是背景图可能在区域范围内铺不满（宽高给大点） */- background-clip: content-box;/* 背景被裁剪到边框区域，在内容区、内填充区、边框区域显示，默认值 */
2023-02-24 19:50:35
120
原创 新增表单元素和表单属性
用于输入电话号码的文本输入域，服务于触屏网页开发，在电脑网页中无效，在触屏网页中点击输入域，显示虚拟电话键盘（0-9、*、#）- 包含e-mail地址的输入域，在提交表单时，自动验证email域的值。- 包含访问协议的完整路径的输入域，在提交表单时，自动验证url域的值。
2023-02-24 19:47:01
120
原创 新多媒体元素
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属性：音频文件的路径。
2023-02-24 19:44:56
85
原创 新html5
注意：使用javascript新增元素的方法解决，新增的出来的html5标签是行级元素，需要css把行内元素转为块。问题概述：IE8浏览器中还没有添加对HTML5新标签的支持，当在页面中使用HTML5新标签时，新标签不兼容。- 典型应用：论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组，或者其他独立的内容项目。- 作用：元素表示文档、页面、应用或网站中的独立结构，可以成为可独立分配的或可复用的结构。被主体内容引用的，相对独立的内容块，如：图表、代码块、图片等。datetime属性；
2023-02-24 19:36:12
66
原创 布局技巧-等高布局 圣杯布局 双飞翼布局
移动.right通过margin-left:-200px；- 移动.left通过margin-left:-100%；- 将.left，.center，.right盒子放入最内层的背景盒子.bg3里。- 准备三个负责背景的盒子.bg1，.bg2，.bg3，HTML结构上层层嵌套。- 移动.right通过margin-left:-200px；- .center宽度100%，.left，.right固定宽度。- 移动.left通过margin-left:-100%；
2023-02-24 19:32:58
102
原创 开辟BFC空间
它是一个独立的渲染区域，只有block-level box参与；并且与这个区域外毫无相干。4，position属性为absolute和fixed；5，display属性值为inline-block；2，overflow属性值不为visible；是web页面中盒模型布局的css渲染模式。3.float属性不为none；BFC “块级格式化上下文”1，防止magin的塌陷；
2023-02-24 19:29:04
63
原创 css精灵技术
CSS精灵英文叫法 `CSS sprites`，通常被解释为“CSS 图像拼合” 或 “CSS 贴图定位”，其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置。>-webkit-box-orient必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
2023-02-24 17:24:15
160
原创 css定位
img src="D:/web/2021/2021一阶段资料/day07/笔记/media/day07_01.jpg" style="zoom:50%;>如果元素的四个边的位置是使用“top”、“right”、“bottom”和“left”来描述的，那么元素的“height”和“width”将隐式地由偏移量决定。相对于元素在正常的文档流中的位置移动它，把一个正常布局流中的元素从它的默认位置按坐标进行相对移动。表示“将元素放在文档布局流的默认位置，HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
2023-02-24 17:20:47
72
原创 浮动带来的问题
浮动带来的问题：1，子元素浮动导致父元素高度塌陷；2，影响后面元素的布局；解决方法：1，固定高度：给浮动元素的父元素设置固定高度；优点：代码简洁；缺点：不够灵活；2，overflow 方法：overflow ：visible （默认值） hidden （溢出隐藏） scroll （触发横向和纵向滚动条） auto （自动触发滚动条）给父元素添加overflow属性，overflow 值不
2022-12-04 10:39:22
282
原创 浮动以及浮动的特性
概念：浮动可以让元素脱离文档流，按照指定的方向进行排列，直接遇到父元素的边界或另外一 个浮动元素（停止）；2，为浮动元素的父盒子添加overflow属性；原因：网页中有很多布局效果，标准的布局方式没法完成，使用浮动改变元素的默认排列方式。优缺点：不够灵活，适用于高度固定的布局中；4，可以使行级元素设置宽高；2，可以使元素脱离文档流；1，子元素会浮动会脱离正常标准文档流，会导致父元素高度塌陷；1，给浮动元素父级设置一个固定高度；浮动特性：1，可以使块级元素在一排排列；
2022-11-24 13:54:31
238
原创 表单元素和属性
value属性：默认显示的文本是重置，可以使用value属性修改里面的内 容；注意：name属性：是必须属性，只有设置了name属性表单元素在提交的时候才能传递他们的 值；value属性：默认显示的文本是提交，可以使用value属性改变内容；src属性：图片路径；value 属性：定义按钮里的显示的文本；
2022-11-23 11:05:02
291
原创 html元素三大类
div ，h系列，p， ul ，li，ol ，dl，dd，dt。的元素才能被称为行内块元素；的元素才能被称为块级元素；2.行级元素只能容纳文本或者其他的行级元素（不能在行级元素里面嵌套块级元素）；的元素才能被称为行级元素；2，在不设置宽度的情况下：块级的宽度是它父级元素的内容的宽度；3，在不设置高度的情况下，块级元素的高度是它本身内容的高度。1，默认并排显示，不可以设置宽高，宽高取决于内容；1，默认并排显示，可以设置宽高，宽高取决于内容；块级元素，行级元素，行内块元素。3，不能设置上下的内填充和外间距；
2022-11-22 11:09:59
1137
2
原创 嵌套块级元素垂直外边距塌陷问题
描述：当父元素没有padding，border时，子元素与父元素直接相邻，子元素的margin值会传递给 父元素，并且再次与父元素的margin值发生合并，取两个值的较大值。描述：当两个块级的兄弟元素垂直方向上margin值直接相遇，会发生合并。2，给父元素设置overflow：hidden；2，给其中一个盒子加上一个父元素：overflow：hidden；1，给父元素设置边框或内填充（慎用）1，尽量只定义其中一个的margin值；结构关系：相邻元素的垂直外边距合并；
2022-11-20 20:39:17
194
原创 CSS三大特性及CSS背景
rgba（0，0，0，0）透明度0~1 0全透明；取值：水平方向（left right center）垂直（top bottom center）简写：语法：background：颜色 图片链接 是否重复 图片位置；语法：background-repeat：repeat（默认值，重复）rgb色值：rgb（0，0，0）0~255之间；背景图片默认位于元素的左上角，在水平方向和垂直方向进行重复；作用：恰当的使用继承可以简化代码，降低CSS样式的复杂性；
2022-11-17 20:38:41
110
原创 复合选择器
注：有书写顺序：link-visited-hover-active；复合选择器：有两个或多个基本选择器通过不同的方式组合而成的选择器；作用：选择E元素内部的直接子元素F；作用：选择同时被所有选择器选中的元素；作用：选择E元素内部的F元素；作用：给列表中的每一个选择器选中的元素设置样式；作用：选择元素之后，紧跟着的兄弟元素F；4，当鼠标按下之后的状态：active；3，当鼠标按下之后的状态：hover；2，链接访问之后用：visited；1，未访问之前的：蓝色；3，链接访问之后：紫色；
2022-11-16 17:04:56
262
原创 css盒模型
vertical-align：middle（中线）/top（顶线）/bottom（底线）/baseline（基线 （默认值））；border-style：solid dashed dotted double （上，左，下，右）border-style：solid dashed dotted （上，左右，下）border-width：1px 2px 3px 4px （边框上，左，下，右）（边框上，左右，下）（边框上，下，左，右，）如果没有样式，没有边框，（必须属性）
2022-11-16 16:19:33
63
原创 字体属性和部分文本属性
简写：font：style weight size/line-hieght family （字体风格 字体加粗 字号/行高 字体）em(相对单位）：相对于父元素进行计算 （如果用于字号，相当于父元素进行计算；rgb颜色表示方法：rgb（r，g， b，）0~255之间。作用：字体名称 浏览器默认字体：微软雅黑；letter-spacing：作用：设置文字和文字之间的距离；注意：如果字体名称里面包含空格，汉字，特殊符号，必须加引号。百分比 ：数值与当前字号相乘来设置；
2022-11-12 23:10:16
113
原创 什么是css？
具体的css写在css文件中，在head内部使用link标签引入新建的css文件。3，代码不能重复使用，结构样式不分离；创建一个新的文件，新文件的后缀名.css。缺点：1，相同的样式需要重复定义，造成代码冗余；作用：选择所有同一元素名称 p标签 权重：1。表现层，美化html，层叠样式表，css样式表，级联样式表。1，适用范围广，可以重复使用代码；选择器的作用：用于选择需要设置样式的html元素。作用：设置页面中元素的位置，排版，样式外观等。使用场景：单个html标签需要设置特定的样式。
2022-11-03 23:02:37
92
原创 无序列表，有序列表，自定义列表
(列表项）对专业名词解释列表样式：数字编号；4，I：大写罗马数字；circle 空心圆。用于将一组项目及其相关的描述进行分组列表；专业名词注：type属性：不常用，通常用css属性进行代替；语义：用于将没有数字顺序的一组内容或数据进行分组。解释
2022-11-02 21:26:10
2047
原创 第一天笔记
2，表现标准：主要用于设计页面的表现效果，如：网页元素的版式，颜色，大小等外观样式，表现标准语言指CSS。3，行为标准：主要用于对网页信息的结构和显示进行逻辑控制实现网页的智能交互。web的标准:1,结构标准：主要用于对页面信息进行组织和分类，结构化标准语言：HTML。Java Saript：简称js，用于网页交互的解释性脚本语言--负责网页行为层；三，HTML,CSS,JS是构建网页的三种主要技术，也被称为前端技能三要素。 定义文档头部标签，头部信息 ，其中内容不会显示在网页中。
2022-11-01 20:16:30
89
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人