Css:高级技巧

1.精灵图使用

Css:高级技巧_第1张图片Css:高级技巧_第2张图片

 用ps的切片功能测量图片大小和位置

Css:高级技巧_第3张图片

2.字体图标

Css:高级技巧_第4张图片

Css:高级技巧_第5张图片

 Css:高级技巧_第6张图片

Css:高级技巧_第7张图片

 Css:高级技巧_第8张图片

 Css:高级技巧_第9张图片

Css:高级技巧_第10张图片

3.CSS三角形

Css:高级技巧_第11张图片

 4.元素显示隐藏

Css:高级技巧_第12张图片

Css:高级技巧_第13张图片  

Css:高级技巧_第14张图片

5.鼠标样式

Css:高级技巧_第15张图片

6.输入框input 轮廓线

Css:高级技巧_第16张图片

 7.防止文本域拖拽

Css:高级技巧_第17张图片

8 vertical-align实现行内块和文字垂直居中对齐

Css:高级技巧_第18张图片

Css:高级技巧_第19张图片

 Css:高级技巧_第20张图片

 9.单行文字溢出省略号显示

Css:高级技巧_第21张图片

10.多行文字溢出省略号显示 

Css:高级技巧_第22张图片

 11.布局技巧

     1.相对定位会压住标准流或者浮动

Css:高级技巧_第23张图片

     2.图片浮动+文字 就可以直接做出下面的效果  浮动就是用来做文字环绕的

 Css:高级技巧_第24张图片

    3.行内块的妙用  父级盒子直接 text-align=center 就可以居中

    4.CSS 三角强化 下图如何做?

 Css:高级技巧_第25张图片

 Css:高级技巧_第26张图片

 Css:高级技巧_第27张图片

 Css:高级技巧_第28张图片

 Css:高级技巧_第29张图片

 Css:高级技巧_第30张图片

 Css:高级技巧_第31张图片

你可能感兴趣的:(css,css)