暑期实践——7.30

YY__111

已于 2023-07-30 21:59:59 修改

阅读量34

点赞数

文章标签：前端 javascript html

于 2023-07-30 21:58:31 首次发布

本文链接：https://blog.csdn.net/YY__111/article/details/132012259

版权

2、三列布局样式

（1）两列定宽中间自适应的三列结构

案例5

<html>
<head>
<title>两列定宽中间自适应的三列结构</title>
   <style type="text/css">
       *{
           margin: 0;
           padding: 0;
       }
       body{
           font-family: "宋体";
           font-size: 18px;
           color: #000;
       }
       #header{
           height: 50px;
           background: #0cf;
       }
       #container{
           overflow: auto;
       }
       #mainBox{
           float: left;
           width: 100%;
           background: #6ff;
           height: 200px;
       }
       #content{
           height: 200px;
           background: #ff0;
           margin: 0 210px 0 310px;
       }
       #submainBox{
           float: left;
           height: 200px;
           background: #c63;
           width: 300px;
           margin-left: -100%;
       }
       #sideBox{
           float: left;
           height: 200px;
           width: 200px;
           margin-left: -200px;
           background: #c63;
       }
       #footer{
           clear: both;
           height: 50px;
           background: #3cf;
       }
   </style>
</head>

<body>
   <div id="header">这里是header区域</div>
   <div id="container">
       <div id="mainBox">
           <div id="content">主要内容区域——常用的CSS布局</div>
       </div>
       <div id="submainBox">次要内容区域——常用的CSS布局</div>
       <div id="sideBox">这里是侧边栏</div>
   </div>
   <div id="footer">这里是footer区域，放置版权信息等内容</div>
</body>
</html>

（2）三列自适应结构

三列自适应结构的特点：

①三列都设置为自适应宽度。

②中间列的主要内容首先出现在网页中。

③可以允许任一个列的内容为最高。

案例6

<html>
<head>
<title>两列定宽中间自适应的三列结构</title>
   <style type="text/css">
       *{
           margin: 0;
           padding: 0;
       }
       body{
           font-family: "宋体";
           font-size: 18px;
           color: #000;
       }
       #header{
           height: 50px;
           background: #0cf;
       }
       #container{
           overflow: auto;
       }
       #mainBox{
           float: left;
           width: 100%;
           background: #6ff;
           height: 200px;
       }
       #content{
           height: 200px;
           background: #ff0;
           margin: 0 31% 0 31%;
       }
       #submainBox{
           float: left;
           height: 200px;
           background: #c63;
           width: 30%;
           margin-left: -100%;
       }
       #sideBox{
           float: left;
           height: 200px;
           width: 30%;
           margin-left: -30%;
           background: #c63;
       }
       #footer{
           clear: both;
           height: 50px;
           background: #3cf;
       }
   </style>
</head>

<body>
   <div id="header">这里是header区域</div>
   <div id="container">
       <div id="mainBox">
           <div id="content">主要内容区域——常用的CSS布局</div>
       </div>
       <div id="submainBox">次要内容区域——常用的CSS布局</div>
       <div id="sideBox">这里是侧边栏</div>
   </div>
   <div id="footer">这里是footer区域，放置版权信息等内容</div>
</body>
</html>