《网站前端技术》621-7（梁玲）课件 第六章 开发者商务网站建设.pptVIP

03 * 6.3.3 制作商品详情页 #com-img img{ width:100%; height:100%; } #com-news{ width:520px; height:400px; margin:0 40px; float: left; } .news{ height:40px; line-height: 40px; color:#666; } 03 * 6.3.3 制作商品详情页 8.将“jquery-1.12.1.js”“fun.js”“index.js”文件关联至该页面。 【思考总结】 （1）举例说明表单的action属性和method属性的作用。 （2）举例说明下拉列表框的用法及默认值的设置。 （3）举例说明单选钮的用法及默认值的设置。 （4）举例说明数值型输入框的用法及默认值的设置。 （5）说明提交按钮的作用。 【实训作业】 设计并制作个人网站详情页。 03 * 6.3.4 制作订单列表页 【实现目标】 订单列表页从上到下分为头部区域、主体区域（如图6-3-7所示）与脚部区域。其中，头部和脚部区域与首页相关部分相同。 【知识扫描】 （1）HTML相关知识点：① 表格标签；② 表格行标签；③ 表格列标题标签；④ 表格单元格标签。 （2）CSS3相关知识点：边框合并属性。 图6-3-7 订单列表页主体区域布局 03 * 6.3.4 制作订单列表页 1.使用HTML5布局商品详情页，页面名称为indent.html。 2，制作主体区域。 HTML文档编辑操作： （1）使用表格显示每个订单信息，部分代码如下： table tr th商品名称/th th商品图片/th th商品颜色/th th商品型号/th th商品数量/th 03 * 6.3.4 制作订单列表页 th订购日期/th th删除操作/th th修改操作/th /tr tr td棉线套头衫/td tdimg src=img/miantao1.jpg alt=/td td白色/td tdL/td td2/td td2018-10-12/td tdinput type=button value=删除/td tdinput type=button value=修改/td /tr …… /table 03 * 6.3.4 制作订单列表页 （2）制作翻页模块。 div id=box div class=page最后一页/div div class=page下一页/div div class=page第n页/div div class=page上一页/div div class=page第一页/div /div CSS文档编辑操作如下： （1）首先在css文件夹中创建indent.css文件，将其与index.css文件一同关联至本页面。 （2）设置主体区域的样式。 在实际应用中，banner图的数量并不是固定的，因此下方按钮数量也不是固定的，而是应该根据banner图的数量插入相同数量的按钮。因此需要定义该函数。 小提示 03 * 6.3.4 制作订单列表页 ① 设置表格元素属性，宽度为1200 px；高度为自动被子元素撑开；合并边框；计算尺寸方式为包含边框；顶端边框和底端边框属性均为3 px、实心线、蓝色。 #indent-box { width: 1200px; height: auto; margin: 50px auto 50px; color: #666; border-top: 3px solid #2DA8E6; border-bottom: 3px solid #2DA8E6; } table { width: 100%; border-collapse: collapse; } 03 * 6.3.4 制作订单列表页 ② 设置表格行元素属性，高度为40 px；底端边框为1 px、实心线、灰色。 tr { height: 40px; line-height: 40px; border-bottom: 1px solid #E0E0E0; } ③ 设置表格单元格元素属性，文本居中；图片高度和宽度均为100 px。 td { text-align: center; } td img { width: 100px; height: 100px; } 03 * ④ 设置翻页模块的样式。 #box { width: 1200px; height: auto; margin: 0 auto 40px; overflow: hidden; } .page