浮动与定位练习

练习1 创建标准的文档流
要求新建3个div
第1个:
边框为1px红色,宽度90%,高度100px,外边距5px。
第2个:
边框为1px蓝色,宽度95%,高度300px,外边距0px。
第3个:
边框为1px黑色,宽度90%,高度50px,外边距5px。

练习2 使得001元素浮动到右侧

练习3 清除003元素的浮动效果

练习4
在1个大盒子中放置5个小盒子,5个小盒子都右浮动,然后请你清除第3、4、5个盒子的右浮动;接着使用after伪类清除子元素浮动对父元素的影响。

练习5 设置一个盒子的overflow属性,使得它其中的文本内容超出盒子时就出现滚动条。

练习6  制作和【网页设计与制作·作品展】网站http://link.leiuu.com/一样的效果图:素材下载

练习7
使得一个小图片绝对定位在浏览器窗口下部的正中央。圆球素材下载

练习8

       在网页中插入一个宽10像素,高2000像素的盒子,且在盒子里面插入很多文字内容。接着再页面中插入一张你喜欢的图片,当你拖到浏览器滚动条是,该图片不会随着滚动条滚动而滚动,而是固定在页面的中间靠底部的地方。请你制作如上所述效果。