![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
九锥盛世~天长地久
这个作者很懒,什么都没留下…
展开
-
HTML5/CSS3新特性02
一、rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转 使用步骤: 给元素添加转换属性 transform 属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度 div{ transform: rotate(0deg); } 二、三角 代码演示 二、设置元素旋转中心点(transform-origin) transform-origin 基础语法 transform-origin: x y; 重要知原创 2020-08-29 11:10:50 · 77 阅读 · 0 评论 -
HTML5/CSS3新特性01
一、什么是 HTML5 HTML5 的概念与定义 定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML 两个概念: 是一个新版本的 HTML 语言,定义了新的标签、特性和属性 拥有一个强大的技术集,这些技术集是指: HTML5 、CSS3 、javascript, 这也是广义上的 HTML5 HTML5 拓展了哪些内容 语义化标签 本地存储 兼容特性 2D、3D 动画、过渡 CSS3 特性 性能与集成 HTML5 的现状 绝对原创 2020-08-29 11:10:32 · 70 阅读 · 0 评论 -
HTML5/CSS3新特性03
一、 认识 3D 转换 3D 的特点 近大远小 物体和面遮挡不可见 三维坐标系 x 轴:水平向右 – 注意:x 轴右边是正值,左边是负值 y 轴:垂直向下 – 注意:y 轴下面是正值,上面是负值 z 轴:垂直屏幕 – 注意:往外边的是正值,往里面的是负值 二、3D 转换 3D 转换知识要点 3D 位移:translate3d(x, y, z) 3D 旋转:rotate3d(x, y, z) 透视:perspctive 3D呈现 transfrom-style原创 2020-08-29 11:10:14 · 82 阅读 · 1 评论 -
CSS高级技巧
CSS高级技巧 目标 理解 能说出元素显示隐藏最常见的写法 能说出精灵图产生的目的 能说出去除图片底侧空白缝隙的方法 应用 能写出最常见的鼠标样式 能使用精灵图技术 能用滑动门做导航栏案例 1. 元素的显示与隐藏 目的 让一个元素在页面中消失或者显示出来 场景 类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现! 1.1 display 显示(重点) display 设置或检索对象是否及如何显示。 display: none 隐藏对象 display:b原创 2020-08-29 11:09:55 · 121 阅读 · 0 评论 -
定位
定位(position) 目标 理解 能说出为什么要用定位 能说出定位的4种分类 能说出四种定位的各自特点 能说出我们为什么常用子绝父相布局 应用 能写出淘宝轮播图布局 1. CSS 布局的三种机制 网页布局的核心 —— 就是用 CSS 来摆放盒子位置。 CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流、浮动和定位,其中: 普通流(标准流) 浮动 让盒子从普通流中浮起来 —— 让多个盒子(div)水平排列成一行。 定位 将盒子定在某一个位置 自由的漂浮在其原创 2020-08-29 11:09:37 · 214 阅读 · 0 评论 -
学成在线实例
1. 学成在线页面制作 目标 理解 能够说写单页面我们基本的流程 能说出常见的css初始化语句 能说出我们CSS属性书写顺序 应用 能利用ps切图 能引入外部样式表 能把psd文件转换为html页面 学成在线的目的就是为了串联前面的所有知识。来一个春晚大联欢。 pink老师: 取义学有所成,为师之期望,君等成才者也,故曰学成网是也~~ 1.1 前期准备素材 学成在线PSD源文件 开发工具 = PS(切图) + sublime(代码) + chrome(测试) 1.2 前期准备工作原创 2020-08-29 11:09:17 · 277 阅读 · 0 评论 -
浮动
1. 浮动(float) 目标 记忆 能够说出 CSS 的布局的三种机制 理解 能够说出普通流在布局中的特点 能够说出我们为什么用浮动 能够说出我们为什么要清除浮动 应用 能够利用浮动完成导航栏案例 能够清除浮动 能够使用PS切图工具 1.1 CSS 布局的三种机制 网页布局的核心——就是用 CSS 来摆放盒子。 CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流(标准流)、浮动和定位,其中: 普通流(标准流) 块级元素会独占一行,从上向下顺序排列; 常用元素:di原创 2020-08-29 11:08:58 · 177 阅读 · 0 评论 -
盒子模型
第01阶段.前端基础.盒子模型 盒子模型(CSS重点) css学习三大重点: css 盒子模型 、 浮动 、 定位 主题思路: 目标: 理解: 能说出盒子模型有那四部分组成 能说出内边距的作用以及对盒子的影响 能说出padding设置不同数值个数分别代表的意思 能说出块级盒子居中对齐需要的2个条件 能说出外边距合并的解决方法 应用: 能利用边框复合写法给元素添加边框 能计算盒子的实际大小 能利用盒子模型布局模块案例 1.看透网页布局的本质 网页布局中,我们是如何把里面的文字,.原创 2020-08-28 16:11:29 · 126 阅读 · 0 评论 -
导航栏案例
第01阶段.前端基础 CSS 今天我们围绕一个 导航栏案例进行学习知识点。 今日重点: 复合选择器 后代选择器 并集选择器 标签显示模式 CSS背景 背景位置 CSS三大特性 优先级 1. CSS复合选择器 目标 理解 理解css复合选择器分别的应用场景 应用 使用后代选择器给元素添加样式 使用并集选择器给元素添加样式 使用伪类选择器 为什么要学习css复合选择器 CSS选择器分为 基础选择器 和 复合选择器 ,但是基础选择器不能满足我们实际开发中,快速高效的.原创 2020-08-28 15:55:54 · 584 阅读 · 0 评论 -
CSS字体样式属性调试工具
CSS字体样式属性调试工具 目标 应用 使用css字体样式完成对字体的设置 使用css外观属性给页面元素添加样式 使用常用的emment语法 能够使用开发人员工具代码调试 1.font字体 1.1 font-size:大小 作用: font-size属性用于设置字号 p { font-size:20px; } 单位: 可以使用相对长度单位,也可以使用绝对长度单位。 相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。 注意: 我们文字大小以后,原创 2020-08-28 15:49:30 · 175 阅读 · 0 评论 -
css基础选择器
第01阶段.前端基础.CSS基础选择器 CSS选择器(重点) 学习目标: 理解 能说出选择器的作用 id选择器和类选择器的区别 应用 能够使用基础选择器给页面元素添加样式 1. CSS选择器作用(重点) 如上图所以,要把里面的小黄人分为2组,最快的方法怎办? 很多, 比如 一只眼睛的一组,剩下的一组 选择器的作用 找到特定的HTML页面元素 pink老师一句话说出他们: ※※※※ **CSS选择器干啥的? 选择标签用的, 把我们想要的标签选择出来 ** 必须记住的 css.原创 2020-08-28 15:46:51 · 185 阅读 · 0 评论 -
认识css
第01阶段.前端基础.CSS初识 CSS层叠样式表 学习目标 理解 css的目的作用 css的三种引入方式 应用 css三种引用方式的书写 通过样式规则给标签添加简单的样式 1.HTML的局限性 说起HTML,这其实是个非常单纯的家伙, 他只关注内容的语义, 比如表明这是一个大标题,用 表明这是一个段落,用 表明这儿有一个图片, 用 表示此处有链接。 很早的时候,世界上的网站虽然很多,但是他们都有一个共同的特点: 丑。 这个是一个外国比较早的购物网站 有些人就忍受不了了,你就不能把自.原创 2020-08-28 15:44:43 · 107 阅读 · 0 评论