  |
目录： 1、背景图合并和CSS Spirit 2、PS基本快捷键 3、hack技术基本书写，为什么不用？ 4、内核前缀 5、伪类afterbefore |
1、背景图合并和CSS Spirit
|
背景图合并在使用时有两种方法： ①一种就是你会PS，可以自己PS实现背景图合并成一张图片，再用background-position实现背景图的定位。 ②如果你不会PS，那可以用CSS背景图合并工具，直接选好图片后在线制作生成相对应格式的图片，方便快捷。 background的语法： background-color：red | #RGB; background-position:X轴坐标 Y轴坐标 | left| right | center | top.. background-size: 100px | 30% | cover | contain; 在线测试 background-repeat: repeat | no-repeat | repeat-x | repeat-Y background-origin：border | padding | content background-clip：border-box | padding-box | content-box background-attachment：fixed | scroll background-image：url 简写的形式：background:color url() positon repeat； 备注：background-size的属性值如果只设置一个值，则第二个值会被设置为 "auto"。 cover：实现把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 背景图合并技术优势：利用背景图合并技术可以减少向服务器端的请求，节省时间和带宽，对网站加速有很大的提升作用。可以实现两边圆角，中间无限延伸，通过子标签背景覆盖父标签，三层嵌套，截取图片的中间部分以及左右两边,算好图片的位置,然后利用position定位。 |
2、PS基本快捷键
|
ctrl+w 关闭 ctrl+r 标尺 右键标尺选像素或者厘米 左键点击拉出标尺线 要删掉直接拖出去 ctrl+ + 放大 ctrl+ -缩小 ctrl+1 到100%视图 ctrl+0 还原到最佳视图 ctrl+d取消选区 ctrl+t 变形 在变形过程中按住shift保持宽高不变 按Enter退出变形 Alt+Delete 前景色填充 ctrl+Delete 背景色填充 ctrl+z 撤销 ctrl+Alt+z 撤销多次 空格 切换到手状态 ctrl+g 图层分组 |
3、hack技术基本书写，为什么不用？
|
CSS hack：针对不同的浏览器写不同的CSS code的过程 CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法 ① 属性前缀法： IE6: _height: 20px; IE7: +height: 20px; IE6/IE7: *height: 20px; IE6.7.8.9.10: height: 20px\9; IE8.9.10.11 : height: 20px\0; IE9.10 : height:20px\9\0; Hack的利弊： 我们尽量避免使用CSS hack，但是有些情况为了顾及用户体验实现向下兼容，不得已才使用hack。比如由于IE8及以下版本不支 持CSS3,而我们的项目页面使用了大量CSS3新属性在IE9/Firefox/Chrome下正常渲染，这种情况下如果不使用css3pie或htc 或条件注释等方法时,可能就得让IE8-的专属hack出马了。使用hack虽然对页面表现的一致性有好处，但过多的滥用会造成html 文档混乱不堪，增加管理和维护的负担。相信只要大家一起努力，少用、慎用hack，未来一定会促使浏览器厂商的标准越来越趋 于统一，顺利过渡到标准浏览器的主流时代。抛弃那些陈旧的IE hack，必将减轻我们编码的复杂度，少做无用功。 |
内核前缀
|
浏览器 |
内核前缀 |
内核 |
|
FF |
-moz |
Gecko |
|
IE |
-ms |
Trident |
|
Chrome |
-webkit |
Blink |
|
Opera |
-o 换成-webkit |
Persto 换成blink，原先已弃用 |
|
Safria |
-webkit |
webkit |
伪类after before
|
:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素 :before 伪元素在元素之前添加内容 这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。 :after 伪元素在元素之后添加内容 这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。 |
实现效果：
[html] view
plaincopyprint?.png)
- 实现简单代码
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Testing</title>
- <style>
- .wrap:before {
- content: ‘‘;
- width: 100px;
- height: 50px;
- display: block;
- background: #F00;
- }
- .wrap:after {
- content: ‘‘;
- width: 100px;
- height: 50px;
- display: block;
- background: #Fa0;
- }
- </style>
- </head>
- <body>
- <div class="wrap"></div>
- <script></script>
- </body>
- </html>
伪类清浮动：
|
.clearfix:after {content:"\200B";display:block;height:0;clear:both;} .clearfix {*zoom:1;} |
项目期复习总结：背景图合并，hack，浏览器内核前缀，伪类after before