HTML简易自适应布局

效果图：

第一步：在body下先建三个块级，代码如下：

<div class="one">第1个元素中的内容</div>
<div class="two">第2个元素中的内容</div>
<div class="three">第3个元素中的内容</div>

第二步：设置全局边框，代码如下：

* {
      margin: 0;/*被设置的对象相对四周的边距是0*/
      padding: 0;/*内边距为0*/
    }

第三步：设置块级的高度以及水平方向布局，代码如下：

div {      /*<div> 定义文档中的分区或节*/
      height: 100px;
      float: left;/*float(浮动):用于元素水平方向的布局*/
    }

第四步：设置每个块级的宽度以及背景颜色，代码如下：

.one {
      width: 30%;
      background-color: #b6a2dc;
    }

    .two {
      width: 40%;
      background-color: #9ee2ac;
    }

    .three {
      width: 30%;
      background-color: #f69654;
    }