学习笔记（三）

一、网页制作流程：　　

1. 　　制作效果图
2. 　　结构图  切图（边切图，边写代码）
3. 　　代码准备
4. 　　边写代码，边测试（兼容性）
5. 　　线上测试

　　ps：建议一边切图，一边写代码，一边测试兼容性。

二、从代码的稳定性角度，去考虑布局，则选择的先后顺序，如下：

1. 　　优先标准流——其次浮动流——最后定位流。
2. 　　 优先盒子本身的宽高——其次padding——最后margin。

三、字体、字号和行高的设置：

　　很多浏览器默认字体大小为16px，比如：火狐，谷歌。

　　字体颜色比较少用纯黑色，新浪+搜狐用的是#333，淘宝用的是#3c3c3c。

　　建议：

　　　　　按照页面字体最多的字号去设置。颜色同理。

　　　　　让行高比字体大6-7像素。约合1.5em，150%。

　　

四、img{border:0; display:block;} /*清除图片底侧空隙*/

　　很多浏览器（火狐+IE6）中的bug，若盒子宽高都100像素，图片宽高也都为100像素，但图片底下就是有一行白色的空隙，这时候就要在img标签加上display:block;

五、tips:

　　1.　　h标签：

　　　　给h标签加{font-size:100%;}，则h标签在网页里显示的字体的大小和body设置的一样，但是H标签的仍是加粗。

　　　2.　　网页版心（主体部分）的宽度：

　　　　根据实际需求。但960px是合适的。因为960能给3,4,5，6,8,10,12,15整除。

　　3.　　盒子的实体化：

　　　　给盒子宽+高+背景颜色，调节好后，再根据需要换掉背景。

　　4.　　设置padding属性，会改变盒子大小，so：

　　　　要么给盒子减去/增加相应的值，要么添加box-sizing属性。

六、logo的优化六步曲：　

　　1.　　logo的图片尽量要小。

　　2.　　一般情况下是作为背景放入的。

　　3.　　肯定加H1标签，目的：提权。

　　4.　　搜索引擎对文本链接最友好。加<a href=”#”></a> /*链接的网址是本公司的网址*/  

　　5.　　给a添加title属性  提高用户体验。

　　6.　　把<a></a>之间的字，给隐藏掉。

　　　　隐藏方法1：

　　　　　　　　用text-indent:-999em;值是负数就不会跳到下一行，具体数值没规定，但要大一些，确保不在屏幕上出现。

　　　　　　　　把a的显示形式改为块状，同时设置其高度height和logo的高度一致。宽度会继承，不用设置。

                      .logo a{display:block; height:**px;}

　　　　隐藏方法2：             

　　　　　　　　  用处理overflow里的hidden，让title里的字体隐藏起来。

　　　　　　　　  Width:（设置和logo的宽度一致）

                         Height：0；

　　　　　　　　   Padding-top:（设置的值和logo的高度一致）

　　　　　　　　　Background：url（路径）no-repeat

　　　　　　　　   Overflow:hidden;

　　　　PS：二级域名，其他页面的logo不要和首页的Logo取相同的名称。

　　　　　　子元素会继承父元素的宽度，但是不会继承父元素的高度。请根据实际情况去设置。

七、选择器的权重（从左到右，权重从小到大）：

　　标签选择器——类——ID——行内样式——！important

　　若后面设置的样式的权重比前面的小，则样式不起作用。

　　对策：提权

八、初始化总结概括为：

　　1.　　块元素：去默认的margin+padding+border值。

　　2.　　Body设置：字号，行高，字体类型，字体颜色。（系统默认为宋体）。

　　3.　　Img去底侧空隙：边框border为0，清除图片的边框和底侧空隙display：block；

　　4.　　去掉列表样式。Ol，ul{ list-style:none; }

　　5.　　超链接a设置。a{ text-decoration:;},link+visited+hover+active四种状态的设置。

　　6.　　h标签：font-syle:nomal; font-size:100%;

　　7.　　清除浮动。

　　　　Clearfix：after{

　　　　　　Content：””;

　　　　　　Display:block;

                 Height:0;

　　　　　　Visibility:hidden;

　　　　　　Clear:both;

　　　　}

　　　　.clearfix{ zoom:1;}

 九、对Java script概念的理解：

　　1.　　Java script 是什么？

　　　　是用来实现交互的。（交互就是网页的元素针对用户的特定行为，产生指定的变化。）

　　　　首先，Java script是纯文本的，用任何的纯文本编辑器都能够编辑。同时它是网页的一部分，随着一个HTML页面被请求，Java script脚本也随之下载到了用户的计算机本地，在用户计算机本地渲染运行的。

　　2.　　Java script不是什么？

  　　　　Java script不是Java！

  　　　　Java script是轻量级运行在浏览器中的语言，而Java是跨平台的开发多种应用的语言。Jsp网站、安卓都是Java开发的。

 　　　　 Javascript和PHP、ASP、jsp完全不同。Java script是运行在用户的计算机中的，是前台的脚本；PHP、ASP、JSP是运行在服务器上的。Java script的功能单一，仅仅是用来开发页面效果的；PHP等语言可以与数据库交互，开发网站程序的。

 　　　　Ps：有Javascript的网页是静态网页，不是动态网页。

　　　　　　 所谓的动态和静态是指能否与数据库产生交互。只有PHP 、ASP、JSP这些网页，才是动态网页。

　　　　　　 Java script对大小写严格敏感，对换行、空格不敏感，但是推荐正确的文档缩进。

十、Javascript的事件名的命名：

　　必须是英文的，不能是中文的，可以包含数字，但不能全部都只是数字，也不能用数字来开头。

　　

十一、tips（position）：

　　给一个元素加了Position:absolute;之后，不设置top和left值，跟top:0; left:0;不一定是一样的。

　　不设置top和left值，此元素会脱标，留在原地。