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