css 3 学习笔记
文章平均质量分 91
基础语法+代码实例(容易理解)
仅供个人复习使用
xml@77
博客的目的是想把学到的知识点记录下来,以后方便查找,能帮助到需要的小伙伴就更好啦!
展开
-
字体图标、平面转换、渐变
文章目录字体图标使用字体图标Unicode编码:类名平面转换位移旋转转换原点缩放2D转换总结渐变字体图标目标:使用字体图标技巧实现网页中简洁的图标效果字体图标展示的是图标,本质是字体。处理简单的、颜色单一的图片字体图标的优点:灵活性:灵活地修改样式,例如:尺寸、颜色等轻量级:体积小、渲染快、降低服务器请求次数兼容性:几乎兼容所有主流浏览器使用方便:下载字体包使用字体图标图标库Iconfont:https://www.iconfont.cn/下载字体包:登录原创 2022-05-11 19:54:53 · 249 阅读 · 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 · 64 阅读 · 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 · 319 阅读 · 0 评论 -
品优购项目-【上】
品优购项目规划网站制作流程品优购项目介绍品优购项目的学习目的开发工具以及技术栈开发工具技术栈品优购项目搭建工作创建的文件夹如下(称为项目结构)创建文件如下项目模块化开发网站 favicon 图标(★★★)制作favicon图标使用favicon图标**favicon图标放到网站根目录下**HTML页面引入favicon图标TDK三大标签SEO优化(★★)SEO是什么TDK是什么T -- Title(网站标题)D -- description(网站描述)K -- ke原创 2022-05-07 20:44:57 · 97 阅读 · 0 评论 -
HTML/CSS 代码规范
文章目录代码规范1. 概述HTML规范图片规范CSS规范命名规范2. HTML 规范DOCTYPE 声明页面语言langcharset 字符集合书写风格HTML代码大小写类型属性元素属性特殊字符引用代码缩进代码嵌套3. 图片规范内容图背景图4. CSS规范代码格式化代码大小写选择器代码缩进分号代码易读性属性值引号属性书写顺序命名规范目录命名ClassName命名常用命名推荐原创 2022-05-07 20:12:15 · 324 阅读 · 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、父级添加 overflow3、:after 伪元素法4、双伪元素清除浮动5、清除浮动总结4. PS 切图4.1 图层切图4.2 切片切图原创 2022-04-22 16:43:08 · 118 阅读 · 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 · 207 阅读 · 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 鼠标样式 cursor4.2 轮廓线 outline4.3 防止拖拽文本域 resize5. vertical-align 属性应用5.1 图片、表单和文字对原创 2022-04-22 21:16:08 · 104 阅读 · 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-index1.11 定位的拓展1. 绝对定位的盒子居中2. 定位特殊特性3. 脱标的盒子不会触发外边距塌陷4. 绝对定位(固定定位)会完全压住盒原创 2022-04-22 20:15:16 · 73 阅读 · 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 · 65 阅读 · 0 评论 -
css02--CSS 的复合选择器CSS 的元素显示模式 CSS 的背景
CSS 的复合选择器什么是复合选择器后代选择器子选择器并集选择器伪类选择器链接伪类选择器:focus 伪类选择器复合选择器总结 CSS 的元素显示模式什么是元素显示模式块元素行内元素行内块元素元素显示模式总结元素显示模式转换一个小技巧 单行文字垂直居中的代码单行文字垂直居中的原理CSS 的背景背景颜色背景图片背景平铺背景图像固定(背景附着)背景复合写法背景色半透明背景总结原创 2022-04-11 08:32:42 · 53 阅读 · 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 · 143 阅读 · 0 评论