DIV CSS常用的网页布局代码

下面是“DIV CSS常用的网页布局代码”的完整攻略，包含了基本语法和两个示例：

基本语法

网页布局是指通过HTML和CSS代码来控制网页上不同元素的位置和大小。DIV是HTML中常用的“盒子”元素，可以使用CSS对DIV进行样式设置，从而控制网页布局。通过给不同的DIV设置不同的样式，可以实现多种不同的布局效果。

以下是DIV CSS常用的网页布局代码：

1. 块级元素布局

块级元素默认会在页面上单独占用一行，可以通过设置元素的宽度和高度以及margin和padding属性来控制元素的大小和位置。

div {
    width: 500px; /* 设置元素宽度 */
    height: 300px; /* 设置元素高度 */
    margin: 0 auto; /* 设置水平居中 */
    padding: 10px; /* 设置内边距 */
}

2. 浮动布局

浮动布局可以让元素像浮动在页面上，实现多列布局。可以通过设置元素的浮动属性和宽度来实现。

div {
    float: left; /* 设置元素浮动 */
    width: 200px; /* 设置元素宽度 */
    margin-right: 20px; /* 设置元素间距 */
}

示例

下面是两个基于DIV CSS布局的实例：

示例1

实现左侧固定宽度，右侧自适应宽度的两列布局。

<div class="container">
  <div class="left">
    <h2>左侧栏目</h2>
    <ul>
      <li>菜单1</li>
      <li>菜单2</li>
      <li>菜单3</li>
      <li>菜单4</li>
    </ul>
  </div>
  <div class="right">
    <h2>右侧内容栏目</h2>
    <p>这里是右侧内容</p>
  </div>
</div>

.container {
  width: 960px;
  margin: 0 auto;
  overflow: hidden; /* 清除浮动 */
}
.left {
  width: 200px;
  float: left;
  background-color: #f6f6f6;
  border-right: 1px solid #ddd;
  padding: 10px;
}
.right {
  margin-left: 220px;
  padding: 10px;
}

示例2

实现三列等宽的布局。

<div class="container">
  <div class="left">
    <h2>左侧栏目</h2>
    <p>这里是左侧内容</p>
  </div>
  <div class="middle">
    <h2>中间栏目</h2>
    <p>这里是中间内容</p>
  </div>
  <div class="right">
    <h2>右侧栏目</h2>
    <p>这里是右侧内容</p>
  </div>
</div>

.container {
  width: 960px;
  margin: 0 auto;
  overflow: hidden; /* 清除浮动 */
}
.left, .middle, .right {
  width: 320px;
  float: left;
  background-color: #f6f6f6;
  border-right: 1px solid #ddd;
  padding: 10px;
}
.right {
  border-right: none;
}

以上就是关于“DIV CSS常用的网页布局代码”的完整攻略。通过这些基本语法和示例，你可以自由发挥，进行更丰富多样的网页布局。