学习模仿lionhit网站首页的过程总结

今天学习模仿了lionhit以前网站首页的页面，学习到了很多新知识，也遇到了许多问题，现在写篇博客总结一下。

开发过程

整个开发过程为： 首先整体布局，用div将头部，主体，尾部分别分割，还要用一个大的div包含头部、主体和尾部。然后依次从头部到中间内容到尾部依次分别开发，内容差不多开发完毕之后。然后进行色彩字体等微调。最后检查浏览器兼容情况并采取相应措施解决。

CSS初始化

css初始化的原因： 当我们对某些标签不设置样式时，浏览器通常会用自己默认的样式表来为这些标签添加样式，由于不同的浏览器默认的样式有所不同，所以会导致我们制作的网页在不同的浏览器上的某些标签样式不一致。

css初始化方法： 通过引入CSS初始化样式表来使CSS初始化。

CSS伪类

a标签伪类

• a:link 未访问的链接

• a:visited 已访问的链接

• a:hover 鼠标移动到链接上

• a:active 选定的链接

注意：四者顺序必须如此，不能更改。

字符实体

字体主要分为

• 衬线字体 sans-serif

• 无衬线字体 serif

问题： 由于每台电脑安装的字体可能不一样，写HTML页面时可能你用的字体在别人的电脑上没有。

解决办法： font-family: "微软雅黑" , SimHei , sans-serif; 意思是先在用户电脑上查找是否有微软雅黑字体，如果有则使用微软雅黑字体，否则查找SimHei，如果有则使用SimHei字体，如果还是没有，则在用户电脑上随便选一种无衬线字体（sans-serif）。

文字竖直居中放置

文字竖直居中放置方法： 设置行高line-height等于height高度。

div{
				height: 25px;
				line-height: 25px;
				overflow: hidden;
		}

使用overflow: hidden;的设置是为了防止内容超出容器或者产生自动换行，这样就达不到竖直居中的效果了。

文字竖直居中放置原理： 文本存在于文档流中，文档流指将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素。文字在每行中居中显示，由于窗体存在多行，所以文字看起来就在右上方。当把行高设置成窗体高时，窗体中只存在一行，所以文字看起来就居中显示了。

img替换元素

问题： 如果img是块状元素，可是多个img标签显示的图片并排放置；如果img是内联元素，可是又能设置它的宽高。 img图片与其他元素会有3px的像素间隔。

原因： img是特殊的内联元素。对于普通的内联元素，显示的内容由标签决定，但是img显示的内容不知道，它由src引入的图片有关。浏览器不知道img标签的内容，它需要引入的内容代替，所以img是替换元素。替换元素是能够设置宽和高的。 通过设置img为块状元素，消除3px差距。

浏览器间常见的兼容性问题

主要的四类问题

• 没有使用正确的DOCTYPE

• 各浏览器对不同标签的初始值不同。解决方法：引入CSS初始化文件

• 自身书写不规范。例如该浮动的元素未浮动

• 浏览器bug

常见的浏览器bug

• IE下盒模型bug 解决方法：使用严格的doctype声明

• IE下双倍margin bug：对于左浮元素，左margin是定义的2倍，对于右符元素，右margin是定义的2倍 解决方法：_display: inline

• IE不认识a:link 解决方法：直接写a，效果和a:link一样

其他

设置li列表项之间上下相隔距离：height

文本左右居中：text-align

不知道颜色时最好都设置一种背景颜色

div高通常不要设置，它会被内容所撑开

通常字体，颜色等不要用默认，因为不同浏览器默认的字体大小不一样，颜色设置也不一样，所以最好都自己设置一下。