网页简单布局之结构与表现原则（HTML/CSS）

结构样式行为真正的分离

前端初级人员会在页面上单纯的用各个div把相关内容独立开；
前端中级人员明白相关属性的设置会给元素带来什么改变，从而减少div的书写；
前端高级人员会以及其简单的和稳定的方式实现相应的效果。

代码展示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      .demo1 {
        height: 300px;
        width: 500px;
        padding: 5px;
      }
      .demo1 .left {
        float: left;
        height: 280px;
        width: 180px;
      }
      .demo1 .left img {
        background: blue;
        height: 50px;
        width: 50px;
      }
      .demo1 .right {
        float: right;
        height: 280px;
        width: 256px;
        border: 1px solid green;
      }
      
      .demo2 {
        height: 300px;
        width: 500px;
        padding: 5px;
      }
      .demo2 img {
        float: left;
        background: blue;
        height: 50px;
        width: 50px;
      }
      .demo2 .right {
        float: right;
        height: 280px;
        width: 256px;
        border: 1px solid green;
      }
      
      .demo3 {
        height: 300px;
        width: 450px;
        padding: 5px;
        margin-left: 50px;
      }
      .demo3 img {
        float: left;
        margin: 10px 0 0 -50px;
        background: blue;
        height: 50px;
        width: 50px;
      }
      .demo3 p {
        float: right;
        height: 280px;
        width: 256px;
        border: 1px solid green;
      }
    </style>
  </head>
  <body>
    <!--初级-->
    <div class="demo1">
      <div class="left">
        <img src="" alt="" />
      </div>
      <div class="right">
        <p>内容</p>
      </div>
    </div>
    <br />
    <!--中级-->
    <div class="demo2">
      <img src="" alt="" />
      <div class="right">
        <p>内容</p>
      </div>
    </div>
    <br />
    <!--高级-->
    <div class="demo3">
      <img src="" alt="" />
      <p>内容</p>
    </div>
  </body>
</html>

View Code