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

香菇
我欲修仙,法力无边!
我欲修仙,法力无边!
我欲修仙,法力无边!
我欲修仙,法力无边!
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分钟之前
当然,这个例子很简单,第三种写法只适合固定的样式,后期再添加东西,可能会比较费劲,甚至要来一次大改,但是如果不需要特殊的变动,这种写法,大家可以想象,在一个大型网站如果都使用第三种方法,会省去多少代码量,我觉得这种思想才是最值得我们学习哒~


原文链接:网页布局结构样式分离之性能优化
诗与酒 版权所有,转载请注明出处。
哈哈,配图真萌
😎 我也觉得
我好像是初学者那个 😛
我好像也是 🙄
我欲修仙,法力无边!
666