- 博客(31)
- 收藏
- 关注
原创 响应式-媒体查询
2.media feather:媒体特性表达式 width:浏览器的宽度 height:浏览器的高度 max-width:最大宽度 min-width:最小宽度 device-width:设备宽度 device-height:设备高度 max-device-width:最大设备宽度 min-device-width:最小设备宽度
2022-10-26 19:30:08
290
原创 什么是响应式设计?
优点:* 1、减少工作量,网站、设计、代码、内容都 只需要一份,多出来的工作量只是JS脚本、CSS样式做一些改变* 2、节省设计、开发、维护成本【不再特定的维护PC页面,移动页面】* 3、面对不同分辨率设备灵活性强,能够快捷解决多设备显示适应问题
2022-10-26 19:25:52
98
原创 css可继承的属性有哪些?
可继承的属性:文本类:text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform、direction、color;
2022-10-24 21:47:20
1048
原创 http和https的区别?
http和https的区别1、https协议需要到ca申请证书,一般免费证书较少,因而需要一定费用。2、http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。3、http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。4、http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全。
2022-10-24 21:44:11
65
原创 关于缓存问题?
H5缓存:本地存储:localStorage永久存储、sessionStorage临时存储离线缓存:在html标签上设置 manifest 属性 引入cache文件(CACHE缓存文件,NETWORK不缓存文件,FALLBACK当资源不可访问时,代替的文件)
2022-10-24 21:42:59
108
原创 移动端web开发(04)
rem适配实现1)设置页面的viewport2)以设计稿为基准值,1rem=100px,使用rem单位取代px常规布局。3)换算不同设备尺寸下1rem的值,即改变不同尺寸下html 的font-size
2022-10-23 21:24:34
69
原创 移动端web开发(04)
rem适配实现1)设置页面的viewport2)以设计稿为基准值,1rem=100px,使用rem单位取代px常规布局。3)换算不同设备尺寸下1rem的值,即改变不同尺寸下html 的font-size
2022-10-23 21:22:49
259
原创 移动端(03)
rem布局原理在布局过程中只要使用 rem 设置元素的尺寸,在改变 rem 的基准值 html 的字体大小的时候,页面上的元素将等比例缩放实现适配。
2022-10-23 21:20:26
41
原创 移动端web开发(02)
什么是视口?视口简单来说就是浏览器显示页面内容的区域。在PC端,正常的视口宽度就是整个浏览器的窗口可视区的宽度,会随着浏览器窗口大小的重置而缩放;大多数为PC端设计的网站宽度至少为800px,为了不破坏没有针对移动设备优化的PC网页,移动端引入了视觉视口、布局视口、理想视口三个概念
2022-10-23 21:17:00
69
原创 移动端web开发(02)
什么是视口?视口简单来说就是浏览器显示页面内容的区域。在PC端,正常的视口宽度就是整个浏览器的窗口可视区的宽度,会随着浏览器窗口大小的重置而缩放;大多数为PC端设计的网站宽度至少为800px,为了不破坏没有针对移动设备优化的PC网页,移动端引入了视觉视口、布局视口、理想视口三个概念
2022-10-23 21:14:14
99
原创 双飞翼布局
双飞翼实现步骤- .centerbox与.left,.right浮动在一行排列- .centerbox固定宽度100%,left,.right固定宽度- .centerbox内部嵌套.center,不定宽度,通过定义左右margin留出左侧列的宽和右侧列宽- 移动.left通过margin-left:-100%;实现- 移动.right通过margin-left:-200px;实现
2022-10-13 21:03:15
43
原创 布局 —— 等高布局
实现步骤- 通过浮动创建一个正常的三列布局(不同列背景不同)- 父容器清浮动- 每一列固定padding-bottom,同时指定一个margin负值,抵销padding的占位- 父容器overflow:hidden
2022-10-13 20:50:49
292
原创 盒子和文字阴影
text-shadow: h-shadow v-shadow blur color;text-shadow: x轴偏移量 y轴偏移量 模糊值 阴影颜色;h-shadow 必需,水平阴影的位置,允许负值;v-shadow 必需,垂直阴影的位置,允许负值;blur 可选,模糊距离;color 可选,阴影的颜色;
2022-10-08 21:28:05
62
原创 矢量图标
添加新的图标 1.把新的图标选好之后,点击添加项目,选择你要添加的项目 2.下载至本地 3.解压文件,把文件放到代码中(此时下载的这个文件包括上次选的图标,也包括这次选的新的图标) 4.正常使用 添加新的图标下载文件后,把原来的文件替换掉,再把iconfont.css和iconfont.js文件链接替换一下即可
2022-10-08 21:26:11
107
原创 css溢出显示省略号
>-webkit-line-clamp;用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。>display: -webkit-box; 必须结合的属性,将对象作为弹性伸缩盒子模型显示。>-webkit-box-orient必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式 。
2022-09-29 20:04:17
1059
原创 css定位问题
浮动元素: 使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本、图片、表单标签依然会为这个元素让出位置,环绕在周围- 定位元素: 使用position脱离文档流的元素,其他盒子完全无视它,包括元素内部的文本、图片、表单标签
2022-09-27 22:07:01
226
原创 css定位布局
普通文档流中块元素垂直排列,行内元素水平排列。浮动可以实现多个块级盒子在一行无缝排列显示。定位能够让我们把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置(自由的在某个盒子内移动位置或者固定在屏幕中的某个位置)。
2022-09-27 22:03:37
36
原创 css布局
浮动特性总结- 脱离文档流- 提升层级- 对块元素的影响 - 使块元素在一行排列 - 未定宽度的块元素适应内容- 对行内元素的影响 - 生成了一个块级框即 (1)支持宽高 (2)支持垂直方向的margin,padding (3)支持行高、text-align等文本属性
2022-09-26 19:10:10
33
原创 CSS盒模型
1.2 总结- 设问通过对盒模型的实际使用对比出它与快递盒子的不同之处- 总结盒子模型占位的计算:width/height + padding + margin- 提示学生注意实际开发的过程中要明确测量的宽高是内容宽还是包括了padding的占位宽高- 垂直方向上相遇的margin值出现折叠问题
2022-09-25 18:35:22
30
原创 CSS的三大特性
样式声明不冲突 (同时应用于元素)- 样式声明冲突 - 同级选择器,CSS样式中最后定义的声明应用于元素(就近原则) - 不同级选择器,由选择器优先级决定
2022-09-22 18:43:18
83
原创 CSS字体 ,文本属性
3、文本属性继承性简单渗透:字体文本属性大多具有继承性。>可继承的属性>font-size>font-family>font-style>font-weight>font>line-height>text-align>text-indent>color>>不可继承>text-decoration(穿透性)
2022-09-20 20:18:31
31
原创 html常用标签
(5)type属性(了解)- `a`: 小写字母- `A`: 大写字母- `i`: 小写罗马数字- `I`: 大写罗马数字- `1`: 数字 ```html 步骤一 步骤二 ``` **注意:**type属性不常用,通常使用css属性替代。
2022-09-18 12:33:02
41
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人