div+css页面布局

最新推荐文章于 2020-08-18 22:52:30 发布

原创最新推荐文章于 2020-08-18 22:52:30 发布 · 540 阅读

1 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了网页布局设计的核心概念，包括容器、头部、主体、侧边栏和底部的CSS样式应用，通过实例展示了如何使用HTML和CSS创建响应式网页布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果：

500 Internal Server Error

(图片为效果图：上——左右——下)

代码：

<!DOCTYPE html>
<html>
<head>

<style type="text/css">
*
{
margin:0;
padding:0;
}
#container
{
width:70%;
background-color:Red;
margin:0px auto;
}
#container #header
{
height:150px;
background-color:Blue;
}
#container #pagebody #sidebar
{
width:15%;
height:500px;
float:left;
background-color:Olive;
}
#container #pagebody #mainbody
{
width:85%;
float:left;
height:500px;
background-color:Black;
}
#container #footer
{
height:150px;
background-color:Gray;
}
</style>
</head>
<body>
<div id="container" >
<div id="header">

</div>
<div id="pagebody">
<div id="sidebar"></div>
<div id="mainbody"></div>
</div>
<div style="clear:left"></div>
<div id="footer"></div>
</div>
</body>
</html>