1、第6章浮点定位1 1 考核知识点考核知识点元素的浮动属性float、清除浮动。2 2 练习目标练习目标熟练使用浮动属性。深刻理解float属性的布局定位应用。灵活运用float属性实现图像和文本排列美观大方的布局。掌握用after伪对象清除浮动的方法。掌握列表的应用。实验实验1 1 食品食品农业市场商品展示农业市场商品展示请做出以下效果：要求：（1）利用浮动进行布局定位。（2）样式效果如效果所示。3 3 实验内容及要求实验内容及要求实验实验1 1 食品食品农业市场商品展示农业市场商品展示结构分析：此面页整体可以分析为在一个大盒子里有并列的左中右三个盒子，这三个盒子可以通过三个进行定义，整体结构
2、分析如图62所示；并列的三个盒子里的内容结构相同，由一个标题和三个商品展示组成，标题用定义，商品展示部分可以用无序列表进行定义；而每一个商品展示的结构也相同，左侧一张商品图片，右侧由标题和说明内容条目构成，左侧用一个定义，右侧用自定义序列进行定义，模块结构分析如图6-3所示。样式分析：（1）通过最外层的大盒子对页面进行整体控制，需要对其设置宽度、边框及边距等样式。（2）对并列的左中右三个盒子的3个应用左浮动，并设置宽度，左中两个设置右边框线。（3）为标题标记设置行高和背景，并应用左内边距属性调整文本内容的位置，空出来的位置显示标题的图标。（4）设置商品展示区域列表的样式，对商品展示区域进行整体
3、控制，需要对其设置填充及边距等样式。（5）设置商品展示内容的样式，商品图片区域和文字描述列表区域都进行左浮动，列表项要应用清除浮动样式，接着设置文字描述的文本样式。（6）最外层的大盒子应用清除浮动样式。4 4 实验分析实验分析实验实验1 1 食品食品农业市场商品展示农业市场商品展示1 1 考核知识点考核知识点绝对定位。2 2 练习目标练习目标掌握绝对定位属性的应用。理解浮动元素的特性。掌握用hover伪类的方法。实验实验2 2 商品分类二级菜单商品分类二级菜单请做出以下效果：要求：（1）当鼠标移动到商品分类一级菜单条目上面时，在右侧显示分类的详细商品品种二级菜单，分类条目背景色改变成红色。（2
4、）分类及商品品种都有超链接。（3）菜单的布局及文字效果见效果图。3 3 实验内容及要求实验内容及要求实验实验2 2 商品分类二级菜单商品分类二级菜单结构分析：菜单在一个大盒子中显示，菜单由菜单标题“全部商品分类”和菜单项条目组成，菜单标题用进行定义，菜单项条目用无序列表进行定义，每一个菜单项里有菜单项名称（商品分类名称）和二级菜单详细商品品种列表，详细商品品种多，放在一个盒子里显示。样式分析：（1）通过最外层的大盒子对页面进行整体控制，需要对其设置高宽度、边框及边距等样式。（2）为标题标记设置高宽度、边框、背景、边距及文本的样式。（3）设置菜单列表样式，去掉列表的默认内外边距，去掉列表项前的默
5、认圆，设置该盒子为相对定位，是为了二级菜单详细商品品种列表区进行绝对定位，做为参照的父对象。（4）设置一级菜单条目样式，设置高宽、背景、边框及文本样式，超链接的文本样式。（5）设置二级菜单盒子的样式，设置高宽、背景，并定位在一级菜单的左则，先设为隐藏，设置二级菜单超链接样式。（6）设置鼠标移动到商品分类一级菜单条目上面时显示效果样式，使用伪类:hover。4 4 实验分析实验分析实验实验2 2 商品分类二级菜单商品分类二级菜单1 1 考核知识点考核知识点相对定位、绝对定位、固定定位。2 2 练习目标练习目标理解相对定位、绝对定位和固定定位的含义。掌握相对定位属性的应用。掌握绝对定位属性的应用。
6、掌握固定定位属性的应用。灵活运用定位达到控制页面布局的效果。掌握用hover伪类的方法。实验实验3 3 天天猫商城右侧通道工具栏猫商城右侧通道工具栏请做出以下效果：要求：（1）工具栏固定在浏览器的最右侧，高度随浏览器的高度变化而变化。（2）当鼠标移动到小图标上面时，在左侧显示说明信息，小图标背景色改变成红色。（3）在导航中显示的各项布局见效果。3 3 实验内容及要求实验内容及要求实验实验3 3 天天猫商城右侧通道工具栏猫商城右侧通道工具栏结构分析：页面结构，可以分析为在一个大盒子里包括三个小盒子，结构分析如下图6-9所示，上面的盒子内是两张图片，中间和下面盒子的内容条目，是并列关系，可以用列表
7、进行定义。样式分析：（1）通过最外层的大盒子对工具栏进行整体控制，需要对其设置高度、宽度、背景、定位样式进行设置，设置固定定位，right:0px;top:0px;使盒子固定在浏览器的右则。（2）设置顶部盒子的样式，对其高度、宽度、背景样式进行设置，并设置为，设置定位设置为相对定位，是为了盒子里面的内容进行绝对定位，做为参照的父对象。设置上内边距，用以定位盒子里的第一张的位置，盒子里的第二张图片设置为绝对定位，定位在盒子的最底部。（3）设置中部、底部的盒子样式，对其高度、宽度进行设置，底部的盒子定位在最下方。设置列表及列表项的样式，设置特殊效果的列表项样式。4 4 实验分析实验分析实验实验3 3 天天猫商城右侧通道工具栏猫商城右侧通道工具栏
