零起点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像素的红色实线 。 运行效果 部分代码 * * * *