本篇文章探讨了HTML+CSS入门之DIV + CSS布局的一些知识汇总，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

<

 以下是polaris在工作中零碎记录下来的知识，在此汇总一下。
1、开发之前，应设计好页面布局
2、插入多张图片时，如果想要图片并排，注意之间不能换行，换行会被当成空格。且一般与它的父元素也别换行。
3、float:left是对当前元素而言的
4、当需要位移一点点时，可以使用相对定位：position:relative;left:10px;top:7px;等
5、一般，网页分为：头部、导航和内容，有时还有脚部。
设计时，可以有两种方法：
5.1、对于静态网页（html），可以使用div来分成几部分。如下：
而对于content，可能还得分为左右。如：
5.2、对于动态网页（如jsp），可以把这些页面分开，然后导入需要的部分。每个页面可能就只包含自己的content。
6、对于CSS的设计，可以根据上面第一种情况来实施。
6.1 将CSS文件分门别类：
base.css，header.css，nav.css，footer.css
其中，base.css包含页面中通用的css设置
然后，新建一个main.css文件，把上面的css文件放入其中
@import url("base.css");
@import url("header.css");
@import url("nav.css");
@import url("footer.css");
6.2 编写CSS时，可以按如下顺序执行：
（1）先编写全局样式(base.css)
* { margin:0; padding:0; word-wrap:break-word; word-break:break-all; }
body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }
a { color:#0287CA; text-decoration:none; }
a:hover { text-decoration:underline; }
ul, li { list-style:none; }
img { border:none; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
html { overflow:-moz-scrollbars-vertical; } /* 在Firefox下始终显示滚动条*/
（2）然后是可大范围内重用的样式
大多数页面都会用到头部样式、导航样式和尾部样式。因此，header.css、nav.css和footer.css是可以重用的样式
#header{
width:800px;
height:80px;
border: 1px solid #AAAAAA;
margin:10px auto;
background:#3B5998;
}
margin:10px auto使其能够居中。
（3）最后编写细节方面的样式
这里主要是为每个页面单独编写属于自己的样式。
   

本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！