1、新建html文件。
2、创建两个div,并赋予id。
3、为两个div设置宽高和背景,并设置左右浮动。
4、预览效果如图。
5、创建第三个div。
6、为第三个div设置宽高和背景。
7、预览效果如图。
注意事项:
随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。
这是选择器的嵌套(中间用空格隔开),意思是定义包含在id为top_panel元素内的元素,且此元素的id为top_section,样式只对id为top_section(#top_section)起作用。形如:<div id="top_panel">
<p id="top_section">元素的内容,只对我生效。</p>
</div>
补充:此种方法不够优化,因id是唯一的,所以可取消前面的#top_panel,只用 #top_section {}就行了。
子元素选择器.bl-main >section {....}这样写,.bl-main下的只有儿子辈的section应用样式;ie6不支持大于号写法。
.bl-main section{...}这样写,.bl-main下的不论是儿子辈的section还是孙子辈的section都应用样式;也就是说,.bl-main下的所有section都有这个样式。