。ps的基本操作:
想要将图片转化成网页最简单的方式就是使用ps了。
ps的默认单位不是像素，注意修改PS的单位。
用ps拾色器、选取、标尺等修改。一般公司有ps的大神。但也需要常规操作。
小项目实战：
首先：
分析布局，写基本的div元素
CSS：修改样式
设置div元素的宽高
*{
margin：0；
padding:0;
}}
设置页面字体
body{
font:12px/1 宋体；
}
分割div元素：
使用ps查看图片的大小，修改图片大小适应布局；
给body布局，一般需要给body设置margin:: 0 auto；
用拾色器分别设置基本样式。该截图的截图，该使用样式的使用样式，使用ps量位置。
设置的时候注意浮动不会超过原来的块级元素，可以通过换位或者让块级元素浮动即可。
设置行高和块元素的高度相同可以设置垂直居中。
如果外层宽度一定设置padding属性，会将元素向内挤。
注意一些简写属性会覆盖掉原有的属性。
元素的高度如果暂时不清楚，就不要指定宽度了，可以先采用使用其他元素撑开，再决定宽高。
遇到字体注意他到底是衬线字体和非衬线字体。
IE6一个元素上面有个内联元素浮不上去，需要给内联元素也要设置浮动。
相对定位：
定位是比布局更加强大的布局方式，他可以通过position属性来设置定位.
position:
static：没有开启定位。忽略left right top bottom的值。
relative；相对定位。
1.当开启了相对定位之后，而不设置 偏移量时！元素不会发生变化。
一、开启之后可以通过left right top bottom设置偏移量。相对于定义位置的左右上下的便宜量。
二、相对于元素在文档流中原来的位置开始定位。是相对于自身位置开始定位。
三、相对定位元素不会脱离文档流，原来的位置还属于定位元素，但是他的形态会发生偏移。
四、相对定位会使元素上升一个层级，使它漂浮在其他元素的上面。
五、通常偏移量只有两个就可以，一个水平偏移，一个垂直偏移。
fixed：固定定位：也是绝对定位的一种。
一、设置该属性会让元素脱离文档流。
二、固定定位也是一种绝对定位，它的大部分属性和绝对定位一样，但不同的是他永远都会相对于浏览器窗口进行定位，不会受到祖先元素开启了定位的影响。
三、它不随着滚动条滚动。固定在窗口的位置。
可以设置长时间需要注意的点，比如观看视频的位置，ie6不支持固定定位。
如果需要兼容ie6就需要使用js了。
absolute：绝对定位。
一、开启绝对定位之后，如果不设置偏移量，则元素的形体的位置不会发生改变。
二、绝对定位是相对于浏览器窗口进行定位的。
三、绝对定位是相对于离他最近的第一个开启了定位的元素的祖先元素开始定位的。（只要不是默认定位都算开启了定位，可以设置relative然后不设置属性就可以开启绝对定位了。）
四、绝对定位会使元素提升一个层级
五、绝对定位会改变元素的性质，内联元素会变成块元素，块元素的宽高默认都会被内容撑开。
元素的层级：
一、如果定位元素层级是一样的则下面元素会盖住上面的（元素在html中结构的位置）
二、通过z-index可以设置元素的层级，让前面的也可以覆盖后面懂得。层级越高越优先显示。
三、对于没有开启定位的元素不能设置z-index。
四、父元素的层级再高也不会盖住子元素。如果确实要隐藏设置透明度。
透明度：
opacity
值在0~1.可以透过元素看到其他元素。
兼容性：ie8及以下不支持opacity，如果希望ie8及以下兼容需要使用以下属性来代替。
flilter:alpha(opacity:50);滤镜效果，值在0~100之间的值。
背景：
图片背景：background-image:url(地址)
如果背景图片大于背景，默认只有左上角。需要设置容器的大小；
如果图片比背景小，会使用平铺的方式充满整个背景。背景图片会覆盖背景颜色。背景颜色将会作为背景图片的底色。
一般设置背景图片时都会指定背景颜色，一般背景图片需要时间加载，有背景颜色可以优化用户体验。
background-repeat:no;反对平铺；可以设置重复方式，repeat默认值，他是双方向平铺，norepeat不重复，有多大显示多大。
repeat-x会在x轴水平方向重复。repeat-y沿着垂直方向重复。
渐变效果：
截图或者设置渐变，可以使用只是截图一小块，然后进行平铺做背景，就可以完成渐变效果。
background-position：对背景图片进行定位。默认值是%0，%0；还可以设置上下左右方向，还可以选择
左上角 %0,%0右下角是%100，%100或者使用background-position:300px,200px使用偏移量进行偏移。
background-attachment:用来设置背景图片是否和页面进行滚动。
可选值：scroll默认值，随着窗口滚动，fixed不随页面发生滚动，就是相对于浏览器窗口。不随窗口滚动的图片，一般设置给body不设置给其他元素。
按钮练习：
如果仅仅使用图片做按钮可能会产生闪烁现象。第一次切换图片会有非常快的闪烁，如果要求比较高，这次闪烁会造成不佳的用户体验。
原因是，背景图片时以外部资源的形式加载进网页的，浏览器没加载一次外部资源，都需要一个外部请求，网站发送请求默认情况下不包括外部资源。
但是外部资源不是同时加载的，浏览器需要多次申请才能加载完成资源。
最好可以在触发之前就先进行加载行为。
如果载入按钮，可以选择开始前一次性载入，比如将三个图片变成一条长图片，当hover,onclick或者其它事件时可以选择移动背景图片。使用background-position来切换图片显示的位置。
图片整合技术。
俗称CSS-spite技术。
背景简写属性：
background: 颜色 url地址 position两个属性 重复 attachment；
没有顺序要求，如果没有设置就是默认属性。
雪碧图的制作与使用：
如何使用雪碧图：
第一步：保存雪碧图，将每一个单独的图设置好宽高让其居中。
第二步设置偏移量，即所需的元素距离左上角的偏移量，需要将图片移动到整个元素的左上角。
第三步，学会用ps自己制作雪碧图；
将图片在ps中打开，调整画布大小，可以选择横着加入图片，将画布宽度增宽，将不同的图片粘在一张上。。
整合完之后，可以根据需求存储不同的格式，以便再次使用。
表格简介：
在HTML中使用table标签创建一个表格,
使用tr表示表格中的一行，
使用td表示表格中的一个单元格。
table中默认两个单元格之间的线是不重叠的。
表格中的单元不会去占用原来没有的单元格，如果需要合并单元格，需要使用colspan=“2”横向合并两个单元格，使用rowspan可以纵向占两格。
可以使用border-space调整边框之间的距离，即便设置为0，依然会有两个像素宽度。
使用border-collapse:collpase表示单元边框合并，注意这里的属性是在table中指定的。
如果设置表格可以设置各行变色，让显示效果更佳。
这样就不能直接选择tr可以选择伪元素可以使用odds even。
tr:noth of type(even)
设置鼠标hover让移入哪行哪行变颜色。
IE6不支持隔行变色，ie6不支持给a以外的元素使用hover和active属性；需要使用js去写了。
长表格：
如果表格要求非常长的需要使用表头、表格主体、表格底部。
如下属性：
thead
tbody
tfoot
tr需要写在这些标签当中，表头可以用th标签进行表示表头内容。
如：
<tr>
<th></th>
</tr>
通过这样的方式可以将几种不同的部分区分开来。而且tfoot,thead无论写在哪儿，都是一个显示在底部，一个显示在头部。
tr是tbody的子标签而不是body的属性。
表格的作用是表示一些格式化的数据，在很久很久以前表格还用来做格式化布局。不方便维护和检索，在已经被CSS淘汰了。
注意父元素默认被子元素撑开，如果没有设置好固定尺寸，最好观察清楚再设置百分比布局。
表格的列数是td最多的那一行决定的。注意表格是可以嵌套的。
clearfix：
相邻的子元素和父元素的外边距会发生重叠，子元素的外边距会传递给父元素。空的div是不能隔开子元素和父元素之间的距离的。
使用空的table在子元素和父元素之间，可以阻止父元素和子元素的重叠，但是这样会增加空的结构。
可以设置before或者after添加表格，content是添加内容的，而table需要作为内容添加进去，可以使用display:table添加内容进去，并且也是一个块级元素。
和之前的浮动效果类似：还有一种更好的解决方法。
可以使用添加
子元素父元素外边距重叠问题：
before{
content:"";
display:table;
}
高度坍塌问题：
before{
content:"";
display:block;
clear:both;
}
解决双重问题：
元素：before,元素：after{
content:"";
display:table;
clear:both;
}
注意：这是给父元素添加的
表单介绍：
表单是将用户填写的信息提交给服务器的。
创建表单：form
form 属性：action表示向哪儿提交数据，这个属性是 表示一个服务器地址，
提交按钮没有也能提交，但是这样就显得很不友好。
填写表单项：
<input type="text" name=">name表示表单的提交信息，后台是通过name获取值的，不要忽略这个属性。
提交方式，多个表单项提交的内容通过&并列提交的。
value默认值
type="password"密文输入
type=“radio”只能一个按钮，单选。需要设置多个radio的name的值相同的中，只能选择一个选项。这样才能达到一个单选的效果。
单选按钮不需要用户填写内容的属性需要填写一个value属性，这样才能将不同的值传递给服务器。
tyoe="checkbox"多选都需要name分组，value键入默认值。
使用select创建一个下拉菜单。下拉列表中需要填写一个个列表项option标签name 给select、value给option。
checked=“checked”默认选中
selected="selected"下拉菜单中默认选中select专有弧形multiple="multiple"可以让select形成多选，但会自动展开。
optgroup标签可以对选项进行分组，label属性表示组名。
<input type="button">单纯的按钮，暂时没有任何功能，使用js可以绑定不同的函数完成很多扩展功能。
<input type="reset">重置
<input type="submit" >提交
最好使用成对的标签上面虽然是自结束标签但在语法上不好解决。反而下面的标签更加灵活。
<input type="submit">提交<input>
textarea可以创建一个文本域（多行文本框）也可以写一个name
提示文字：
label可以用来重定向标签
<lable for=“usr01”>用户名：</lable>
<input type="text" id="usr01">
点击用户名这个字，会直接将光标聚焦到usr01文本框中。
长表单的标签：
长表单允许将大表单分成若干部分，可以通过fieldset为表单项进行分组，就像optgroup差不多。，还可以通过legend标签指定组名。
框架集：
内联框架ifame
框架集和内联框架的作用是一样的，可以同时引用多个页面。
框架集是ifame的升级版，
在h5中推荐使用框架集。如果做设计就免了。
<frameset>不能和body出现在同一个页面中，如果需要使用frameset就不能使用body。
用框架集的页面就是要不能引用自己的页面。所以这也是不推荐他的原因，如果搜索引擎发现网页是框架形式的，就不会收录。使用框架集，意味着不能使用自己的页面。
每引用一个页面就需要多一个请求，所以网络是比较慢的。
用法：
<frameset>
<frame src=""/>
<frame src="">
</frameset>
引入几个页面就写几个frame
frameset需要使用rows属性，这样是一行一行摆放的，cols是列摆放。这两个属性必须选择其中一个，表示是按行排列还是按列排列。
并且还要使用百分比设置占据页面宽高。
rows="50%,20%，30%"
表示分成三列。
frameset中可以嵌套；
IE6png修复
图片如果是中文名，ie可能显示不正常。
ie6png 修复是指，ie6不支持png透明图片，ie6在对png24支持度不高，如果使用png24会让透明效果消失，显示一个偏蓝的效果。
png8清晰度低
png24清晰度高
第一种方法：在ie6中可以通过png8代替png24，但是这样操作会损失图片的清晰度，边沿会有锯齿状。
第二种方法：使用javascript文件处理，需要引入一个外部的javascript文件，写一下简单的javascript代码来处理这个问题。
js代码可以进行压缩的，后缀名为min.js将代码变成一行。
未压缩的代码可以进行阅读的。
一般使用未压缩的做开发，压缩的做成产品。
条件hack：
如果需要在特定浏览器执行，需要使用其他条件，而如果不加，会让其他浏览器造成负担。
CSS-Hack：
有一些特殊的代码只需要在某些特殊的浏览器中执行，我们不希望其他浏览器执行其他浏览器不执行，这时就需要CSS-Hack解决这个问题。
它是一段特殊的代码：
条件hack
<!--[if IE]>
内容
<![endif]-->
内容除了IE其他浏览器都会将其作为注释。但是ie10及其以上不支持这种方式。这里面可以通过修改上述代码的IE为自己想改的浏览器版本IE6就可以特定浏览器啦。
还可以通过判断范围内浏览器进行显示
<!--[if lt IE 9]>
内容 在IE9以下显示。lt 表示小于 gt 大于 lte小于等于 gte大于等于。！指定除了这个版本外其他的ie版本
<![endif]-->
这个只支持在 ie10以下的浏览器有用。
一般在开发需要准备两个样式表去兼容ie浏览器，来解决兼容性问题。
还有属性hack和条件hack。
属性hack
selector{
<hack>样式属性<hack>;
}
使用下划线_做开头的属性选择ie6及其一下
使用*做开头选择ie7以下
\9 i显示e9以下
\0写在样式的后面；opera15以下ie8及以上的浏览器能够识别
hack是不推荐使用的，不到万不得已不要使用。这是小的利用bug实现的功能，最好使用js方便日后维护。
*ie6以前的认识，hack
*+ie7以前的认识hack
这里面的hack只是列举一点，其实他还很多浏览都能有不同的hack。
项目创建“使psd变成一个网页”：
1.首先清除默认样式：
引入外部reset.css文件。
2.引入页面配置文件
创建新的css文件
3.注意命名，要么使用英文，要么使用拼音。
驼峰命名法
也可以全部小写，单词间使用_下划线。
4.寻找背景。
不要把背景全部截下来，不然网页大小固定，就很难做继续的开发。
然后量尺寸，背景不足的地方用样式替代。，截图的大小尽可能低，比如使用宽度一个像素的也可以。
5.网页先布局再写，还是一点一点的去写。
网页先布局再写，需要记忆好样式，不然容易忘记样式，后期寻找css文件困难。
网页后布局，虽然开发难度较低，但是不容易观察好效果，需要长时间修改代码。
6.设置样式不要只对单一元素进行设置，考虑长远角度，设置样式之后，可以通用与其他元素更好。
7.裁剪原图：选取图层，移动水平线，圈出图形，去除背景。（ie6不支持png24）
8.设置字体，注意chrome最小字体大小为12px
9.如果需要加效果，需要和沟通，设计的事不是前端管的，只需要和相关的人员沟通。
10.banner；
写一点测一点。
11.注意以下问题；
高度塌陷问题：
新设置的内容竟然在上面，有浮动元素不在容器内部等等。
IE6png修复问题
出现奇怪的白色边框
外边距重叠问题
无法让内部元素撑开父元素
内联元素浮动问题。
元素浮动不到空白处等等。
12.contack联系栏 可能遇到的问题
联系栏可能包含不同的结构，需要观察好布局样式再下手。最后能够“避重就轻”，从简单样式入手。
设置表单栏：输出栏可以使用背景图片替换原有的边框，让样式更加美观.
ie:textarea中会自动生成滚动条，可以使用overflow:auto自动去除滚动条。
而且这个元素还可以默认被调整大小，需要设置不能调整大小。resize:none可以让他不能修改。
最好将所有浏览器的默认样式都先统一了，不然不同浏览器浏览会使样式不统一，造成重新微调样式。
注意文字到输入框的距离，稍微缩进一点，还有设置输入框的行高（尤其是将原本的输入框弄没了的）
文本框中的提示文字不是value，需要使用placeholder在文本框中可以通过文本框指定提示文字。
这个属性在ie8及以下的浏览器中是无效的。如果要兼容需要使用js。
还有就是在ie6中输入的文本框会随着文字输入滚动，需要设置背景图片为fixed，但是在其他浏览器会直接促使文本框奔溃。
可以设置hack让ie6单独起作用。
不同的浏览器对于空格的处理大小不一样，注意元素代码之间存在空格，网页中也会存在空格
如果遇到用div装浮动元素，需要设置浮动的效果，需要记得清除浮动，否则可能出现高度坍塌问题。
千万不要忽略行高问题，否则会产生怎么调边距都会产生误差。
cursor:pointer设置鼠标移入指针。
还需要注意的是浏览器对某些样式的渲染问题。
需要调试进行特殊处理
ie6双倍边距bug
当ie6中margin:100px和float:left同时设置就会出现外边距是设置值的二倍。
使用hack可以但是比较麻烦。
可以加display:inline可以解决双倍边距。
对于浮动元素而言，设置display:inline没有任何影响。
用bug 解决另一个bug。
在工作中项目开发还需要的流程：
1.需求分析：
需要前端页面的设计都需要设计。大概需要三分之一时间进行需求分析，当然大半部分是产品经理来做的。
然后大概有1/6的时间是用来编码的
1/2的时间是用来改bug和测试的。
一种是性能测试，一种是业务测试。
性能测试：网页的访问速度，这里不管bug，只管测试了多长时间，这个时间不能超过三秒。需要测试高并发的状态，多人访问就慢了。
所以编码需要提高网页的访问速度。
改善：
一、需要在生产环境中需要删掉，代码的换行、缩进、解释等。需要对代码进行压缩。
比如需要对js和css文件进行压缩。下载相应软件。也就是min版本。
二、对图片资源进行压缩整合。小图变成一个雪碧图。
雪碧图有限制的：一般用来做背景图片（宽高都固定的图片。），而用作链接的图片不能使用雪碧图（尽量把图片变成背景）
选择画布，或者修改画布大小的时候需要指定的扩展的方向，一般图片放在画布上需要有点空格，方便选中。
最后裁切画布。文件存储为web存储格式。然后修改源码，引入雪碧图，
然后修改偏移量。在background中修改。
来自尚硅谷视频内容总结2015的
后续继续更新前端知识
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
