HTML和CSS总结的一些注意事项

快速切图的方法：

0.勾选移动工具的时候，注意选中自动选择图层   而且一定要是组的状态：

 

1.一般一张图片，如果需要切得图片很少，不再使用切片工具，而是使用图片复制的方式，比如下图片。

新建图层（ctrl+D为取消框选）

选中图层快速复制新建病自动捕捉大小的一套快捷键：

1.移动工具选中指定图层，如上图所示。  2.矩形选框工具进行框选。  3.再点击移动工具进行选择 ctrl+c  进行复制   4.ctrl+n进行新建（将自动捕捉图层大小进行新建图层）  5.ctrl+v进行复制   

讲将建立一个最小包裹的图层。   保存图层为指定名称即可！     

在Pscs6的时候，部分图层如果不能根据复制进行新建，则需要进行图层的栅格化，将其转化为像素的图片格式才可以，比如文字等图层元素！

 

2.图层的切片工具   一般较少用到！    

总结切图规律：一般情况下图片切多大，就建立多大的容器即可。

 

拿到一张设计图，首先确定切图要素。

2.1 自动化切图：

文件---脚本---将图层导出到文件---png24格式。 即可精准切图

 

3.CSS实现注意事项：

css编写的时候一般一个选择符写成一行，如下所示，便于观察：

.wrap_up .down_free:hover{background:url("../img/free_hover.png") no-repeat center center;_background:url("../img/free_hover.gif") no-repeat center center;color: #feffff;}
.wrap_up .down_free:active{background:url("../img/free_active.png") no-repeat center center;_background:url("../img/free_active.gif") no-repeat center center;color: #cbcccc;}
.wrap_up .more_game{position: absolute;top: 538px; left: 722px;color: #feffff; font-size: 18px;}
.wrap .wrap_bottom{height:412px; background: url("../img/bg_980_2.jpg") no-repeat center top;position: relative;}
.wrap_bottom ul{position: absolute;top: 140px; right: 13px;}
.wrap_bottom ul li{float: left; width: 94px; text-align:center; margin-left:14px;}

 ID选择符在页面制作过程中不要轻易使用。写js的时候再用它。  通常使用类选择符。

类选择符的使用具有上下级的关系，包裹层次一目了然。名字长一点没有关系。

两个background背景图：gif一般用于兼容IE6浏览器，使用png格式的时候配上一张gif

{background:url("../img/free_hover.png") no-repeat center center;_background:url("../img/free_hover.gif") no-repeat center center;color: #feffff;}

另外使用如下代码，抹平浏览器的差异：

@charset "gb2312";
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul,div{margin:0;padding:0}
body, button, input, select, textarea {font: 15px/1.5 微软雅黑,tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight: normal;}
address,cite,dfn,em,var{font-style:normal}
ol, ul {list-style: none;}
a{text-decoration:none}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
button,input,select,textarea{font-size:100%}
img{border:0;}
table{border-collapse:collapse;border-spacing:0}

任何CSS一般都加上如上代码！