02 2023 档案
摘要：PC端网页和移动端网页的有什么不同？ PC屏幕大，网页固定版心 手机屏幕小，网页宽度多数为100% 如何在电脑里面写代码边调试移动端网页效果？ 谷歌模拟器 了解屏幕尺寸概念 屏幕尺寸：指的是屏幕对角线长度，一般用英寸来度量 了解移动端主流设备分辨率 PC分辨率（>1920*1080 >1366*76
阅读全文
摘要：空间转换（使用transform属性实现元素在空间的位移、旋转、缩放等效果） 空间：是从坐标轴角度定义的。x、y、和 z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。 空间转换也叫3D转换（属性：transform） 使用translate实现元素空间位移效果 语法：transform: t
阅读全文
摘要：字体图标（ 目的：使用字体图标技巧实现网页中简洁的图标效果） 字体图标展示的是图标，本质是字体，处理简单的、颜色单一的图片 优点：灵活性：灵活的修改样式，例如：尺寸，颜色等 轻量级：体积小，渲染快，降低服务器请求次数 兼容性：几乎兼容所有主流浏览器 使用方便：1.下载字体包 2.使用字体图标 使用字
阅读全文
摘要：项目样式补充 精灵图（场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图） （优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度） 精灵图的使用步骤：1.创建一个盒子，设置盒子的尺寸和小图片尺寸相同 2.将精灵图设置为盒子的背景图片 3.修改背景图位置（通过PxCook测量
阅读全文
摘要：定位 网页常见布局 标准流（块级元素独占一行-->垂直布局，行内元素/行内块元素一行显示多个-->水平布局） 浮动（可以让原本垂直布局的块级元素变成水平布局） 定位（可以让元素自由的摆放在网页的任意位置，一般用于盒子之间的层叠情况） 定位的常见应用场景 1.可以解决盒子与盒子之间的层叠问题 定位之后
阅读全文
摘要：网页制作流程 创建根目录（网站的第一级文件夹） 1.图片文件夹：images 2.样式文件夹：CSS 3.首页：index.html <!-- 网站的首页 所有网站的首页都叫index.html,因为服务器找首页都是找index.html --> <!-- 布局：从外到内，从上到下，从左到右 -->
阅读全文
摘要：结构伪类选择器 根据元素在HTML中的结构关系查找元素 选择器 说明 E:first-child{} 匹配父元素中的第一个子元素，并且是E元素 E:last-child{} 匹配父元素中的最后一个子元素，并且是E元素 E:nth-child(n){} 匹配父元素中第n个子元素，并且是E元素 E:nt
阅读全文
摘要：优先级：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器的样式 优先级公式：!imporant>行内样式>id选择器>类选择器>标签选择器>通配符选择器>继承>浏览器默认样式（选中范围越广，优先级越低） !imporant不要给继承的加，自己有样式，无法继承父级样式 权重叠加计算
阅读全文
摘要：选择器进阶 【复合选择器】：后代选择器：空格 语法：选择器1 选择器2 {css} 子代选择器：> 语法：选择器1>选择器2 {css} 【并集选择器】：, 语法：选择器1 , 选择器2{css} 【交集选择器】：紧挨着 语法：选择器1选择器2{css} 【hover伪类选择器】：(鼠标悬停在元素的
阅读全文
摘要：CSS层叠样式表 /* css注释 */ CSS引入方式 内嵌式：CSS写在style标签中 提示：style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中（作用范围：当前页面；使用场景：小案例） 外联式：CSS写在一个单独的.css 文件中 提示：需要通过link标签在网页中引用
阅读全文
摘要：列表标签 无序列表 标签名 说明 ul 表示无序列表的整体，用于包裹li标签 li 表示无序列表的每一项，用于包含每一行的内容 有序列表 标签名 说明 ol 表示有序列表的整体，用于包裹li标签 li 表示有序列表的每一项，用于包含每一行的内容 自定义列表 标签名 说明 dl 表示自定义列表的整体，
阅读全文
摘要：认识网页 问题1：网页由哪些部分构成？ 文字、图片、音频、视频、超链接 问题2：我们看到的网页背后本质是什么？ 前端程序员写的代码 问题3：前端的代码是通过什么软件转换成用户眼中的页面？ 通过浏览器转化（解析和渲染）成用户看到的网页 常见五大浏览器 IE浏览器、火狐浏览器、谷歌浏览器、苹果电脑（Sa
阅读全文
