《网站前端技术》621-7（梁玲）课件 第六章 开发者商务网站建设_第1页
《网站前端技术》621-7（梁玲）课件 第六章 开发者商务网站建设_第2页
《网站前端技术》621-7（梁玲）课件 第六章 开发者商务网站建设_第3页
《网站前端技术》621-7（梁玲）课件 第六章 开发者商务网站建设_第4页
《网站前端技术》621-7（梁玲）课件 第六章 开发者商务网站建设_第5页
已阅读5页，还剩143页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

《网站前端技术》签到扫码下载文旌课堂APP扫码签到（2022.3.2515:00至2022.3.2515:10）签到方式教师通过“文旌课堂APP”生成签到二维码，并设置签到时间，学生通过“文旌课堂APP”扫描“签到二维码”进行签到。。全课导航第1章网站建设概述第2章HTML与HTML5第3章CSS与CSS3第4章JavaScript基础第5章JQuery常用函数第6章开发者商务网站建设06PARTSIX

第6章开发者商务网站建设01*12结合第2章～第5章的知识点，以本章网站实现为基础进行网站设计，尽量完善网站所需静态页面，具体包含以下页面：首页、一级列表页、二级列表页、详情页、订单页/评价页、登录页、注册页、后台管理页。锻炼从全局视角看问题，客观辩证地思考和处理问题的科学思维方式。。通过对案例的不断完善锻炼学生精益求精的态度。学习目标素质目标学习目标目录CONTNETS本章导航制作其他页面03布局首页01实现首页人机交互效果0201*01布局首页01*6.1布局首页“开发者电子商务网站”首页从上到下分为头部、搜索行、一级导航、banner图、产品展示区域、脚部区域和返回顶部按钮。因首页内容较多，为提高初学者学习兴趣，有效驱动HTML和CSS知识点的学习，此处分为多个小节介绍其实现过程。布局首页头部01*6.1.1布局首页头部

【实现目标】首页头部布局效果如图6-1-1红线框指示，在布局过程中需要注意一些问题：（1）头部背景色和下边框贯穿整行；（2）头部内容居于中间1200px；（3）头部各子元素向右对齐；（4）微信图标有子元素二维码，但默认隐藏；（5）除欢迎语和微信图标外，其他均为链接元素。图6-1-1首页页眉效果【知识扫描】（1）网站的基本结构。（2）HTML文档与CSS文档的关联。（3）HTML相关知识点：①HTML文档结构；②双标签与单标签的区别；③块标签与行标签的区别；④典型的盒子模型标签<div>（双标签&行标签）；⑤链接标签<a>（双标签&行标签）；⑥

图片标签<img>（单标签&行标签）。01*6.1.1布局首页头部（4）CSS相关知识点：①选择器的表达方式；②ID选择器、类选择器、伪类选择器、子选择器等选择器类型与HTML元素属性定义的匹配性；③盒子模型常用属性width、height、margin、padding、background；④常用属性color、font-size、box-sizing、cursor、font-family的应用；⑤相对于父元素水平居中的实现；⑥文字相对于父元素垂直居中的实现；⑦元素的显示方式属性display及行元素变为块元素的方法；⑧块元素浮动排列的CSS设置属性float；⑨图片元素相对于父元素垂直居中的CSS设置方法。【实现步骤】1.创建网站目录developer，以及子目录css和img。选择计算机合理位置创建目录developer，作为网站站点根目录。在目录developer中创建子目录css和img，分别用来存放相关css样式表文件和图片资源。2.创建index.html。使用编辑软件“SublimeText”在目录developer中创建文件index.html。在编辑区输入“html:5”并按【tab】键，生成HTML文档基本结构，然后将标题标签<title>的内容修改为“开发者商务网站首页”。代码如下：01*<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>开发者商务网站首页</title></head><body></body></html>6.1.1捕获元素3.创建index.css。使用编辑软件在目录developer/css中创建文件index.css。编辑全局选择器设置页面默认属性：鼠标形状为手形；内边距和外边距均为0；计算盒子尺寸的方式为包含边框；文字颜色为#666；文字大小为12px；文字字体为微软雅黑。代码如下：01**{cursor:pointer; padding:0; margin:0; box-sizing:border-box; color:#666; font-size:12px; font-family:"微软雅黑";}6.1.1捕获元素4.关联index.html和index.css。在HTML文档<head>标签末尾添加<link>标签，并设置关联文件地址，代码如下：<linkrel="stylesheet"href="css/index.css">小提示注意此处的相对路径表达。01*6.1.1捕获元素5.布局最外层背景色贯穿整行的盒子，使用id控制HTML元素样式。HTML文档编辑操作：①在<body>标签中输入代码“div”，按下【tab】键，生成<div>标签。②在<div>标签的起始标签中输入id及其属性值head-box。代码如下：<divid="head-box"></div>CSS文档编辑操作：编辑id选择器#head-box，设置标签宽度为100%；高度为32px；背景色为#F7F7F7；下边框为1px实心线，颜色为#CCC。代码如下：#head-box{ width:100%; height:32px; background:#F7F7F7; border-bottom:1pxsolid#CCC;}01*6.1.1捕获元素

6.布局居中排列的1200px的子盒子。HTML文档编辑操作：在id为head-box的标签内部嵌套一个<div>标签，id属性为head-box-son。CSS文档编辑操作：编辑id选择器head-box-son，设置标签宽度为1200px；高度31px；相对于父元素水平居中；临时性背景颜色为red，方便查看布局效果。代码如下：#head-box-son{ width:1200px; height:31px; margin:0auto; background:red;}小提示粗斜体部分为实现相对于父元素水平居中的相关代码。完成效果测试后会将红色背景色去掉。01*6.1.1捕获元素

7.初步布局显示的文字元素和图片元素。HTML文档编辑操作：在id为head-box-son的<div>标签中输入代码“a[class="head"]{$}*9”，并按下【tab】键，生成如下代码：<ahref=""class="head">1</a><ahref=""class="head">2</a><ahref=""class="head">3</a><ahref=""class="head">4</a><ahref=""class="head">5</a><ahref=""class="head">6</a><ahref=""class="head">7</a><ahref=""class="head">8</a><ahref=""class="head">9</a>小提示在代码简易写法“a[class="head"]{$}*9”中，[]中的内容表示属性及属性值，该案例中表示类名为“head”；{}中的内容表示标签内容，$表示从1开始的数字，此处表示内容为1～9；*n表示生成标签的数量，此处的*9表示生成9个标签。01*6.1.1捕获元素CSS文档编辑操作：①编辑类选择器head，设置标签为块元素；宽度自动；高度和行高均为31px，实现文字垂直居中；向右浮动；左右外边距为5px。代码如下：.head{ display:block; width:auto; height:31px; line-height:31px; float:right; margin:05px;}②编辑a标签选择器，设置默认文本修饰样式为无，即消除链接标签自带的下划线；链接文字的颜色为#666。代码如下：01*6.1.1捕获元素a{ text-decoration:none; color:#666;}③编辑a标签伪类选择器，设置鼠标浮于上方时，文字颜色为#B91720，向用户表达相应内容为链接的事实。a:hover{color:#B91720;}

8.完善文字元素和图片元素内容与样式。HTML文档编辑操作：①对照目标效果图，将其中的数字1、2、3修改为图片标签<img>，并设置src属性，分别连接微博、微信、公告图片。将微信图片父元素修改为<div>标签；微博和公告图片父元素<a>的链接地址分别为weibo.html和notice.html。代码如下：<ahref="weibo.html"class="head"> <imgsrc="img/weibo.jpg"alt=""></a><divclass="head"> <imgsrc="img/weixin.jpg"alt="">01*6.1.1捕获元素</div><ahref="notice.html"class="head"> <imgsrc="img/notice.png"alt=""></a>②对照目标效果图，将其中的4、5、6、7、8、9修改为相应的文字，并修改符号“|”和欢迎语的父元素为<div>标签，网站公告、我的订单、注册、登录父元素的链接地址分别为notice.html、indent.html、reg.html、login.html。代码如下：<ahref="notice.html"class="head">网站公告</a><ahref="indent.html"class="head">我的订单</a><ahref="reg.html"class="head">注册</a><divclass="head">|</div><ahref="login.html"class="head">登录</a><divclass="head">欢迎您来到开发者商务网站！！！</div>CSS文档编辑操作：编辑派生选择器.head>img，设置图片相对于父元素垂直居中。代码如下：.head>img{vertical-align:middle;}01*【思考总结】

（1）写出同时生成7个类名为head，内容为1～7的div标签的简易写法。（2）举例说明id选择器、类选择器、子选择器名称的书写方法。（3）写出文字相对于父元素水平居中的实现方法。（4）写出文字相对于父元素垂直居中的实现方法。（5）写出将块元素排列在同一行的实现方法。（6）写出图片相对于父元素垂直居中的实现方法。（7）写出将行元素变为块元素的实现方法。【实训作业】（1）创建个人网站。（2）创建网站首页。（3）完成网站首页头部。6.1.1捕获元素01*6.1.2

布局搜索行【实现目标】【知识扫描】（1）HTML相关知识点：输入框input的type属性决定其表现形式，如text表示文本域，button表示按钮。（2）CSS相关知识点：①父元素被子元素自动撑开的实现方法；②背景图片属性background-image设置方法；③背景图片定位属性background-position设置方法；④属性选择器。首页搜索行见图6-1-1红线框所示，在布局过程中需要注意一些问题：（1）搜索行整体向右浮动；（2）搜索行包含文本框和两个按钮，按钮采用背景图片设置样式；（3）购物车在鼠标浮于其上方时有反显效果；（4）热门搜索行中冒号之后的文字均为链接，且均链接至二级列表页smallClass.html。布局搜索行【实现步骤】1.构建居中盒子，应用于整个网站中宽度为1200px且水平居中的元素。HTML文档编辑操作：在id为head-box的<div>标签后插入类名为develop-box的<div>标签。01*6.1.2

布局搜索行CSS文档编辑操作：编辑类选择器develop-box，设置宽度为1200px；相对于父元素水平居中，上外边距为20，下外边距为0；高度为auto，溢出属性overflow为hidden，实现被子元素自动撑开；临时性背景颜色为yellow。代码如下：.develop-box{ width:1200px; margin:20pxauto0; height:auto; overflow:hidden; background:yellow;}2.插入普通按钮、提交按钮和输入框，并分别设置其样式。HTML文档编辑操作：在居中的盒子中依次插入一个普通按钮、一个提交按钮（注意设置value属性值为空字符串）和一个输入框。代码如下：01*6.1.2

布局搜索行<divclass="develop-box"> <inputtype="button"value="购物车(0)"> <inputtype="submit"value=""> <inputtype="text"value="搜“水洗棉”，体验更多不同"></div>CSS文档编辑操作：①编辑属性选择器input[type="button"]，设置元素向右浮动；宽度为105px、高度和行高为29px；背景图片为图片资源包中的bj2.png；背景定位为向左移155px；文字颜色为白色；为使文字在购物车图标右侧，设置左侧内边距为30px。代码如下：input[type="button"]{ float:right; width:105px; height:29px;01*6.1.2

布局搜索行

line-height:29px; background-image:url(../img/bj2.png); background-position:-155px0; color:#fff; padding-left:30px;}②编辑属性选择器input[type="submit"]，设置搜索按钮向右浮动；宽度为49px，高度为29px；右侧外边距为20px；背景图片为bj2.png；背景定位为向左移动100px。代码如下：input[type="submit"]{ float:right; width:49px; height:29px; margin-right:20px;background-image:url(../img/bj2.png); background-position:-100px0;}01*6.1.2

布局搜索行③编辑属性选择器input[type="text"]，设置文本框向右浮动；宽度为200px，高度和行高均为29px；边框为1px实心线，颜色为#CACACA；左侧内边距为10px。input[type="text"]{ float:right; width:200px; height:29px; line-height:29px; border:1pxsolid#CACACA; padding-left:10px;}④编辑伪类选择器input[type="button"]:hover，设置购物车按钮在鼠标浮于其上方时颜色反显。也就是设置图片背景定位位置为向左移动155px，向上移动29px；文字颜色为#B91720（酒红色）。代码如下：input[type="button"]:hover{ background-position:-155px-29px; color:#B91720;}01*6.1.2

布局搜索行3.根据已学技术，对照效果图实现热门搜索行的布局。HTML文档编辑操作：在居中的盒子中依次插入一个普通按钮、一个提交按钮（注意设置value属性值为空字符串）和一个输入框。代码如下：【思考总结】（1）举例说明输入框input的不同表现形式。（2）写出可以实现父元素被子元素自动撑开的CSS声明。（3）举例说明背景图片定位属性的使用方法。【实训作业】（1）应用<input>标签完善个人网站首页布局。（2）利用背景图片及其定位完善个人网站首页布局。01*【实现目标】首页一级导航布局效果如图6-1-1红线框指示，在布局过程中需要注意一些问题：（1）Logo图片及一级导航栏元素向左浮动；（2）除Logo图片外，文字元素均为链接，且首页链接index.html，其他文字链接一级列表页bigClass.html；（3）除“首页”外，其余文字元素的父元素左侧均有边框；（4）前面的两个一级导航有绝对定位子元素，分别是NEW字样图片和HOT字样图片。【知识扫描】CSS相关知识点：相对定位和绝对定位。6.1.3

布局一级导航【实现步骤】使用develop-box类布局一级导航。HTML文档编辑操作：①在搜索行后面输入develop-box类盒子<div>；②在盒子内部输入图片标签<img>，设置其id属性为logo，图片地址为img/logo.png；③继续在盒子内部输入10个<div>标签，类名皆为nav，然后在每个<div>中输入一个<a>标签，并对照目标效果修改其中文字，其中首页链接地址为index.html，且所在div元素多加一个类名navI，其他文字链接地址为布局一级导航01*bigClass.html。<divclass="develop-box"> <imgsrc="img/logo.png"alt=""id="logo"> <divclass="navnavI"><ahref="index.html">首页</a></div> <divclass="nav"><ahref="bigClass.html">T恤</a></div> <divclass="nav"><ahref="bigClass.html">衬衫</a></div> <divclass="nav"><ahref="bigClass.html">衬衫</a></div> <divclass="nav"><ahref="bigClass.html">鞋</a></div> <divclass="nav"><ahref="bigClass.html">麻</a></div> <divclass="nav"><ahref="bigClass.html">水柔棉</a></div> <divclass="nav"><ahref="bigClass.html">裤装</a></div> <divclass="nav"><ahref="bigClass.html">家具装饰</a></div> <divclass="nav"><ahref="bigClass.html">私人定制</a></div></div>6.1.3

布局一级导航01*10个nav盒子可以通过在编辑区输入以下代码，并按【tab】键生成。小提示div[class="nav"]*10>a[href="bigClass.html"]{$}CSS文档编辑操作：①编辑id选择器logo，设置Logo图片向左浮动。②编辑类选择器nav，设置所有一级导航向左浮动；宽度为101px，高度和行高均为24px；文本对齐方式为居中；上侧外边距为22px；左侧边框为1px实心线，颜色#808080；位置为相对定位，以便于其子元素相对于自身绝对定位。代码如下：.nav{ float:left; width:101px; height:24px;6.1.3

布局一级导航01* line-height:24px; text-align:center; margin-top:22px; border-left:1pxsolid#808080; position:relative;}③编辑类选择器navI，设置首页链接四周边框均为0。代码如下：.navI{border:0;}

2.为一级导航栏布局NEW字样和HOT字样绝对定位图片。HTML文档编辑操作：在T恤和衬衫所在<a>标签之后添加<img>标签，类名为nav-active，图片名称分别为new.png和hot.png。<divclass="nav"> <ahref="bigClass.html">T恤</a> <imgsrc="img/new.png"class="nav-active"alt=""></div>6.1.3

布局一级导航01*<divclass="nav"> <ahref="bigClass.html">衬衫</a> <imgsrc="img/hot.png"class="nav-active"alt=""></div>CSS文档编辑操作：编辑类选择器nav-active，设置其相对于父元素绝对定位，距父元素右侧边框10px；距父元素上边框−5px。.nav-active{ position:absolute; right:10px; top:-5px;}【思考总结】描述实现子元素相对于父元素绝对定位的方法。【实训作业】利用定位属性完善个人网站首页布局。6.1.3

布局一级导航01*6.1.4

布局banner图【实现目标】首页banner布局效果如图6-1-2，在布局过程中需要注意一些问题：（1）banner图片一共有7张，但默认第一张显示，其他隐藏。（2）banner图上有左右两个按钮，默认为灰色，当鼠标移上时为酒红色。（3）banner图上有下方圆形按钮，数量同banner图，默认为灰色，显示对应图片时为酒红色。布局banner图图6-1-2首页banner效果01*6.1.4

布局banner图【知识扫描】CSS相关知识点：（1）内联样式；（2）边框圆角border-radius。【实现步骤】使用类develop-box盒子布局banner图。1.HTML文档编辑操作：在develop-box内嵌套7个图片标签，并设置它们的类名为banner，图片名称分别为ban1.jpg、ban2.jpg、……、ban7.jpg。<divclass="develop-box"> <imgsrc="img/ban1.jpg"alt=""class="banner"> <imgsrc="img/ban2.jpg"alt=""class="banner"> <imgsrc="img/ban3.jpg"alt=""class="banner"> <imgsrc="img/ban4.jpg"alt=""class="banner"> <imgsrc="img/ban5.jpg"alt=""class="banner"> <imgsrc="img/ban6.jpg"alt=""class="banner"> <imgsrc="img/ban7.jpg"alt=""class="banner"></div>01*6.1.4

布局banner图在第1个<img>标签中添加行内样式，设置相应图片默认显示。<imgsrc="img/ban1.jpg"alt=""style="display:block;"class="banner">CSS文档编辑操作：编辑类选择器banner，设置图片宽度为1200px，高度为535px，默认不显示。.banner{ width:1200px; height:535px; display:none;}布局左右按钮。HTML文档编辑操作：在banner图所在类名为develop-box的<div>标签中添加两个<div>，并设置它们的公共类名为btn，不同类名分别为left-btn和right-btn。<divclass="btnleft-btn"></div><divclass="btnright-btn"></div>

01*6.1.4

布局banner图CSS文档编辑操作：①编辑公共类btn选择器，设置元素宽度为40px，高度为60px；背景图片为direction.png；相对于父元素develop-box绝对定位，距离其上边框235px。.btn{ width:40px; height:60px; background-image:url(../img/direction.png); position:absolute; top:235px;}此时需要在类选择器develop-box样式表中添加相对定位属性。小提示01*6.1.4

布局banner图②编辑左侧按钮类选择器left-btn，设置元素背景图片定位属性为00；绝对定位尺寸为距父元素左侧40px。.left-btn{ background-position:00; left:40px;}③编辑右侧按钮类选择器right-btn，设置元素背景图片定位属性向左偏移40px；绝对定位尺寸为距父元素右侧40px。.right-btn{ background-position:-40px0; right:40px;}01*6.1.4

布局banner图④编辑当鼠标置于左侧按钮上方时的伪类选择器，设置届时元素背景图片定位尺寸为向上偏移60px。.left-btn:hover{background-position:0-60px;}⑤编辑当鼠标置于右侧按钮上方时的伪类选择器，设置元素届时背景图片定位尺寸为向左偏移40px，向上偏移60px。.right-btn:hover{background-position:-40px-60px;}3.布局下方按钮。HTML文档编辑操作：在banner图所在develop-box盒子末尾嵌套一个类名为btns-box的<div>标签，然后在其中嵌套7个类名为btns的<div>标签，并使用内联样式设置第1个btns背景颜色为酒红色#B91720。CSS文档编辑操作：编辑类选择器btns-box，设置选择器宽度为210px，高度为20px；相对于父元素绝对定位，距其下边框50px；设置外边距为自动，即相对父元素水平居中；左偏移和右偏移均为0。01*6.1.4

布局banner图.btns-box{ width:210px; height:20px; position:absolute; bottom:50px; margin:auto; left:0; right:0;}编辑类选择器btns，设置选择器宽度为20px，高度为20px；向左浮动；左右外边距均为5px；边框圆角为50%；背景颜色为#888。.btns{ width:20px; height:20px; float:left;

01*6.1.4

布局banner图

margin:05px; border-radius:50%;

background:#888;}【思考总结】（1）举例说明内联样式的使用方法。（2）举例说明标签边框圆角的设置方法。【实训作业】布局个人网站首页中的banner。01*6.1.5

布局商品展示区【实现目标】首页商品展示区布局效果如图6-1-3（经典布局）和图6-1-4（普通布局）所示。在布局过程中需要注意一些问题：（1）每一组商品信息结构均为上下结构，且下方文字区域高度为70px；（2）经典布局左中右区域的宽度分别为590px、290px、286px；（3）经典布局左右图片和普通布局图片高度均为440px；（4）经典布局中部区域的上下图片高度分别为175px和180px。布局商品展示区图6-1-3首页商品展示区域经典布局图6-1-4首页商品展示区域普通布局01*6.1.5

布局商品展示区【知识扫描】（1）强化前面HTML标签的相关知识点。（2）CSS相关知识点：①弹性布局flex属性；②后代选择器。【实现步骤】用类为develop-box的<div>标签构建经典布局区域的左中右布局。HTML文档编辑操作：①在banner区域之后输入develop-box盒子，在其中插入商品展示区标题图片。<divclass="develop-box"> <imgsrc="img/huo1.jpg"alt=""></div>②在标题图片之后添加develop-box盒子，并为其添加类名showA，然后在其中嵌套左中右三个<div>。01*6.1.5

布局商品展示区<divclass="develop-boxshowA"> <divclass="showA-left"></div> <divclass="showA-middle"></div> <divclass="showA-right"></div></div>CSS文档编辑操作：①编辑类选择器showA，设置显示方式为弹性布局flex。.showA{

display:flex;

}②编辑类选择器showA-left，设置宽度为590px，高度为510px；右侧外边距为17px；临时背景颜色为粉色。.showA-left{ width:590px; height:510px;01*margin-right:17px; background:pink;}③编辑类选择器showA-middle，设置宽度为290px，高度为510px；临时背景颜色为粉色。.showA-middle{ width:290px; height:510px; background:pink;}④编辑类选择器showA-right，设置宽度为286px，高度为510px；左侧外边距为17px；临时背景颜色为粉色。.showA-right{ width:286px; height:510px;6.1.5

布局商品展示区01*

margin-left:17px; background:pink;}此时经典布局区域效果如图6-1-5所示。图6-1-5商品展示区经典布局区域中间效果12.将经典布局区域中间的盒子布局为上下结构。HTML文档编辑操作：在经典布局区域中间的盒子内部嵌套上下两个<div>标签，并设置类名分别为showA-top和showA-bottom。<divclass="showA-middle">

<divclass="showA-top"></div> <divclass="showA-bottom"></div></div>6.1.5

布局商品展示区01*CSS文档编辑操作：①编辑类选择器showA-top，设置其宽度为290px，高度为245px；下方外边距为15px；临时性背景颜色为blue。.showA-top{ width:290px; height:245px; margin-bottom:15px; background:blue;}②编辑类选择器showA-bottom，设置其宽度为290px，高度为250px；临时性背景颜色为blue。.showA-bottom{ width:290px;6.1.5

布局商品展示区01* height:250px; background:blue;}此时经典布局区域效果如图6-1-6所示。图6-1-6商品展示区经典布局区域中间效果26.1.5

布局商品展示区2.布局单个商品区域。HTML文档编辑操作：①在类元素showA-left内部嵌套一个<img>标签，图片为huo1-1.jpg；②在类元素showA-left内部继续嵌套一个<div>标签，并设置其类名为show-font；③在类元素show-font内部输入两个<div>标签，并设置其类名分别为show-fontL和show-fontR。<divclass="showA-left"> <imgsrc="img/huo1-1.jpg"alt=""> <divclass="show-font">

<divclass="show-fontL">商品名称</div> <divclass="show-fontR">￥233.00</div> </div></div>01*6.1.5

布局商品展示区CSS文档编辑操作：①编辑类选择器show-font，设置其宽度为100%，高度和行高均为70px；左右下边框为1px实心线，颜色为#C7C7C7。.show-font{ width:100%; height:70px; line-height:70px; border:1pxsolid#C7C7C7; border-top:0;}②编辑类选择器show-fontL，设置其向左浮动；左侧内边距为30px。.show-fontL{ float:left; padding-left:30px;}01*6.1.5

布局商品展示区③编辑类选择器show-fontR，设置其向右浮动；右侧内边距为30px；文字颜色为酒红色。.show-fontR{ float:right; padding-right:30px; color:#B91720;}④编辑类showA的后代img选择器，设置其垂直方向顶端对齐，可消除图片与其相邻元素之间的间隙。.showAimg{ vertical-align:top;}此时，经典布局区域效果如图6-1-7所示。图6-1-7商品展示区经典布局区域中间效果301*6.1.5

布局商品展示区4.复制单个商品区域的结构代码到合理位置。HTML文档编辑操作：复制步骤3粗斜体部分元素结构代码分别至类元素showA-top、showA-bottom、showA-right中，并依次修改图片名称为huo1-2.jpg、huo1-3.jpg、huo1-4.jpg；然后将经典布局区域的临时性背景颜色去掉。此时就完成了经典布局区域的制作。5.构建商品展示区普通布局。HTML文档编辑操作：继续添加一个类名为develop-box的<div>，并为其添加类名showB；然后在其中嵌套4个<div>标签，并设置它们的类名为showB-box。<divclass="develop-boxshowB"> <divclass="showB-box"></div> <divclass="showB-box"></div> <divclass="showB-box"></div> <divclass="showB-box"></div></div>01*6.1.5

布局商品展示区CSS文档编辑操作：编辑showB类选择器，设置其显示方式为弹性布局flex。.showB{display:flex;}编辑showB-box类选择器，设置其宽度为285px，高度为510px；左侧外边距为8px，右侧外边距为7px；临时性背景颜色为粉色。.showB-box{ width:285px; height:510px; margin:07px08px; background:pink;}此时普通布局区域效果如图6-1-8所示。图6-1-8商品展示区普通布局区域中间效果01*6.1.5

布局商品展示区6.完善普通布局。HTML文档编辑操作：复制步骤3单个商品结构至4个showB-box中，并依次修改图片名称为huo4-9.jpg、huo4-10.jpg、huo4-11.jpg、huo4-12.jpg。CSS文档编辑操作：编辑showB后代选择器img，设置其垂直对齐方式为顶端对齐，如showA中类似操作。此时就完成了普通布局区域的制作。【思考总结】（1）举例说明弹性布局子元素的方法。（2）举例说明消除图片与相邻元素之间缝隙的方法。【实训作业】利用弹性布局构建首页商品列表区域。01*6.1.6

布局脚部与返回顶部按钮【实现目标】首页脚部和返回顶部效果如图6-1-9所示。在布局过程中需要注意一些问题：（1）脚部最底端左侧5个图片元素是用同一张背景图片back.png实现的；（2）脚部最底端右侧图片为独立的一张图片yq6.png；（3）返回顶部区域的三个元素由同一张图片fix.png实现；（4）返回顶部区域所在图片为固定定位的<div>标签，“下载APP”和“在线客服”为链接标签。【知识扫描】（1）HTML相关知识点：空链接的设置。（2）CSS相关知识点：①固定定位；②透明度。【实现步骤】本节除固定定位图片元素为主要讲解内容之外，其他脚部相关布局由学生根据已学技术独立完成。图6-1-9脚部与返回顶部按钮布局效果01*6.1.5

布局商品展示区1.布局固定定位图片。HTML文档编辑操作：在<body>标签末尾嵌套一个<div>标签，设置其id属性值为fix-box。CSS文档编辑操作：编辑id选择器fix-box，设置其宽度为75px，高度为205px；背景图片为fix.png；相对于浏览器窗口固定定位，距浏览器右侧50px，下边框50px。#fix-box{ width:75px; height:205px; background-image:url(../img/fix.png); position:fixed; right:50px; bottom:50px;}01*6.1.5

布局商品展示区2.布局三个子元素。为了使一张图片的三个区域分别实现不同的功能，在id为fix-box的<div>标签内嵌套两个<a>标签和一个<div>标签。HTML文档编辑操作：在id为fix-box的<div>标签内嵌套两个<a>标签，id属性值分别为fix-app和fix-cust，href属性值均为空。<ahref=""id="fix-app"></a><ahref=""id="fix-cust"></a>在上方的<a>标签下方接着嵌套一个<div>标签，并设置其id属性值为fix-backTop。<divid="fix-backTop"></div>CSS文档编辑操作：①编辑id选择器fix-app，设置其显示为块元素；临时性背景色为红色；宽度为75px，高度为77px；透明度为0.5。#fix-app{01*6.1.5

布局商品展示区

display:block; background:red; width:75px; height:77px; opacity:0.5;}②编辑id选择器fix-cust，设置其显示为块元素；临时性背景色为黄色；宽度为75px，高度为73px；透明度为0.5。#fix-cust{ display:block; background:yellow; width:75px; height:73px; opacity:0.5;}此处设置背景色和透明度是为了有效控制元素的位置和大小，从而使客户在使用功能时不易出现点击错误。小提示01*6.1.5

布局商品展示区

③编辑id选择器fix-backTop，设置其临时性背景色为蓝色；宽度为75px，高度为55px；透明度为0.5。#fix-backTop{ background:blue; width:75px; height:55px; opacity:0.5;}此时返回顶部区域效果如图6-1-10所示。最终将临时性背景色和透明度去掉即可。 图6-1-10返回顶部区域中间效果【思考总结】（1）写出空链接实现的三种方法。（2）写出透明度属性的用法。【实训作业】完成首页返回顶部元素布局。02*02实现首页人机交互效果02*6.2.1

微信二维码的显示与隐藏【实现目标】浏览开发者网站首页，单击头部微信图标时显示微信二维码，为用户提供扫码登录网站的功能，如图6-2-1所示；当再次单击微信图标时，可隐藏微信二维码。图6-2-1奇数次单击微信图标时微信二维码显示效果【知识扫描】（1）HTML文档关联JS文件的方法。（2）JS相关知识点：①定义变量的方法；②通过id属性获取元素；③通过类属性获取元素组；④通过元素的style属性控制元素样式变化；⑤函数的定义和调用。【难点分析】单击微信图标显示二维码，以及再次单击微信图标隐藏二维码功能的实现，应使用开关原理，即定义一个开关变量跟踪二维码显示隐藏状态。本任务中采用开关值为0跟踪二维码隐藏状态，开关值为1跟踪二维码显示状态。02*1.创建index.js文件，并由index.html关联。在developer站点目录中创建js目录，使用软件创建JS文件index.js并保存在js目录中，在index.html的head标签中嵌套<script>标签，关联index.js，注意相对路径的设置。<scriptlanguage="javascript"src="js/index.js"></script>在index.js中输入下方代码后，使用Google浏览器浏览index.html，在页面上单击右键选择“检查”，在打开的界面中选择“Console”选项卡，观察控制台是否输出1，如图6-2-2所示。此操作的目的是验证HTML文档与JS文档的有效关联。console.log(1);【实现步骤】图6-2-2控制台测试效果测试成功后将上述代码删除。小提示6.2.1

微信二维码的显示与隐藏02*2.在index.js中输入窗口加载事件。

window.onload=function(){ 此处输入后续步骤所述JS相关代码。 }3.在加载事件中定义变量weiXin。通过类名捕获类名为head的元素组，将其中下标为1的元素赋值给变量weiXin。

varweiXin=document.getElementsByClassName("head")[1];

4.在HTML微信图片之后插入二维码图片（图片名称为erWei.jpg），并设置其id属性为erWei。

<imgsrc="img/erWei.jpg"id="erWei"alt="">5.在index.css中合适位置定义二维码样式表，设置其相对于父元素绝对定位，距父元素上方31px，右侧0px；宽度和高度均为100px；图层数为2。#erWei{ position:absolute; top:31px;【实现步骤】6.2.1

微信二维码的显示与隐藏02* right:0; width:100px; height:100px; z-index:2;}此时，网站头部效果如图6-2-1所示。为实现二维码相对于父元素绝对定位，需要将类选择器head设置为相对定位。小提示6.在窗口加载事件中定义变量erWei，并通过id属性捕捉二维码元素，将捕获到的元素赋值给erWei变量，然后通过style属性设置二维码隐藏。varerWei=document.getElementById("erWei");erWei.style.display="none";7.初始化跟踪二维码显示/隐藏的开关flag，初始值为0，即隐藏。varflag=0;6.2.1

微信二维码的显示与隐藏02*测试成功后将控制台输出语句删除。小提示8.定义weiXin对象的单击事件，触发控制台输出“weiXin”字样。weiXin.onclick=function(){ consolo.log("weiXin"); }此时如果代码正确，单击微信图标时，控制台输出“weiXin”。9.编辑weiXin对象单击事件，触发内容为，当二维码显示/隐藏跟踪开关为0时，设置erWei对象显示，开关flag为1；否则设置erWei对象隐藏，开关flag为0。if(flag==0){ erWei.style.display="block"; flag=1;}else{6.2.1

微信二维码的显示与隐藏02*

erWei.style.display="none"; flag=0;}10.创建自定义函数库文件js/fun.js，封装微信二维码显示/隐藏函数。为了将首页中的互动功能很方便地应用于其他页面，可以将其封装成函数。首先创建js/fun.js，并在index.html中关联fun.js；然后在fun.js中创建函数weiXin()，并将index.js实现二维码显示/隐藏的代码剪切粘贴到函数体中。functionweiXin(){ 步骤6-9相关代码。}删除index.js中微信二维码显示/隐藏相关代码，并输入调用函数weiXin()相关代码。weiXin();6.2.1

微信二维码的显示与隐藏02*【思考总结】（1）请列举JS获取DOM元素的几种方法。（2）请举例说明开关原理。（3）请说明封装函数的方法和意义。【实训作业】在个人网站首页中实现某DOM元素的显示/隐藏效果。6.2.1

微信二维码的显示与隐藏02*6.2.2

二级导航的插入与选项卡效果【实现目标】为一级导航栏插入二级导航，并实现选项卡效果。当鼠标移至一级导航栏时，相应的二级导航显示，如图6-2-3和图6-2-4所示为鼠标移至不同一级导航项效果；当鼠标离开一级导航栏时，二级导航隐藏，如图6-2-5所示。图6-2-3鼠标移至一级导航栏效果图1图6-2-4鼠标移至一级导航栏效果图2图6-2-5鼠标离开一级导航栏效果02*【知识扫描】（1）CSS3相关知识点：当鼠标移至父元素上，子元素显示。（2）JS相关知识点：①数组的定义和数组元素个数的获取；②数组元素的遍历；③for语句。（3）JQuery相关知识点：①JQuery文件的关联；②使用JQuery方法创建元素和获取元素；③使用JQuery获取同类元素的第n个元素；④子元素追加到父元素的方法；⑤父元素追加子元素的方法；⑥字符串连接变量的方法。【实现步骤】1.在index.html中编辑二级导航。在一级导航栏<a>元素“T恤”之后布局<div>元素，并设置其类名为nav2-box。在nav2内部输入3个<a>标签，并设置它们的类名为nav2。2.在index.css中编辑相关样式。编辑类选择器nav2-box，设置其宽度为101px，高度为auto；溢出属性为hidden；定位属性为绝对定位，距父元素上方24px；顶部边框为3px实心线，颜色为#B91720；背景颜色为#fff；图层数为1。6.2.2

二级导航的插入与选项卡效果02*.nav2-box{ width:101px; height:auto; overflow:hidden; position:absolute; top:24px; border-top:3pxsolid#B91720; background:#fff; z-index:1;}此时运行网页，可以发现二级导航无法显示，原因是一级导航栏所在盒子develop-box设置了溢出属性为hidden。所以将一级导航栏所在盒子类名修改为nav-box，并编辑其样式表，设置其宽度为1200px，高度为46px；相对于父元素水平居中，且上方外边距为20px。6.2.2

二级导航的插入与选项卡效果02*.nav-box{ width:1200px; height:46px; margin:20pxauto0;}在布局完成之后，将HTML端nav2-box类元素删除。小提示3.在index.html中关联JQuery文件。首先将jquery-1.12.1.js复制到站点js目录中，然后在index.html文档head部分添加script标签关联jquery-1.12.1.js文件。<script

language="javascript"src="js/jquery-1.12.1.js"></script>4.创建nav2()函数，为一级导航栏插入二级导航。①在fun.js中创建nav2()函数。functionnav2(){}6.2.2

二级导航的插入与选项卡效果02*同时在index.js窗口加载事件中调用函数nav2()。nav2();②在nav2()函数中初始化字符串二维数组str，存放二级导航名称。varstr=[["v领T恤","圆领T恤","翻领T恤"], ["纯色衬衫","花色衬衫","韩版衬衫"], ["轻薄羽绒服","羽绒马甲","长款羽绒服","面包羽绒服"], ["运动鞋","休闲鞋","皮鞋","马丁靴"], ["麻质上衣","麻裤"], ["羊绒衫","羊毛衫","棉线衫"], ["牛仔裤","运动裤","休闲裤"], ["床","衣柜","橱柜","洗浴用具"], ["定制西装","定制家具","定制首饰"]];6.2.2

二级导航的插入与选项卡效果02*③通过for语句创建9个类元素nav2Box，类名为nav2-box，并追加到相应的一级导航栏类元素nav中。for(vari=0;i<9;i++){ varnav2Box=$("<divclass='nav2-box'></div>"); 后续5）代码块 $(".nav:eq("+(i+1)+")").append(nav2Box); }④通过for语句创建和二级导航栏相对应的子元素nav2，类名为nav2，元素类型为a，内容为数组str对应的值。并将nav2追加到对象nav2Box中。for(varj=0;j<str[i].length;j++){ varnav2=$("<ahref='smallClass.html'class='nav2'>"+str[i][j]+"</a>"); nav2.appendTo(nav2Box);}6.2.2

二级导航的插入与选项卡效果02*5.使用CSS样式表实现选项卡效果。在index.css中完成以下工作：①设置类nav2-box显示方式为隐藏；②定义鼠标置于nav上方时，nav2-box显示方式为块形式。.nav:hover.nav2-box{display:block;}【思考总结】（1）CSS实现选项卡效果的方法。（2）举例说明数组的定义方法和元素遍历方法。（3）举例说明使用JQuery创建元素，追加元素到父元素，追加子元素的方法。【实训作业】在个人网站首页中实现二级导航加载和选项卡效果。6.2.2

二级导航的插入与选项卡效果02*【实现目标】（1）当在窗口中加载首页时，banner区域轮播图自动自左向右轮播，且当前图片对应的按钮背景色为酒红色，如图6-2-6和图6-2-7所示。（2）当鼠标移至banner区域时，轮播图停止。（3）用鼠标单击左侧按钮，轮播图向左轮播；用鼠标单击右侧按钮，轮播图向右轮播。（4）用鼠标单击下方按钮，显示对应的轮播图。6.2.3

banner图轮播效果实现图6-2-6轮播图按钮凸显与图片对应效果1图6-2-7轮播图按钮凸显与图片对应效果202*【知识扫描】（1）JS相关知识点：①时间间隔函数；②清除时间间隔对象。（2）JQuery相关知识点：①JQuery控制DOM元素样式；②获取当前元素在同类元素中的序号；③JQuery中的鼠标单击事件，鼠标浮于上方事件，鼠标离开元素事件。【实现步骤】1.在fun.js中创建并编辑函数btns(m)，实现动态插入m个按钮。在函数中循环m次，每次创建一个类名为btns的<div>元素，并追加到下方按钮盒子btns-box。设置按钮盒子的宽度为m*30像素。完整的JS代码如下：functionbtns(m){ for(vari=0;i<m;i++){ varbtns=$("<divclass='btns'></div>"); btns.appendTo(".btns-box"); }6.2.3

banner图轮播效果实现02*

$(".btns-box").css({"width":m*30+"px"});}最后将HTML文档中所有类名为btns的元素删除。2.在fun.js中创建并编辑函数banner(n)，作用是显示第n张banner图和突出下方的第n个按钮。functionbanner(n){ $(".banner").css({"display":"none"}); $(".banner:eq("+n+")").css({"display":"block"}); $(".btns").css({"background":"#CCC"}); $(".btns:eq("+n+")").css({"background":"#B91720"});}6.2.3

banner图轮播效果实现在实际应用中，banner图的数量并不是固定的，因此下方按钮数量也不是固定的，而是应该根据banner图的数量插入相同数量的按钮。因此需要定义该函数。小提示02*3.在fun.js中创建函数lunbo()，作用是实现轮播图所有效果。在lunbo()函数中初始化n=0，调用banner(n)。同时在index.js中调用该函数。varn=0;banner(n);4.在lunbo()函数中定义m变量的值为banner图的数量，同时在下方插入m个按钮。varm=$(".banner").length;btns(m);在lunbo()函数中定义left()函数，实现n值减一变化；并设置在n=0时，n的值变为m-1，即最后一张banner图的下标值；之后再次调用banner(n)。functionleft(){if(n==0){ n=m-1;}else{6.2.3

banner图轮播效果实现02* n--;}banner(n);}

6.在lunbo()函数中定义左侧按钮单击事件，实现向左翻banner图。$(".left-btn").click(function(){left();})7.在lunbo()函数中定义right()函数，实现n值加一变化；并设置在n=m-1时，n的值变为0，即第一张banner图的下标值；之后再次调用banner(n)。functionright(){ if(n==m-1){ n=0; }else{ n++; } banner(n); }6.2.3

banner图轮播效果实现02*8.在lunbo()函数中定义右侧按钮单击事件，实现向右翻banner图效果。$(".right-btn").click(function(){right();})9.在lunbo()函数中使用时间间隔函数实现每隔1000ms，右翻一张banner图，并将函数赋值给变量c。varc=setInterval(function(){right();},1000);10.在lunbo()函数中定义当鼠标移至banner图区域时，自动轮播停止。$(".banner").mouseover(function(){clearInterval(c)});

11.在lunbo()函数中定义当鼠标离开banner图区域时，自动轮播启动。 $(".banner").mouseout(function(){ c=setInterval(function(){right();},1000); })12.在lunbo()函数中定义当鼠标单击下方按钮时，获取按钮序号值index并赋值给n，显示相应的banner图。6.2.3

banner图轮播效果实现02*$(".btns").click(function(){ n=$(this).index(".btns"); banner(n); })【思考总结】（1）举例说明时间间隔函数的使用方法。（2）举例说明清除时间间隔对象的方法。（3）举例说明JQuery事件的定义方法。【实训作业】在个人网站首页中实现轮播图效果。6.2.3

banner图轮播效果实现02*【实现目标】当鼠标单击返回顶部按钮时，页面滚动条顶端回到0位置。【知识扫描】JQuery相关知识点：窗口滚动条顶部位置设置方法。【实现步骤】1.在fun.js中定义backTop()函数，同时在index.js窗口加载事件中调用该函数。2.在backTop()函数中，设置单击返回按钮（id为fix-backTop的元素），窗口滚动条顶端位置为0。functionbackTop(){ $("#fix-backTop").click(function(){ $(window).scrollTop(0); })}【思考总结】举例说明窗口滚动条顶端位置设置方法。【实训作业】在个人网站首页中实现返回顶部效果。6.2.4

返回顶部效果实现返回顶部效果实现02*【实现目标】当滚动条顶端位置低于一级导航栏原始位置时，导航栏固定在窗口顶端，如图6-2-8所示；当滚动条顶端位置高于一级导航栏原始位置时，导航栏回到原位，如图6-2-9所示。【知识扫描】（1）CSS相关知识点：实现固定定位元素水平居中的方法。（2）JQuery相关知识点：①窗口滚动事件；②获取窗口滚动条顶端位置方法。。6.2.5

导航栏实时固定于顶部效果实现图6-2-8导航栏固定于窗口顶端图6-2-9导航栏原始位置02*【实现步骤】1.在fun.js中定义函数navTop()，同时在index.js中调用该函数。2.在navTop()中定义窗口滚动事件。当窗口滚动条顶端位置大于等于200像素时，一级导航栏盒子样式为固定定位，距浏览器顶端0；图层为1，背景颜色为白色，外边距为自动，实现滚动条水平居中；距浏览器左侧和右侧均为0。否则一级导航栏盒子样式为相对定位。functionnavTop(){$(window).scroll(function(){ if($(window).scrollTop()>=200){ $(".nav-box").css({"position":"fixed","top":"0","z-index":"1","background":"#fff","margin":"auto","left":"0","right":"0"}); }else{ $(".nav-box").css({"position":"relative"}); }})}【思考总结】写出DOM元素顶端固定并水平居中的CSS样式表。【实训作业】实现个人网站首页在恰当的时候导航栏固定于顶端的效果。6.2.5

导航栏实时固定于顶部效果实现03*03制作其他页面03*6.3.1

制作一级列表页【实现目标】（1）隐藏元素hide()：隐藏指定的元素对象。一级列表页从上到下分为头部区域、二级分类导航区域（如图6-3-1所示）、热门商品展示区域（如图6-3-2所示）、分类商品展示区域（如图6-3-3所示）、脚部区域和返回顶部按钮。其中，脚部区域和返回顶部按钮同首页，头部区域中的轮播图更换为一级列表页相关图片。图6-3-1一级列表页二级分类导航区域图6-3-2一级列表页热门商品展示区域图6-3-3一级列表页分类商品展示区域03*6.3.1

制作一级列表页制作过程中需要注意一些问题。（1）二级分类导航包含当前一级分类下的所有二级分类名称，当鼠标单击二级分类时，将跳转到当前页中相应的商品展示区域。（2）热门商品展示区域包含所有当前一级分类下的热门商品，当鼠标悬浮于某商品图片上时，图片向左向上移动5px，同时显示阴影，阴影向右向下偏移5px，阴影半径为2px，阴影颜色为#999。（3）分类商品展示区域包含所有二级分类导航中的商品类型，每一个类型包含一个宣传图和对应的商品列表。

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论