宫小白

知识导航： 透视：perspctive 3D 位移：translate3d(x, y, z) 3D 旋转：rotate3d(x, y, z) 正文之前 先来解释一下页面的三维坐标系 x轴：还是水平向右（正值方向） y轴：竖直向下（正值方向） z轴：垂直于屏幕向外（正值方向） 1. 透视属性perspective及3D呈现 transfrom-style 1.1 透视属性 如果想使我们的页面...

知识导航： 2D 转换之 translate 移动 旋转 缩放 动画animation 1. 2D转换 2d转换的作用是将我们的盒子在二维平面上移动、旋转、缩放。 属性：transform 对应属性值 translate，移动 rote，旋转 scale，缩放 下面逐一解释 1.1 移动 基本语法： 综合写法 transform: translate(x, y) 分开写 transf...

知识导航： c3中新增选择器 属性选择器 结构伪类选择器 伪元素选择器 1. 属性选择 需求： 在不改变结构的情况选择下面的input盒子。 用我们以前的选择器，类，id可能很好实现。但用它们还得去结构里面添加类名 有没有别的方法呢，属性选择器来了。 实现： input[type="password"] { width: 100px; ...

知识导航： 盒子的显示与隐藏 用户界面样式 鼠标样式 input轮廓线 文本域脱拽问题 设置垂直对齐 使溢出text文本以省略号显示 css精灵 1. 盒子的显示与隐藏 应用：使一个盒子显示或者隐藏。如： 开始鼠标未经过我的淘宝 当鼠标经过我的淘宝 即，鼠标经过时盒子显示。鼠标移出时，盒子隐藏 1.1 display显示 基本语法： display: none 隐藏对象 displa...

知识导航： 何为定位 定位的分类及其特点 定位应用 定位是否也改变显示模式 1. 何为定位 分别看下面的效果图： 图一 图二 像图一左下角的可以随着页面的滚动，但自身位置可以保持在浏览器可视位置相对不变的小导航栏；图二压在轮播图上边的几个小圆点。这两种效果使我们前几篇所用技术无法办到的。 也许你会想浮动也可以使盒子脱标，压在其标准流盒子的上方。但这里我很遗憾的告诉你，浮动的盒子是无法压住图...

知识导航： 浮动的概念 浮动的用法 浮动的应用 与父兄弟盒子的关系 清除浮动 网页布局的核心就是如何使用css摆放盒子，及其修改样式。浮动的作用举足轻重 1. 浮动的概念 css提供了三种方法让我们进行盒子的摆放，它们分别是： 普通流 块级元素独占一行从上向下依次排列；行内元素则可在一行，从左至右。超过了其父盒子宽度自动换行 浮动 让盒子脱离标准流，它的主要作用是使块级的盒子可以在一行显示。...

知识导航： 盒子边框 盒子内边距 盒子外边距 涉及部分c3内容 网页的本质就是利用css设置盒子的大小，摆放盒子的位置。最后把内容图片、文字等放入其中。 标准的盒子模型： 1. 盒子边框 基本语法： border : border-width || border-style || border-color 属性 作用 border-width 定义边框粗细，单位是px ...

知识导航 复合选择器 标签的显示模式 行高 css背景 css三大特性 1. 复合选择器 问：我们有了上篇的基础选择器为什么还要学习复合选择器呢？ 答：在实际开发应用中基础选择并不能满足我们的需要，不能快速准确的选择标签。而复合选择器则能更为准确更为精确的选中目标元素 1.1 后代选择器 用来选择元素或元素组的子孙后代 即当标签发生嵌套时，内层标签就成为了外层标签的后代 语法格式： 父级 子级...

css 网站的美容师，它的作用便是对页面的样式进行修改、美化 知识导航 css引入的三种格式 css基础选择器 font属性 基本外观属性 css初识 概念： CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表） 作用： 主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的...