随笔分类 -  CSS模块

3D移动，两面反转的盒子，3D导航栏，旋转木马
摘要：3D移动，两面反转的盒子，3D导航栏，旋转木马 1. 3D移动translate <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi 阅读全文
posted @ 2022-12-27 23:26 a-tao必须奥利给 阅读(128) 评论(0) 推荐(0)
css3动画序列，属性，热点图，步长，大熊案例
摘要：9.css3动画的基本是使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> < 阅读全文
posted @ 2022-12-27 22:51 a-tao必须奥利给 阅读(94) 评论(0) 推荐(0)
2D-定位，旋转，缩放
摘要：2D-定位，旋转，缩放 1. 移动盒子的位置，定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc 阅读全文
posted @ 2022-12-27 12:57 a-tao必须奥利给 阅读(89) 评论(0) 推荐(0)
HTML5和CSS3的一些新特性-视屏，语音，表单，选择器，伪类，结构，before和after选择器，iconmoon 字体使用方法
摘要：HTML5和CSS3的一些新特性-视屏，语音，表单，选择器，伪类，结构，before和after选择器，iconmoon 字体使用方法 Html5： 1. HTML5新增语义化标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- 阅读全文
posted @ 2022-12-26 22:29 a-tao必须奥利给 阅读(74) 评论(0) 推荐(0)
iconfont字体图标，ico图标设置，版心
摘要：iconfont字体图标，ico图标设置，版心 1、如何使用iconfont字体图标 IconFont，图标字体也叫字体图标，就是字体做的图标。可以通过设置字体的方式改变图标的样式，受到近些年 扁平化设计 的影响，越来越多的图标都开始使用 IconFont 1、首先打开官方网址iconfont-阿里 阅读全文
posted @ 2022-12-17 16:21 a-tao必须奥利给 阅读(525) 评论(0) 推荐(0)
css样式补充，项目前置认知，精灵图，背景图片大小，阴影，过渡，SEO简介
摘要：1、css样式补充，项目前置认知，字体图标 ==学习目标：== u 能够在网页中使用 精灵图 u 能够使用 背景大小属性 ，设置背景图片的大小 u 能够认识 CSS书写顺序，提高代码专业性和浏览器渲染性能 u 能够使用的专业方式完成 项目结构搭建 和 基础公共样式 1. CSS样式补充(现在用的较少 阅读全文
posted @ 2022-12-17 15:32 a-tao必须奥利给 阅读(105) 评论(0) 推荐(0)
CSS基础-装饰,基线，光标类型，边框圆角（胶囊），文字溢出，元素隐藏，边框合并，css画三角形
摘要：CSS基础-装饰 ==目标：能够完成元素的装饰效果== 学习路径： 1. 垂直对齐方式 2. 光标类型 3. 边框圆角 4. overflow溢出部分显示效果 5. 元素本身隐藏 1.1 认识基线（了解） 1.2 文字对齐问 1.3 垂直对齐方式 （拓展）项目中 vertical-align 可以解 阅读全文
posted @ 2022-12-11 18:13 a-tao必须奥利给 阅读(118) 评论(0) 推荐(0)
CSS布局-定位，相对，绝对，子绝父相，固定定位，层级关系。
摘要：CSS布局-定位，相对，绝对，子绝父相。 ==学习目标== ◆ 能够说出 定位 的常见应用场景 ◆ 能够说出 不同定位方式 的特点 ◆ 能够使用 子绝父相 完成元素水平垂直案例 ◆ 能够写出三种常见的 光标类型（cursor） ◆ 能够使用 圆角边框 属性完成 正圆 和 胶囊按钮 效果 ◆ 能够说出 阅读全文
posted @ 2022-12-11 12:43 a-tao必须奥利给 阅读(979) 评论(0) 推荐(0)
CSS布局-标准流,浮动（重点），清除浮动。
摘要：CSS布局-浮动（重点） ==目录== ◆ 结构伪类选择器 ◆ 伪元素 ◆ 标准流 ◆ 浮动 ◆ 清除浮动 ==学习目== ◆ 能够使用 结构伪类选择器 在HTML中选择元素 ◆ 能够说出 标准流 元素的布局特点 ◆ 能够说出 浮动元素 的特点 ◆ 能够使用浮动完成 小米模块布局案例 ◆ 能够说出 阅读全文
posted @ 2022-12-05 16:15 a-tao必须奥利给 阅读(115) 评论(0) 推荐(0)
CSS-盒子模型-内容，边框，内边距，外边距，（合并，塌陷情况）
摘要：CSS-盒子模型-内容，边框，内边距，外边距，（合并，塌陷情况） ==目标：能够认识 盒子模型的组成 **，**能够掌握盒子模型 边框、内边距、外边距 的****设置方法== 学习路径： 1. 盒子模型的介绍 2. 内容区域的宽度和高度 3. 边框（ border ） 4. 内边距（ padding 阅读全文
posted @ 2022-12-05 00:05 a-tao必须奥利给 阅读(192) 评论(0) 推荐(0)
CSS布局-优先级的权重，及其计算。Chome调试工具
摘要：CSS布局-优先级的权重，及其计算。Chome调试工具 ==学习目标：== ◆ 能够认识不同选择器的 优先级 公式 ◆ 能够进行 CSS 权重叠加计算，分析并解决CSS 冲突问题 ◆ 能够认识 盒子模型 的组成部分 ◆ 能够掌握盒子模型的 边框、内边距、外边距 的作用及简写形式 ◆ 能够计算盒子的 阅读全文
posted @ 2022-12-04 22:32 a-tao必须奥利给 阅读(231) 评论(0) 推荐(0)
CSS基础-嵌套规范（拓展）,居中方法，CSS 特性
摘要：CSS基础-嵌套规范（拓展）,居中方法，CSS 特性 拓展1：HTML嵌套规范注意点 1. 块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等…… ➢ 但是：p标签中不要嵌套div、p、h等块级元素 2. a标签内部可以嵌套任意元素 ➢ 但是：a标签不能嵌套a标签 拓展2：居 阅读全文
posted @ 2022-12-04 22:07 a-tao必须奥利给 阅读(168) 评论(0) 推荐(0)
三、CSS基础-元素显示模式 行元素，块元素，行内块元素
摘要：三、CSS基础-元素显示模式 目标：能够认识三种常见的 元素显示模式**，并通过代码实现不同** 元素显示模式 的转换 1. 块级元素 2. 行内元素 3. 行内块元素 4. 元素显示模式转换 1.1 块级元素 小结 ➢ 块级元素的显示特点有哪些？ 1. 独占一行（一行只能显示一个） 2. 宽度默认 阅读全文
posted @ 2022-12-04 20:50 a-tao必须奥利给 阅读(119) 评论(0) 推荐(0)
CSS基础-选择器进阶,背景相关属性（颜色/图片）
摘要：CSS基础-选择器进阶,背景相关属性（颜色/图片） 目标：能够理解 复合选择器 的规则，并使用 复合选择器 在 HTML 中选择元素 学习路径： 1. 复合选择器 2. 并集选择器 3. 交集选择器 4. hover伪类选择器 5. Emmet语法 ==本次我们所学的内容：== 1.现择器进阶 1. 阅读全文
posted @ 2022-12-04 20:02 a-tao必须奥利给 阅读(118) 评论(0) 推荐(0)
CSS基础
摘要：CSS基础 ◆ 基础认知 ◆ 基础选择器 ◆ 字体和文本样式 ◆ Chrome调试工具 ◆ 综合案例 1.基础认知 1.1 CSS的介绍 ➢ CSS：层叠样式表（Cascading style sheets） ➢ CSS作用是什么？？ ​ • 给页面中的HTML标签设置样式 1.2 CSS 语法规 阅读全文
posted @ 2022-12-01 23:16 a-tao必须奥利给 阅读(75) 评论(0) 推荐(0)