”hello world“案例之页面布局css样式
XHTML编码完成后，CSS将发挥它的强大作用，天津软膜天花将结构化的XHTML文档定义成与效果图一致的页面。先编写页面布局，再细化页面元素，一步一步实现。
页面的主体结构由4层构成，分别是top、header、main和footer，这其中还包含logoarea、banner、container和linkarea这4个嵌套在内部的层。由于首页与内页的外观有很大差别，为了便于讲述，暂时将CSS样式分别写在首页与内页HTML文件的<head>区域，完成所有CSS样式编码以后再进行合并与优化。进行整体布局声明。选择body标签，定义外边距margin和内边距padding都为0，文本颜色设置为黑色(#000)。将内外边距声明为0可以消除部分浏览器的默认边距属性。进行整体布局声明的CSS代码编写如下。
body {
margin:0天津网站制作;
padding:0;
color:#000;
}
页面顶端装饰缕的c定义。，此层的宽度为100%，，块元素的默认宽度为100%，因此不必另外作宽度声明。毛定义高度为8px，设置背景色为浅蓝色(#65a9e6)。页面顶端装饰线条top层的CSS代码编写如下。
#top {
height:8px;天津网站建设
border-bottom:1px dotted #000;
background:#65a9e6;
overflow:hidden;
}
header层包括页面b-LOGO和Banner两部分。header层作为容器，一方面可以实现水平居中，二另一方面便于改版所需要的调整。header层的CSS代码编写如下
#header #logoarea {
float:left;
width:760px;
height:80px;
background:url(images/logoarea_bg.jpg) no-repeat right top;
}
#header #logoarea #logo {
float:left;
width:330px;
height:62px;
margin-top:9px;
background:url(images/logo.jpg) no-repeat 0 0;
}
#header #logoarea #logo a {
display:none;
}
#header #banner {
float:left;
width:760px;
height:190px;
background:url(images/banner.jpg) no-repeat 0 0;
}
header层的宽度和高度；外边距设置距离顶部为0，底部为18px；设置左右外边距为自动，以实现header层水平居中对齐。分别定义logoarea层和banner层的高度与宽度；并设置向左浮动；定义背景色。背景色的定义仅作为辅助编码，方便查看页面布局是否成功。main层是文章内容区，是container层和三个栏目介绍链接linkarea层的容器。首页与内页container层和linkarea层布局不同首页main层的CSS编码如下。
#main {
width:760px;
margin:0 auto;
}
#main #container {
float:left;
width:760px;
margin-bottom:18px;
background:url(images/container_bg_a.gif) no-repeat left bottom;
}#main #linkarea {
float:left;
width:760px;
}
main层的宽2度；外边距设置为上下、左右自动，实现水平居中对齐。定义container层和linkarea层均向左浮动；设置宽度与背景色。container层下外边距定义为18px，使得文章内容索引区与下部的三个栏目介绍链接区有18px的垂直间距。在内页container层和linkarea层形成两列式布局，container层向左浮动、linkarea层向右浮动，内页main层的CSS编码如下。内页1依农然豢是宽度7i 760px、，水平居中对齐，无需重复声明。内页的container层向左浮动；定义宽度为510px;设置外边距为0，层叠消除前部的代码中下外边距为18px的定义；定义辅助背景色。内页的linkarea层向右浮动；定义宽度为240px;定义辅助背景色。至此，页面CSS布局已经完成，由于主要内容层定义了辅助背景色，因此可以清晰地看到页面布局结构