网页布局设计详解：一列与二列布局解析-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_3957/article/details/82615937

第一部分

<style type="text/css">
      body{margin:0;padding:0}
      .top{height:100px;background:blue}
      .main{width:800px;height:300px;background:black;margin:0 auto}
      .foot{width:800px;height:100px;background:red;margin:0 auto}
</style>
<body>
     <div class="top"></div>
     <div class="main"></div>
     <div class="foot"></div>
</body>

上面代码是网页的一列布局，其中有几个点和大家分享一下。

<div class="top"></div>
<div class="main"></div>
<div class="foot"></div>

一般网页都是分上中下三部分，即代码中的“top”，“main”，“foot”

body{margin:0;padding:0}

这句话是为了让布局和html页面没有边距。

margin:0 auto

是为了让“main”，"foot"居中，0 是指上下的距离，auto指左右自适应

第二部分

<style type="text/css">
      body{margin:0;padding:0}
      .main{width:800px;margin:0 auto}
      .left{width:30%;height:500px;float：left；background:red}
      .right{width:70%;height:500px;float：right；background:blue}
</style>
<body>
     <div class="main">
     <div class="left"></div>
     <div class="right"></div>
     </div>
</body>

这第二部分是网页的二列布局。

与第一部分大体相同但主要是中间部分“main”，分成了两部分“left”，“right”。

二列布局最重要的是控制其宽度，即