零起点HTML5+CSS3+JavaScript+jQuery前端开发案例式教程PPT课件（共14章）05创建景区图片展示.pptVIP

4.6.1 框架分析 1 2 大框 大框 无序列表 列表项 列表项 列表项 列表项 列表项 大框 无序列表 列表项 图片 段落 列表项 图片片 段落 列表项 图片 段落 列表项 图片 段落 列表项 图片 段落 3 4.6.2 框架对应html代码 “贵州南江大峡谷景区”页面框架嵌套步骤一，大框对应html代码 “贵州南江大峡谷景区”页面框架嵌套步骤二，加入无序列表后对应html代码 1 2 div class=box /div 大框 div class=box /div ul class=clear li/li li/li li/li li/li li/li /ul 大框 无序列表 列表项 列表项 列表项 列表项 列表项 4.6.2 框架对应html代码 3.“贵州南江大峡谷景区”页面框架嵌套步骤三，加入图片、段落后对应html代码 3 大框 无序列表 列表项 图片 段落 列表项 图片片 段落 列表项 图片 段落 列表项 图片 段落 列表项 图片 段落 div class=box ul class=clear li /li li /li li /li li /li li /li /ul /div /ul /div img src=images/tp1.jpg p南江大峡谷步行道/p img src=images/tp2.jpg p南江大峡谷划船/p img src=images/tp3.jpg p南江大峡谷景观/p img src=images/tp4.jpg p南江大峡谷漂流/p img src=images/tp5.jpg p南江大峡谷远景/p 4.6.3 框架对应css样式分析 4.6.3 框架对应css样式分析 1.“贵州南江大峡谷景区”页面框架嵌套步骤一，大框对应的css代码 1 大框 /*.box设置宽度和左右居中*/ .box { width: 1320px; margin:0 auto; } 2.“贵州南江大峡谷景区”页面框架嵌套步骤二，加入无序列表后对应的css代码 4.6.3 框架对应css样式分析 2 /* ul内边距为10px */ ul{ padding:10px; } /* 清理左右浮动 */ .clear:after{ content: ; display:block; clear:both; } /* 设置li左浮动、宽度、外边距、边框 */ li{ float :left ; width: 230px; margin:0 22px 22px 0; border:1px solid #eee; } /* 鼠标移动到每个列表项上，添加1像素的红色实线 */ li:hover { border:1px solid red; } 大框 无序列表 列表项 列表项 列表项 列表项 列表项 4.6.3 框架对应css样式分析 3.“贵州南江大峡谷景区”页面框架嵌套步骤三，加入图片、段落后对应的css代码 3 大框 无序列表 列表项 图片 段落 列表项 图片片 段落 列表项 图片 段落 列表项 图片 段落 列表项 图片 段落 /* 设置img为块级元素，并设置外边距 */ img{ display:block ; margin:20px auto ; } /* 设置p元素外边距 、文本水平居中*/ p{ margin:15px; text-align: center; } * * * * 4.6 创建景区图片展示 4.6.1 框架分析 整个页面结构从左到右包括5张图片，每张图片下面有相应文字说明。 这种重复的项目，html有很多种布局方法。本教程采用无序列表，包括5个列表项，每个列表项里包括图片和段落。并且鼠标移动到每个列表项上，添加1像素的红色实线 。 运行效果 部分代码 * * * *