css+div 今日总结

忙碌了一段时间，前端界面学到不少知识。记录下，自己的所思所想所感...

1.网页布局、背景色以及整体风格

       网页布局常用的布局是顶部（top）、底部(footer)、中间部分(center)。顶部一般是标题（title）和菜单(menu),菜单一级菜单和二级菜单，二级菜单的样式方面有多中变化，一般体现在鼠标悬浮，鼠标点击时的字体颜色的更改和局部背景颜色的更改，没有特殊情况，顶部和头部每个网页都会用到，把他们写成2个jsp文件，那个页面需要用到，就引用。

引用jsp文件代码如下：

      <jsp:include  page= "../include/init.jsp"  flush= "true" />   page是jsp文件的路径
引用css文件代码如下：

     <link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/default/style/resourceConfig.css" />

       href是css文件的路径；request.getContextPath()是当前文件所在的根目录

在css文件中引用css文件的代码：

@import url(base.css);

      背景色决定了网页的整体风格。为了适应浏览器的打下，故背景图片不可设置成固定的宽度，高度可以固定，因为切图的时候把背景图片切成宽度是1px,高度是实际高度的图片，样式设置成x轴方向重复。网页的整个背景最好在body里面设置(body设置网页的字体 颜色 居中等等。).例如：

body{
    background:url(../images/bodyBg_01.png) left top repeat-x #ececba;
    margin:0;
    padding:0;
    font-family:"微软雅黑";
 }

div,p,ul,h1,h2,h3,h4,h5,h6{padding:0;margin:0;}

margin:0;设置body的上下左右边距都是0.

margin:0 aut0;设置对象居中，原理是设置对象的上下边距是0，左右的边距auto，auto就是左右的边距是一样的，那么对象自动居中。

2.css文件的书写技巧

    css+div布局就是为了实现内容和样式的彻底分离，设置网页的整体风格写成一个base.css文件，存放整体风格的样式代码。