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

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

我们首先来看一个布局:

香菇

我欲修仙,法力无边!
我欲修仙,法力无边!
我欲修仙,法力无边!
我欲修仙,法力无边!

10分钟之前

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

下面,我们分别来分析下这三种思路:

初级人员思路及制作方法

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

CSS<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;
}
html</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即可:

CSS<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>
html<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即可完成这个布局:

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