css页面中常见左中右分栏布局的两种实现方式

前端技术 2023/09/06 CSS
以下代码复制粘贴即可使用：
示例一：

复制代码
代码如下:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta charset=\"gb2312\" />
<style type=\"text/css\">
.page_center {
width:100%;
}
#nav {
background-color:red;
height:20px;
}
#left {
width:120px;
background-color:green;
position:absolute;
}
#middle {
background-color:yellow;
}
#right {
width:120px;
background-color:green;
position:absolute;
top:0;
right:0;
}
#foot {
background-color:pink;
}
#main {
position:relative;
}
</style>
</head>
<body>
<div id=\"nav\" class=\"page_center\">上边</div>
<div id=\"main\" class=\"page_center\">
<div id=\"left\">左边</div>
<div id=\"middle\"> 中间部分</div>
<div id=\"right\">右边</div>
</div>
<div id=\"foot\" class=\"page_center\">底边</div>
</body>
</html>


示例2：

复制代码
代码如下:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>Untitled Document</title>
</head>
<style type=\"text/css\">
#left{
float:left; width:240px; height:500px; background:#0C9;
}
#right{
float:right;width:240px;height:500px; background:#933;
}
#center{
height:500px;background:#06C;
}
</style>
<body>
<div id=\"left\" >左边</div>
<div id=\"right\" >右边</div>
<div id=\"center\" style=\"\">中间</div>
</body>
</html>



复制代码
代码如下:

<span style=\"font-size: 14px; font-family: Arial, Helvetica, sans-serif;\"><strong></strong></span>

本文地址：https://www.stayed.cn/item/15880

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案