“这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战”

首先来看一个消息列表布局：

我们拿到这样一个布局页面时，不同的制作者对页面的结构（html）和样式（css）有不同的理解，根据对结构（html）和表现（css）的理解深度不同，有初级、中级和高级的区分。

初级思路及制作方法：div层层嵌套

中级思路及制造方法：去掉多余的div，进行简化

高级思路及制造方法：最大化的简化html的结构，然后用css进行设置，减少html与css的契合度

初级思路

先建立一个大的div，然后在这个div中分别建左右两个div，接着把图片放在左边div，内容放在右侧div，左右div分别浮动，再进行细节的补充即可完成这个布局，简单可以用下面代码表示：

<div class="demo1">
    <div class="left">
        <img src="https://hao1.qhimg.com/t01f2b671978d27099f.jpg" alt="" width="50" height="50" />
    </div>
    <div class="right">
        <h4>测试</h4>
        <p>测试1<br/>测试12<br/>测试123<br/>测试1345<br/></p>
        <span>10分钟之前</span>
    </div>
</div>
<style>
.demo1 {
    width: 292px;
    overflow: hidden;
    position: relative;
}
.demo1 .left {
    float: left;
    width: 60px;
}
.demo1 .right {
    padding: 10px;
    float: right;
    width: 230px;
    border: 1px solid #0bf;
}
.demo1 span {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 12px;
}
</style>

中级思路

中级其实不必初级好到哪儿去……就把left的盒子去掉，直接使用img即可：

<div class="demo2">
    <img src="https://hao1.qhimg.com/t01f2b671978d27099f.jpg" alt="" width="50" height="50" />
    <div class="right">
        <h4>测试</h4>
        <p>测试1<br/>测试12<br/>测试123<br/>测试1345<br/></p>
        <span>6分钟之前</span>
    </div>
</div>
<style>
.demo2 {
    width: 292px;
    overflow: hidden;
    position: relative;
}
.demo2 img {
    float: left;
    margin: 5px;
}
.demo2 .right {
    padding: 10px;
    float: right;
    width: 230px;
    border: 1px solid #0bf;
}
.demo2 span {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 12px;
}
</style>

高级思路

高级会先按照结构和语义编写代码，然后再进行css样式设置，减少html与css的契合度，这样的话，我们先不考虑样式，只考虑他的内容，只需要一层div即可完成这个布局：


<div class="demo3">
    <img src="https://hao1.qhimg.com/t01f2b671978d27099f.jpg" alt="" width="50" height="50" />
      <h4>测试</h4>
    <p>测试1<br/>测试12<br/>测试123<br/>测试1345<br/></p>
</div>
<style>
.demo3 {
    width: 230px;
    padding: 10px;
    border: 1px solid #0bf;
    margin-left: 60px;
    position: relative;
}
.demo3 img {
    float: left;
    margin-left: -70px;
    margin-top: -10px;
}
.demo3 span {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 12px;
}
</style>

这个例子很简单，第三种写法只适合固定的样式，可能没什么大用，后期再添加东西，可能会比较费劲，甚至要来一次大改，但是如果不需要特殊的变动，这种写法，如果都使用第三种方法，会省去很多代码量

html布局结构初中高表现原则

初级思路

中级思路

高级思路