摘要: 移动适配 rem:目前多数企业在用的解决方案 rem:(能够使用rem单位设置网页元素的尺寸) 网页效果:屏幕宽度不同,网页元素尺寸不同(等比缩放) px单位或百分比布局可以实现吗? px单位是绝对单位 百分比布局特点宽度自适应,高度固定 适配方案 rem vw / vh rem单位 相对单位 re 阅读全文
posted @ 2023-03-01 22:04 小人(ren)物 阅读(13) 评论(0) 推荐(0) 编辑
摘要: Flex布局 主轴方向:(使用flex-direction改变元素排列方向) 思考:Flex布局模型中,弹性盒子默认沿着哪个方向排列? 水平方向 思考:如何实现内容垂直排列? 修改主轴的方向 主轴默认是水平方向,侧轴默认是垂直方向 修改主轴方向属性:flex-direction 属性值 作用 row 阅读全文
posted @ 2023-03-01 13:43 小人(ren)物 阅读(15) 评论(0) 推荐(0) 编辑
摘要: PC端网页和移动端网页的有什么不同? PC屏幕大,网页固定版心 手机屏幕小,网页宽度多数为100% 如何在电脑里面写代码边调试移动端网页效果? 谷歌模拟器 了解屏幕尺寸概念 屏幕尺寸:指的是屏幕对角线长度,一般用英寸来度量 了解移动端主流设备分辨率 PC分辨率(>1920*1080 >1366*76 阅读全文
posted @ 2023-02-28 22:48 小人(ren)物 阅读(18) 评论(0) 推荐(0) 编辑
摘要: 空间转换(使用transform属性实现元素在空间的位移、旋转、缩放等效果) 空间:是从坐标轴角度定义的。x、y、和 z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同。 空间转换也叫3D转换(属性:transform) 使用translate实现元素空间位移效果 语法:transform: t 阅读全文
posted @ 2023-02-28 00:01 小人(ren)物 阅读(30) 评论(0) 推荐(0) 编辑
摘要: 字体图标( 目的:使用字体图标技巧实现网页中简洁的图标效果) 字体图标展示的是图标,本质是字体,处理简单的、颜色单一的图片 优点:灵活性:灵活的修改样式,例如:尺寸,颜色等 轻量级:体积小,渲染快,降低服务器请求次数 兼容性:几乎兼容所有主流浏览器 使用方便:1.下载字体包 2.使用字体图标 使用字 阅读全文
posted @ 2023-02-27 13:21 小人(ren)物 阅读(12) 评论(0) 推荐(0) 编辑
摘要: 项目样式补充 精灵图(场景:项目中将多张小图片,合并成一张大图片,这张大图片称之为精灵图) (优点:减少服务器发送次数,减轻服务器的压力,提高页面加载速度) 精灵图的使用步骤:1.创建一个盒子,设置盒子的尺寸和小图片尺寸相同 2.将精灵图设置为盒子的背景图片 3.修改背景图位置(通过PxCook测量 阅读全文
posted @ 2023-02-26 19:07 小人(ren)物 阅读(18) 评论(0) 推荐(0) 编辑
摘要: 定位 网页常见布局 标准流(块级元素独占一行-->垂直布局,行内元素/行内块元素一行显示多个-->水平布局) 浮动(可以让原本垂直布局的块级元素变成水平布局) 定位(可以让元素自由的摆放在网页的任意位置,一般用于盒子之间的层叠情况) 定位的常见应用场景 1.可以解决盒子与盒子之间的层叠问题 定位之后 阅读全文
posted @ 2023-02-26 10:43 小人(ren)物 阅读(29) 评论(0) 推荐(0) 编辑
摘要: 网页制作流程 创建根目录(网站的第一级文件夹) 1.图片文件夹:images 2.样式文件夹:CSS 3.首页:index.html <!-- 网站的首页 所有网站的首页都叫index.html,因为服务器找首页都是找index.html --> <!-- 布局:从外到内,从上到下,从左到右 --> 阅读全文
posted @ 2023-02-25 18:36 小人(ren)物 阅读(12) 评论(0) 推荐(0) 编辑
摘要: 结构伪类选择器 根据元素在HTML中的结构关系查找元素 选择器 说明 E:first-child{} 匹配父元素中的第一个子元素,并且是E元素 E:last-child{} 匹配父元素中的最后一个子元素,并且是E元素 E:nth-child(n){} 匹配父元素中第n个子元素,并且是E元素 E:nt 阅读全文
posted @ 2023-02-25 11:35 小人(ren)物 阅读(16) 评论(0) 推荐(0) 编辑
摘要: 优先级:不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器的样式 优先级公式:!imporant>行内样式>id选择器>类选择器>标签选择器>通配符选择器>继承>浏览器默认样式(选中范围越广,优先级越低) !imporant不要给继承的加,自己有样式,无法继承父级样式 权重叠加计算 阅读全文
posted @ 2023-02-24 21:22 小人(ren)物 阅读(22) 评论(0) 推荐(0) 编辑
点击右上角即可分享
微信分享提示