学习笔记
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习笔记相关的知识，希望对你有一定的参考价值。
一、网页制作流程：
- 制作效果图
- 结构图 切图（边切图，边写代码）
- 代码准备
- 边写代码，边测试（兼容性）
- 线上测试
ps：建议一边切图，一边写代码，一边测试兼容性。
二、从代码的稳定性角度，去考虑布局，则选择的先后顺序，如下：
- 优先标准流——其次浮动流——最后定位流。
- 优先盒子本身的宽高——其次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;}
以上是关于学习笔记的主要内容，如果未能解决你的问题，请参考以下文章