div+css左右布局和“同”字型结构布局
2013-05-12 分类： 网站建设
网页的布局不可能像平面设计那么简单，除了上文提到过的可操作性外，技术问题也是制约网页布局的一个重要因素。虽然网站制作已经摆脱了HTML时代，但是还没有完全做到挥洒自如，这就决定了网页的布局是有一定规则的。
1、左右对称结构布局
“左右对称”只是在视觉上的相对对称，而非几何意义上的对称，这种结构将网页分割为左右两部分。一般使用这种结构的网站均把导航区设置在左半部，而右半部做主题内容的区域。左右对称性结构便于浏览者直观地读取主体内容，但是却不利于发布大量的信息，所以这种结构对于内容较多的大型网站来说并不合适。
HTML结构代码：
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结构代码：
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;
}
本文标题：div+css左右布局和“同”字型结构布局
链接地址：https://www.cdcxhl.com/news/707.html
成都网站建设公司_创新互联，为您提供微信公众号、品牌网站建设、ChatGPT、网站维护、软件开发、域名注册
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联
