css 3 学习笔记
文章平均质量分 91
基础语法+代码实例(容易理解)
仅供个人复习使用
xml@77
博客的目的是想把学到的知识点记录下来,以后方便查找,能帮助到需要的小伙伴就更好啦!
展开
-
字体图标、平面转换、渐变
文章目录字体图标使用字体图标Unicode编码:类名平面转换位移旋转转换原点缩放2D转换总结渐变 字体图标 目标:使用字体图标技巧实现网页中简洁的图标效果 字体图标展示的是图标,本质是字体。 处理简单的、颜色单一的图片 字体图标的优点: 灵活性:灵活地修改样式,例如:尺寸、颜色等 轻量级:体积小、渲染快、降低服务器请求次数 兼容性:几乎兼容所有主流浏览器 使用方便: 下载字体包 使用字体图标 图标库 Iconfont:https://www.iconfont.cn/ 下载字体包: 登录原创 2022-05-11 19:54:53 · 401 阅读 · 0 评论 -
空间转换、动画
文章目录空间转换动画 空间转换 目标:使用transform属性实现元素在空间内的位移、旋转、缩放等效果 空间:是从坐标轴角度定义的。x 、y 和z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同。 空间转换也叫 3 D转换 属性:transform 语法 transform: translate3d(x, y, z); transform: translateX(值); transform: translateY(值); transform: translateZ(值); 取值(正原创 2022-05-13 18:32:31 · 67 阅读 · 0 评论 -
品优购项目-【下】
品优购项目 首页制作 main 主体模块制作 左侧 focus 模块制作 右侧 newsflash 模块制作 推荐模块制作 -- `recom` 家用电器模块 `box_hd` 制作 `box_bd` 制作 tab栏切换需求 列表制作(★★★) 品优购列表页制作准备工作 列表页 `header` 和 `nav` 修改 列表页主体 `sk_container` `sk_hd` 制作 `sk_bd` 制作 注册页面(★★★) 准备工作 `header` 头部实现 `registerarea` 主体模块实现 底部原创 2022-05-11 11:32:35 · 326 阅读 · 0 评论 -
品优购项目-【上】
品优购项目规划 网站制作流程 品优购项目介绍 品优购项目的学习目的 开发工具以及技术栈 开发工具 技术栈 品优购项目搭建工作 创建的文件夹如下(称为项目结构) 创建文件如下 项目模块化开发 网站 favicon 图标(★★★) 制作favicon图标 使用favicon图标 **favicon图标放到网站根目录下** HTML页面引入favicon图标 TDK三大标签SEO优化(★★) SEO是什么 TDK是什么 T -- Title(网站标题) D -- description(网站描述) K -- ke原创 2022-05-07 20:44:57 · 102 阅读 · 0 评论 -
HTML/CSS 代码规范
文章目录代码规范1. 概述HTML规范图片规范CSS规范命名规范2. HTML 规范DOCTYPE 声明页面语言langcharset 字符集合书写风格HTML代码大小写类型属性元素属性特殊字符引用代码缩进代码嵌套3. 图片规范内容图背景图4. CSS规范代码格式化代码大小写选择器代码缩进分号代码易读性属性值引号属性书写顺序命名规范目录命名ClassName命名常用命名推荐原创 2022-05-07 20:12:15 · 676 阅读 · 0 评论 -
css-04--1. 浮动2. 常见网页布局3. 清除浮动
浮动 1.1 传统网页布局的三种方式 1.2 标准流(普通流/文档流) 1.3 为什么需要浮动? 1.4 什么是浮动? 1.5 浮动特性(重难点) 1.6 浮动元素经常和标准流父级搭配使用 2. 常见网页布局 2.1 常见网页布局 2.2 浮动布局注意点 3. 清除浮动 3.1 为什么需要清除浮动? 3.2 清除浮动本质 3.3 清除浮动 1、额外标签法 2、父级添加 overflow 3、:after 伪元素法 4、双伪元素清除浮动 5、清除浮动总结 4. PS 切图 4.1 图层切图 4.2 切片切图原创 2022-04-22 16:43:08 · 233 阅读 · 0 评论 -
css-07--1. HTML5 的新特性2. CSS 3 的新特性
HTML5 的新特性 1.1 HTML5 新增的语义化标签 1.2 HTML5 新增的多媒体标签 1. 视频 2. 音频`` 3. 多媒体标签总结 1.3 HTML5 新增的 input 类型 1.4 HTML5 新增的表单属性 2. CSS 3 的新特性 2.1 CSS3 的现状 2.2 属性选择器 2.3 结构伪类选择器 2.4 伪元素选择器(重点) 2.5 CSS3 盒子模型 2.6 CSS3 其他特性(了解) 2.7 CSS3 过渡(重点)原创 2022-04-22 21:46:59 · 665 阅读 · 0 评论 -
css-06--1. 精灵图2. 字体图标3. CSS 三角4. CSS 用户界面样式5. vertical-align 属性应用6. 溢出的文字省略号显示7. 常见布局技巧8. CSS 初始化
1. 精灵图 1.1 为什么需要精灵图 1.2 精灵图(sprites)的使用 2. 字体图标 2.1 字体图标的产生 2.2 字体图标的优点 2.3 字体图标的下载 2.4 字体图标的引入 2.4.1 字体文件格式 2.4 字体图标的引入 2.5 字体图标的追加 3. CSS 三角 4. CSS 用户界面样式 4.1 什么是界面样式 4.1 鼠标样式 cursor 4.2 轮廓线 outline 4.3 防止拖拽文本域 resize 5. vertical-align 属性应用 5.1 图片、表单和文字对原创 2022-04-22 21:16:08 · 114 阅读 · 0 评论 -
css-05--1. 定位2.. 网页布局总结3.元素的显示与隐藏
定位 1.1 为什么需要定位 1.2 定位组成 1. 定位模式 2. 边偏移 1.3 静态定位 static(了解) 1.4 相对定位 relative(重要) 1.5 绝对定位 absolute(重要) 1.6 子绝父相的由来 1.7 固定定位 fixed (重要) 1.8 粘性定位 sticky(了解) 1.9 定位的总结 1.10 定位叠放次序 z-index 1.11 定位的拓展 1. 绝对定位的盒子居中 2. 定位特殊特性 3. 脱标的盒子不会触发外边距塌陷 4. 绝对定位(固定定位)会完全压住盒原创 2022-04-22 20:15:16 · 78 阅读 · 0 评论 -
css-03--一、css三大特性二、盒子模型三、、其它样式圆角边框盒子阴影文字阴影光标类型
css-03 目录css-03一、css三大特性1、层叠性2、继承性3、优先级二、盒子模型1、网页布局的本质2、盒子模型(Box Model)组成3、边框(border)3.1、边框的使用3.2、表格的细线边框3.3、边框会影响盒子实际大小4、内边距(padding)4.1、内边距的使用方式4.2、内边距会影响盒子实际大小5、外边距(margin)5.1、外边距的使用方式5.2、外边距典型应用5.3、外边距合并5.4、清除内外边距三、PS 基本操作四、其它样式1、圆角边框2、盒子阴影3、文字阴影原创 2022-04-22 11:08:58 · 71 阅读 · 0 评论 -
css02--CSS 的复合选择器CSS 的元素显示模式 CSS 的背景
CSS 的复合选择器什么是复合选择器后代选择器子选择器并集选择器伪类选择器链接伪类选择器:focus 伪类选择器复合选择器总结 CSS 的元素显示模式什么是元素显示模式块元素行内元素行内块元素元素显示模式总结元素显示模式转换一个小技巧 单行文字垂直居中的代码单行文字垂直居中的原理CSS 的背景背景颜色背景图片背景平铺背景图像固定(背景附着)背景复合写法背景色半透明背景总结原创 2022-04-11 08:32:42 · 61 阅读 · 0 评论 -
css01--CSS 简介CSS 基础选择器CSS 字体属性CSS 文本属性CSS 引入方式Chrome 调试工具
CSS 简介HTML 的局限性CSS-网页的美容师CSS 语法规范CSS 代码风格CSS 基础选择器CSS 选择器的作用选择器分类标签选择器类选择器id 选择器通配符选择器基础选择器总结CSS 字体属性字体系列字体大小字体粗细文字样式字体复合属性字体属性总结CSS 文本属性文本颜色对齐文本装饰文本文本缩进行间距文本属性总结CSS 引入方式CSS 的三种样式表内部样式表行内样式表外部样式表 CSS 引入方式总结综合案例 Chrome 调试工具原创 2022-04-11 07:26:28 · 570 阅读 · 0 评论