web前端入门之html+css实例③

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页面反复调用就可以了，省略掉了许多重复性的代码

实例③可以看作是实例①的拓展反复练习

相关资源已上传，需要的可以自行下载，共勉