网页的布局不可能像平面设计那么简单，除了上文提到过的可操作性外，技术问题也是制约网页布局的一个重要因素。虽然网站制作已经摆脱了HTML时代，但是还没有完全做到挥洒自如，这就决定了网页的布局是有一定规则的。
1、左右对称结构布局
“左右对称”只是在视觉上的相对对称，而非几何意义上的对称，这种结构将网页分割为左右两部分。一般使用这种结构的网站均把导航区设置在左半部，而右半部做主题内容的区域。左右对称性结构便于浏览者直观地读取主体内容，但是却不利于发布大量的信息，所以这种结构对于内容较多的大型网站来说并不合适。
HTML结构代码：
左边（left）
右边（right）
CSS样式代码：
/*主面板样式*/
#container {
width:980px;
height:650px;
margin:0px auto;/*主面板DIV居中*/
background-color:gray;
}
/*左边面板样式*/
#left {
width:265px;
height:100%;
float:left ;/*左边面板右浮动*/
background-color:green;
}
/*右边面板样式*/
#right {
width:715px;
height:100%;
float:right ;/*左边面板右浮动*/
background-color:blue;
}
2、“同”字型结构布局
“同”字结构名副其实，采用这种结构的网页，往往将导航区置于页面顶端，一些如广告条、友情链接、搜索引擎、注册按钮、登陆面板、栏目条等内容置于页面两侧，中间为主体内容，这种结构比左右对称结构要复杂一点，不但有条理，而且直观，有视觉上的平衡感，但是这种结构也比较僵化。在使用这种结构时，高超的用色技巧会规避“同”字结构的缺陷。
HTML结构代码：
顶部（top）
左部（left）
中部上
中部下
右部
CSS样式代码：
/*主面板样式*/
#container
{width:980px;
height:650px;
margin:0px auto;/*主面板DIV居中*/
background-color:gray;
}
/*顶部面板样式*/
#top {
width:100%;
height:200px;
float:left ;/*左边面板右浮动*/
background-color:red;
}
/*左部面板样式*/
#left {
width:200px;
height:450px;
float:left ;/*左边面板右浮动*/
background-color:yellow;
}
/*中部面板样式*/
#mid {
width:580px;
height:450px;
float:left;
background-color:green;
}
/*中部上面板样式*/
#mid-top {
width:100%;
height:200px;
background-color:#600;
}
/*中部下面板样式*/
#mid-bottom {
width:100%;
height:250px;
background-color:#0FF;
}
/*右边面板样式*/
#right {
width:200px;
height:450px;
float:left;
background-color:blue;
}
