网页布局结构样式分离之性能优化

正文索引 [隐藏]

今天在慕课网看视频的时候，有一节关于网页布局结构样式分离之性能优化的适配让我印象颇深，虽然很简单但是思想很好，就记录下，以后多学习学习~

我们首先来看一个布局：

香菇

我欲修仙，法力无边！
我欲修仙，法力无边！
我欲修仙，法力无边！
我欲修仙，法力无边！

10分钟之前

视频中，老师说，当我们拿到这样一个布局页面时，不同的制作者对页面的结构和样式是有不同理解的。根据对结构和表现的理解深度不同，暂且分为初级、中级和高级三个层次。

下面，我们分别来分析下这三种思路：

初级人员思路及制作方法

一般一个初学者，会把先建立一个大的div，然后在这个div中分别建左右两个div，接着把图片放在左边div，内容放在右侧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>
<div class="demo1">
    <div class="left">
        <img src="https://shawnzeng.com/wp-content/uploads/2017/02/xianggu.png" alt="" width="50" height="50" />
    </div>
    <div class="right">
        <h4>香菇</h4>
        <p>我欲修仙，法力无边！<br/>我欲修仙，法力无边！<br/>我欲修仙，法力无边！<br/>我欲修仙，法力无边！<br/></p>
        <span>10分钟之前</span>
    </div>
</div>

香菇

我欲修仙，法力无边！
我欲修仙，法力无边！
我欲修仙，法力无边！
我欲修仙，法力无边！

10分钟之前

中级人员思路及制作方法

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

<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>

<div class="demo2">
    <img src="https://shawnzeng.com/wp-content/uploads/2017/02/gaiwen.png" alt="" width="50" height="50" />
    <div class="right">
        <h4>该问</h4>
        <p>我欲修仙，快乐无边！<br/>我欲修仙，快乐无边！<br/>我欲修仙，快乐无边！<br/>我欲修仙，快乐无边！<br/></p>
        <span>6分钟之前</span>
    </div>
</div>

该问

我欲修仙，快乐无边！
我欲修仙，快乐无边！
我欲修仙，快乐无边！
我欲修仙，快乐无边！

6分钟之前

高级人员思路及制作方法

老师说，高级人员们在编写html代码时，会先按照结构和语义编写代码，然后再进行css样式设置，减少html与css的契合度，这样的话，我们先不考虑样式，只考虑他的内容，只需要一层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>

<div class="demo3">
    <img src="https://shawnzeng.com/wp-content/uploads/2017/02/kissshot.jpeg" alt="" width="50" height="50" />
    <h4>kissshot</h4>
    <p>清真才是最好的！<br/>清真才是最好的！<br/>清真才是最好的！<br/>清真才是最好的！<br/></p>
    <span>3分钟之前</span>
</div>

kissshot

清真才是最好的！
清真才是最好的！
清真才是最好的！
清真才是最好的！

3分钟之前

当然，这个例子很简单，第三种写法只适合固定的样式，后期再添加东西，可能会比较费劲，甚至要来一次大改，但是如果不需要特殊的变动，这种写法，大家可以想象，在一个大型网站如果都使用第三种方法，会省去多少代码量，我觉得这种思想才是最值得我们学习哒~

文末，感谢香菇、该问、kissshot实力上镜2333~