div+css左右布局和“同”字型结构布局

2013-05-12 分类：网站建设

网页的布局不可能像平面设计那么简单，除了上文提到过的可操作性外，技术问题也是制约网页布局的一个重要因素。虽然网站制作已经摆脱了HTML时代，但是还没有完全做到挥洒自如，这就决定了网页的布局是有一定规则的。

1、左右对称结构布局

“左右对称”只是在视觉上的相对对称，而非几何意义上的对称，这种结构将网页分割为左右两部分。一般使用这种结构的网站均把导航区设置在左半部，而右半部做主题内容的区域。左右对称性结构便于浏览者直观地读取主体内容，但是却不利于发布大量的信息，所以这种结构对于内容较多的大型网站来说并不合适。

HTML结构代码：

<divid="left">左边（left）</div>

<divid="right">右边（right）</div>

</div>

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结构代码：

</div>

</div>

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/news7/707.html

成都网站建设公司_创新互联，为您提供网站制作、网站排名、建站公司、微信公众号、云服务器、品牌网站制作

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容