css页面左中右分栏

最新推荐文章于 2022-07-22 13:23:04 发布

KandyDev

最新推荐文章于 2022-07-22 13:23:04 发布

阅读量911

点赞数

分类专栏： HTML+CSS+JS 文章标签：黑马程序员 CSS HTML

本文链接：https://blog.csdn.net/kj297296053/article/details/13164935

版权

HTML+CSS+JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>
       <title></title>
       <meta charset="gb2312" />
       <style type="text/css">
           body{
               background-color:silver;
           }
           .page_center {
               width:600px;
               margin:20px auto;
           }
           #nav {
               background-color:yellow;
               height:120px;
           }
           #left {
               width:120px;
               background-color:pink;
               position:absolute;

           }
           #middle {
               width:360px;
               background-color:gray;
               margin-left:120px;

           }
           #right {
               width:120px;
               background-color:green;
               position:absolute;
               top:0;
               right:0;
           }
           #foot {
               background-color:blue;
           }
           #main {
               position:relative;
               background-color:green;
               background-image:url(5.gif);
               background-repeat:repeat-y;
               background-position:left;
           }
       </style>
       <script type="text/javascript">
       </script>
   </head>
   <body>
       <div id="nav" class="page_center">
       000</div>
       <div id="main" class="page_center">
           <div id="left">
               111<br /><br /><br /><br /><br /><br />
           </div>
           <div id="middle">
               222<br /><br />主<br /><br />
               <br /><br />要<br /><br />内<br /><br /><br /><br /><br />容<br /><br /><br /><br /><br />主<br /><br /><br /><br />要<br /><br />
           </div>
           <div id="right">
               333<br /><br /><br /><br /><br /><br /><br />
           </div>
       </div>
       <div id="foot" class="page_center">
           444<br /><br /><br /><br /><br /><br />
       </div>
   </body>

</html>

实现效果