web前端入门之html+css实例③
实例三:
思路:
1、背景一个大盒子,头部一块
2、三个section,section1包含head一块,span四块,img三块
;同理后面的section相同
<section class="section1">
<div class="head1">
<p><b>紫色空间</b></p>
</div>
<div class="desc1">
<span>正品</span>
<span>漂亮</span>
<span>很漂亮</span>
<span>双鱼座</span>
</div>
<div class="img1">
<img src="img/EarStuds.gif" >
<img src="img/Ring.gif" >
<img src="img/EarStuds2.gif" >
</div>
</section>
3、底部有个页脚块
效果图:
更优思路:
由于内部每一部分的排版格式都是一致的,直接写一个部分的样式重复调用就可以了。
区别:
原本思路:需要写4个section,每个section分别再用css布局,同样的布局代码就重复了4次,会造成代码的冗余
优化思路:只需要写一个section的css样式布局,后html页面反复调用就可以了,省略掉了许多重复性的代码
实例③可以看作是实例①的拓展反复练习
相关资源已上传,需要的可以自行下载,共勉