网页布局之Div+Css概要.ppt

可以看得到div1这个块状元素里面拥有两个元素，一个是块状元素div2，另一个是内联元素a，这就是块状元素概念里面说的“一般是其他元素的容器，可容纳内联元素和其他块状元素”。块状元素不只是用来做容器，有时还有其他用途，比如利用块状元素将上下两个元素隔开些距离，再比如利用块状元素来实现父级元素的高度自适应等。 * 接下来，在div1里面div2的后面再放入一个ID为div3的长宽均为100像素的蓝色(#009)区域块，CSS代码如下： HTML代码如下： * 2. Float的含义 常见的页面布局有两种方式：Float(浮动方式)、Position(定位方式)。接下来通过一个例子来说明Float的含义。 两个方块，一个红色#900，一个蓝色#009，红色方块宽度和高度均为200像素，蓝色方块宽度为300像素，高度为200像素，红色方块蓝的上外边距(margin-top)和左外边距(margin-left)均为20像素。代码如下： * * 为了让红色和蓝色方块都处在一行，只需要在红色方块的CSS里面加上“float:left;”。但是不同的浏览器对此的解释方式是不同的，为了解决这个浏览器兼容的问题，只需要在蓝色方块的CSS代码中也加入“Float:left;”就可以了。效果如图4.9所示： * 4.5.2 制作网页导航条 1. CSS标签重置 因为每个浏览器都有一个自己默认的CS