一.界面样式

二.精灵图

针对背景图片使用 把多个小背景图片整合到一张大图片中

    这个大图片称为sprites精灵图(雪碧图)

    移动背景图片位置 可以使用background-position

    移动距离为目标图片的x,y坐标 注意网页中坐标有所不同

    右x下y

    因为一般往上 往左移动 数值是负值

    使用精灵图需要精确测量每个小背景图片的大小和位置

1.引入大的精灵图作为背景

2.截取每个想要的图片

三.三角

注意要给盒子宽高都设置为0 先给所有边设置透明 再给想要的三角的那一边设置颜色 三角形的高即为边框的厚度

原理大致如下:原本是一个虚无的点 但是强行加上边框 边框是占据大小的 盒子的大小被自然加上了边框大小 并与中心点收缩成三角形 原本设置10px边框 那这个盒子就会变成一个宽度为20px的正方形 由四个三角形构成

四.三角进阶

刚才的构造三角只是简单的等腰直角三角形 实际上可以构造多种形状的三角形 只需要做好对border-width大小的的控制

如图 如果我需要红色三角形变为直角三角形应该怎么做?

易得 将下和左宽度调为0 并且将其他三个方向边框都变为透明色即可

效果如图

得到这种三角形我们就可以做出如下图效果 做出一个白色三角形盖住红色部分即可

五.margin负值运用

解决因多个盒子合并导致边框变厚

六.vertical-align:middle

经常用于设置图片或者表单(行内块元素)和文字垂直对齐

在之前学成在线用户头像部分可以使用 给头像图片增添vertical-align:middle属性