《HTML5网页设计》补充案例6.docx

《《HTML5网页设计》补充案例6.docx》由会员分享，可在线阅读，更多相关《《HTML5网页设计》补充案例6.docx（18页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、补充案例一“传智播客”首页面制作一、案例描述1、考核知识点 运算符和表达式 条件语句、循环语句及跳转语句2、练习目标 掌握运算符和表达式的使用方法。 掌握条件语句、循环语句及跳转语句。3、需求分析在浏览网页时，既能看到静态的文本、图像，也可以看到浮动的动画、信息框以及动态变换的时钟信 息等。要想实现页面上这些实时的、动态的、可交互的网页效果就需要使用JavaScript语言来编写实现。 通过学习本案例带着大家学习JavaScript编程基础以及变量、函数等相关知识。4、案例展示效果如图7-1所示。29left:235px;30 top:Opx;31 上述代码中，第6行代码用于设置id名为ban

2、ner的盒子相对定位，第28行代码用于设置焦点图相对 于banner盒子绝对定位。保存index07.html与style07.css文件，刷新页面，效果如图7-10所示。图7-10 banner”模块效果图(6)添加JS效果下面，通过JavaScript控制左侧侧边栏奇数行列表的背景色。具体如下：a)定义奇数行列表的CSS样式.even background-color: #0572b6; /定义一个新类*/上述代码，用来设置左侧侧边栏奇数行列表的背景色为浅蓝色。b)书写奇数行列表的JavaScript代码1 function changeColor()2 /获取所有行3 var trs =

3、 document.getElementByld(nbannern).getElementsByTagName(nlin);4 /为奇数行添加class属性5 for(var i=0; itrs.length;”时,循环结束。保存js文件，刷新页面，此时，左侧侧边栏奇数行列表的背景色将会发生变化，效果如图7-11所示。图7-11侧边栏奇数行背景色发生变化接下来，通过JavaScript控制侧边栏下拉菜单的显示和隐藏。具体如下:a）添加下拉菜单结构代码将下拉菜单的结构代码添加到“Android培训”所在的li标签内部，代码修改如下:Android Vl|iMSiW)Ck F4!?.!ii b(b

4、）定义下拉菜单CSS样式#list_curwidth:125px;height:398px;position:absolute;left:235px;top:0;z-index:999;display:none;)#list_cur adisplay:block;width:llOpx;12345678912345678910111213height:80px;14 padding:9px;15 color:#000;16 17 #list_cur a:hovercolor:#F60;18 #list_cur a img,#list_cur a span19 display:block;20

5、padding-left:20px;21 c)书写下拉菜单JavaScript代码1 function change(myid,mode)2 document.getElementByld(myid).style.display=mode;3 if (mode = block，) /显示下拉菜单4 /设置下拉菜单所在div的边框5 document.getElementByld(myid).style.border=nlpx solid #eeen;6 document.getElementByld(myid) .style.backgroundColor=n#f9f9f9n;7 8 else

6、9 /当不显示下拉列表时，鼠标划过的的边框及背景颜色10 document . getElementByld(myid) .style.backgroundColor=n n;11 document.getElementByld(myid) .style.border=n n;12 )13 )在上面的JavaScript代码中，第2行代码用于为鼠标划过的li标记设置display属性，判断此时下拉 菜单是否显示，如果显示，那么为此下拉菜单设置边框及背景色。否那么，去掉li标记的边框和背景色。保存js文件，刷新页面，当鼠标移至“Android培训”栏目时 将会出现下拉菜单效果，如图7-12所图7

7、-12侧边栏下拉菜单效果4、制作内容模块(1) HTML结构分析“内容”模块整体上分为上下两局部，每局部主要由ul标记嵌套Ui标记构成，其中，每局部的图片使用img标记定义，文字链接使用a标记定义。“内容”模块的具体结构如图7-13所示。嵌 套 嵌 套 图7-13 “产品展示”模块结构图(2)样式分析“内容”模块分为上下两局部，需要设置在浏览器中居中显示。另外，需要设置li左浮动使其在一 行内排列。并且，设置img的边距使其拉开一定的距离。(3)搭建结构在index07.html文件内书写“内容”模块的HTML结构代码。具体如下:1 !-内容一2 3 width=H232H height=n1

8、30n /width=H232H height=n130n /li class=Honenximg src=nimages/tu01. jpg”liximg src=nimages/tu02 . jpgnliximg src=nimages/tu02 . jpgnwidth=n232height=n130liximg src=nimages/tu03 . jpg”width=232 ”height=n130nliximg src=nimages/tu04 . jpgnwidth=n232nheight=n130n9 101011a href=#”你离大神只差这一节课br /iOS开源框架封装之

9、下拉刷新/a12/li1314全套C/C+教程+笔记+配套工具超百万用户受益151617a href=#前端2016最全最新知识点汇总视频+源码+技巧+软件+面试181920a hre=#不做程序猿不用敲代码网络营销一样拿高薪222324123456789101112131415161718192021222324252627282930313233343536372121!-内容一(4)定义样式在样式表文件style07.css中书写CSS样式代码，用于控制“内容”模块。具体如下: contentwidth:960px;overflow:hidden;margin:lOpx auto; .c

10、ontent .top liwidth:232px;height:130px;float:left;margin-left:lOpx; .content .down width:960px;height:280px;margin-top:140px; text-align:center; ) .content .down li width:230px;height:248px;float:left;border:Ipx solid #ccc;margin-left:lOpx;padding-top:30px; .content .down li img width:155px;height:1

11、25px; ).content li.onemargin-left:Opx; .content .down adisplay:block;text-align:center;padding-top:30px; color:#000; ).content .down a:hovercolor:#F60;保存index07.html与style07.css文件，刷新页面，效果如图7-14所示。图7-14 “内容”模块效果图当鼠标移上内容中的文字链接时，文字颜色将变为橙色，效果如图7-15所示。图7-15鼠标移上内容中的文字链接效果5、制作底部模块(X) HTML结构分析“底部”模块由vdiv标记定

12、义。上面的版权信息使用vp标记定义。下面的版权图片使用vimg标记 定义。具体结构如图7-16所示。版权所有2006 - 2016 1绿传智播客於育科担p区建材城西路金燕龙办公楼一层 ：100096 ：010-82935150/60/70 邮箱:乐1CP苗U8001421号京公网安号图716 “底部”模块结构图(2)样式分析“底部”模块版权信息与版权图片居中显示，需要设置文本样式并通过text-align属性设置文本及 图片居中对齐。(3)搭建结构在index07.html文件内书写“底部”模块的HTML结构代码。具体如下：1 !一底部一2 3 p版权所有2006 - 2016北京传智播客教育

13、科技地址：北京市昌平区建材城西路金燕龙办公楼一层 ：1000964 ：010-82935150/60/70 邮箱： 京工CP 备 08001421 号 京公网安备 5 6 7 8 9 10 !-底部(4)定义样式在样式表文件style07.css中书写CSS样式代码，用于控制“底部”模块。具体如下：11 .footer12 width:960px;13 overflow:hidden;14 margin:20px auto;15 text-align:center;16 )17 .footer p18 height:45px;19 font-size:12px;20 line-height:2

14、4px;21 22 .footer img23 height:36px;24 padding-left:30px;25 margin-top:lOpx;26 保存index07.html与style07.css文件，刷新页面，效果如图7-17所示。图7-17 “底部”模块效果图改变中国:t林盲,我们正在行动传智播客 免费学习资源课程中心原胺材学员故事传智社区JavaEE培训AndroldtfiilllPHPiSfiJiIrostmiii前端与移动开发增C/C+做II网络华培源Python 僚 II7月10日广州般区即将迎来湍薪大潮!每天51864个iOS开发急聘 轻松挑战月薪10000+ !云

15、计翼之大数琨培训版权所有2006 - 2016 1徐传粉极印蚣司地址：1冰市3平区曲城西帕蓬龙办公法一星,缝：100096 :010-62935150/60/70 都精:zhanghjit3， 京ICPS0800H21 号京公网安$图7-1 “传智播客”首页面效果展示二、布局及定义基础样式1、效果分析(1) HTML结构分析“传智播客”首页面从上到下可以分为5个模块，如图7-2所示。图7-2 “传智播客”首页面结构分析(2) CSS样式分析页面中的各个模块居中显示，页面的版心为960px。另外，页面中的所有字体均为微软雅黑，字体大 小为12px,这些可以通过CSS公共样式进行定义。2、页面布局

16、新建index07.html文件，在index07.html文件内书写HTML结构代码，具体代码如下。1 3 4 5 7 8 9 !-头部10 11 12 !-导航一13 14 15 !banner16 17 18 19 20 21 22 23 24 25 26 在上述代码中，通过给div添加不同的类名或id名来定义页面中的各个模块。3、定义公共样式在index07.html文件所在的文件夹内新建css文件夹用于存放样式表文件style07.css,使用链入式引入 样式表文件。然后定义页面的基础样式，具体如下：/重置浏览器的默认样式/* margin:0; padding:0; list-st

17、yle:none; border:0;/*全局控制*/body font-family: “微软雅黑“；font-size : 12px; a:link,a:visitedtext-decoration:none;a:hoveroutline:none;4、引入js文件在站点根目录下的js文件夹内新建jsO7.js文件，使用链入式在index07.html文件中引入该文件:script type=Htext/javascriptn src=n j s/j s07 . j snx/script三、案例制作L制作头部模块(1) HTML结构分析“头部”模块整体由一个大盒子Vdiv进行控制。中间的内

18、容由一个div定义，左右两边的内容由两 个p标记定义。“头部”模块的具体结构如图7-3所示。传智赛客旗下品牌：黑马程序员|博学谷改变中国IT被育，我们正在行动图7.3 “头部”模块结构图(2)样式分析“头部”模块通栏显示，需要设置宽度100%显示。中间的内容局部宽960像素，且垂直居中显示。(3)搭建结构在index07.html文件内书写“头部”模块的HTML结构代码。具体如下：1 !一头部一2 3 4 传智播客旗下品牌：fSJT I Snbsp;W5 改变中国工T教育，我们正在行动6 7 8 !-头部-(4)定义样式在样式表文件style07.css中书写CSS样式代码，用于控制

19、“头部”模块。具体如下：1 .topbar2 width:100%;3 height:40px;4 border-bottom:lpxsolid #DDD;5 background:#055C92;6 )7 .topbar .inner8 width:960px;9 margin:0 auto;10 font-size:12px;11 line-height:40px;12 color:#FFF;13 )14 .topbar .inner acolor:#FFF;15 .topbar .top_l16 float:left;17 )18 .topbar .top_r19 float:right

20、;20 )保存index07.html与style07.css文件，刷新页面，效果如图7-4所示。图7-4“头部”模块效果图2、制作导航模块HTML结构分析“导航”模块整体由一个大盒子vdiv进行控制，分为log。和导航列表两局部。log。局部由hl标记 定义，导航列表局部整体使用ul标记搭建结构，其中每个导航栏目分别使用li标记定义。“导航”模 块的具体结构如图7-5所示。i客ul 嵌套 li免费学习资源课程中心原创教材学员故事传智社区图7-5 “导航”模块结构图（2）样式分析“导航”模块左右两局部并列显示，需要设置左右两局部分别左浮动。另外，定义li标记左浮动, 并定义相关的文字样式。此外

21、，设置鼠标移上超链接时，对应的导航文本颜色变为橙色。（3）搭建结构在index07.html文件内书写“导航”模块的HTML结构代码。具体如下:2 3/己4lia href=#”免费学习资源6789Wcl=IlLslixa href=n#n targt=_blank”原创教材 MiV传智社区1011 12 （4）定义样式在样式表文件style07.css中书写CSS样式代码，用于控制“导航”模块。具体如下:1 .nav2 width:960px;3 height:llOpx;4 margin:0 auto;5 )6 .nav hl7 float:left;8 padding:30px 0;9

22、)10 .nav li11 width:560px;12 float:left;13 margin-left:65px;14 15 .nav_li li16 float:left;17 font-size:16px;18 line-height:llOpx;19 margin-right:35px;20 )21 .nav_li li acolor:#333333;22 .nav_li li a:hovercolor:#F60;上述代码中，第7行和第12行代码分别用于设置导航模块logo局部和导航列表左浮动。第16行代码 用于定义每个导航栏目左浮动，从而在一行内并列显示。保存index07.ht

23、ml与style07.css文件，刷新页面，效果如图7-6所示。图7-6 “导航”模块效果图当鼠标移上导航中的文字链接时，对应的导航文本颜色变为橙色。如图7-7所示即为鼠标移上“课程 中心”时的效果。图7-7鼠标移上“课程中心”效果3、制作banner模块(1) HTML结构分析“banner”模块整体上由div标记定义，包括左侧侧边栏和焦点图两局部。其中，左侧侧边栏使用无 序列表ul定义，里面的每一行栏目使用li定义，栏目中的文字说明通过a标记定义。另外，焦点图使 用vimg定义。banner”模块的具体结构如图7-8所示。嵌套嵌套JavaEE 培训An droid培训PHP 胤 IIUI谢

24、鹏IIiOSilll前湍与移动开发培训C/C + +ii|网络营销培训Python胤II ,云计算之大数据培训 73100广州般区即将皿来哥 每天51864个iOS开发急聘轻松挑战月薪10000+ !图7-8 banner”模块结构图(2)样式分析“banner”模块需要设置控制整体的大盒子相对定位，焦点图相当于大盒子绝对定位，并通过边偏移 值来确定具体位置。另外，需要定义左侧侧边栏中的文本样式。(3) JS效果分析观察效果图7-1可以看出，侧边栏的导航栏目奇数行的背景色为浅蓝色，可以通过在CSS样式中定义 一个类，并使用JavaScript脚本给对应的导航栏添加类名实现。另外，当鼠标移动到侧

25、边栏的“Android培训”时，在其右侧将出现一个背景色为灰色，并带有边框 的下拉菜单，效果如图7-9所示；当鼠标移出后，侧边栏恢复原来的样式。JavaEE培训AndroidiilllPHP培训UI诩施1|iOS培训前端与移动开发培训C/C + +胤 II网络营销培训Python 副 1云计算之大数据培训课程详情O教学资料视频下载10日惭交区即将皿来薪大潮!W51864个iOS开发急聘挑战月薪10000+ !广州 iOS图7-9鼠标移到“Android培训”效果图(4)搭建结构在index07.html文件内书写“banner”模块的HTML结构代码。具体如下:1 2 3 4 5 JavaEE

26、 培训href=n#nAndroici inVl| PHP 培训/i/aUI 设计培训/liiOS 培训/spanspan前端与移动开发培训/spanC/C+培训I网络营销培训/aPython 培训/i/a/lilixa href=#span云计算之大数据培训/spani/i/a/1i (5)定义样式在样式表文件style07.css中书写CSS样式代码，用于控制“banner”模块。具体如下:/banner*/#bannerwidth:960px;height:400px;margin:0 auto; position:relative;)sub_navwidth:235px;height:

27、400px;background:#055c92;).sub_nav .nav_txt height:400px;.sub_nav .nav_txt li a font-size:14px;color:#FFF;display:block;height:40px;line-height:38px; padding:0 38px;).sub_nav .nav_txt li a span float:left;.sub_nav .nav_txt li a i font-style:normal;float:right; )891011121314151617181920123456789101112131415161718192021222324252627#banner .picOl28position:absolute;