任务13.3 页面顶部

网页设计项目教程（HTML5+CSS3+JavaScript）模块13网页开发综合案例任务13.3页面顶部任务描述开发"页面顶部"：4个子模块的结构、样式与动态效果本节任务上一节已创建并定位"页面顶部"模块。本节根据图13-3所示效果，使用HTML创建日期展示、多个关注渠道、logo、地标轮播四个子模块的内容与结构，用CSS布局美化，再通过JavaScript实现访问日期的动态展示。①日期展示p.hdTopDate，JS动态写入②多个关注渠道ul.hdTopChannels渠道入口③网站logoa.hdLogo，可点击跳转首页④地标轮播6张地标图，opacity控制显隐开发顺序静态效果：HTML+CSS动态效果：JavaScript日期渠道→logo→地标图header.js生成当天日期页面顶部结构总览hdWrap内分为hdTop（横条）与hdBody（背景区）两大部分div.hdTop（高40px，白色横条）p.hdTopDate日期①ul.hdTopChannels关注渠道②div.hdBody（1200px，高440px，相对定位）a.hdLogo③网站logo（可点击）div.hdLandmarks④6张地标图轮播两个子容器hdTop白色横条，内部hdTopInner限宽1200px居中；hdTopDate左浮动展示日期，内容暂空，由JS填充；hdTopChannels右浮动的ul，列出三个关注渠道入口，鼠标悬停展示二维码；hdBody深色背景区，相对定位作为定位参照；hdLogo绝对定位的logo链接；hdLandmarks绝对定位的地标轮播容器，6张图堆叠。13.3.1日期展示、多个关注渠道（HTML）在hdWrap中插入"日期展示"与"关注渠道"的结构代码<divclass="hdTop"><divclass="hdTopInner"><pclass="hdTopDate"id="curDate"></p><ulclass="hdTopChannels"><li><iclass="hdTopChannelIconwx"></i>微信</li><li>|</li><li><iclass="hdTopChannelIconwb"></i>微博</li><li>|</li><li><iclass="hdTopChannelIconphone"></i>手机版</li></ul></div></div>代码说明p.hdTopDateid为curDate，用于展示用户当天访问网站的日期；ul.hdTopChannels列举微信、微博、手机版等关注渠道入口；i.hdTopChannelIcon渠道图标，通过wx/wb/phone类区分不同图片。header.css：日期与关注渠道的样式css文件夹中新建header.css，设置顶部子模块样式/*由标注1、标注2组成的模块的样式*/.hdTop{height:40px;background-color:#fff;}.hdTopInner{width:1200px;margin:0auto;}.hdTopDate{float:left;line-height:40px;}.hdTopChannels{float:right;}.hdTopChannelsli{position:relative;float:left;line-height:40px;margin:010px;display:flex;align-items:center;}.hdTopChannelsli:hover{color:#2b579e;}.hdTopChannelsli:nth-child(2n){margin:0;}.hdTopChannelIcon{display:inline-block;width:20px;height:20px;background-size:100%100%;background-repeat:no-repeat;margin-right:4px;}.hdTopChannelIcon.wx{background-image:url(../imgs/wx.png);}.hdTopChannelIcon.wb{background-image:url(../imgs/wb.png);}.hdTopChannelIcon.phone{background-image:url(../imgs/phone.png);}代码说明float一左一右日期左浮动、渠道右浮动，分列横条两端；line-height:40px行高等于容器高，实现文字垂直居中；flex排列渠道li中图标与文字flex水平排列并垂直对齐；background-image每个渠道的图标用背景图设置。引入header.css并查看效果在head中引入样式文件，浏览器运行查看横条效果<!--在head中引入顶部样式--><linkrel="stylesheet"type="text/css"href="./css/header.css"/>要点回顾header.css专门存放"页面顶部"所有子模块的样式，与index.css分开管理；访问日期为动态生成故此阶段页面中日期位置暂无内容，等JavaScript开发完成后才会显示。file:///index.html（日期由JS动态生成）微信|微博|手机版图13-7访问日期、关注渠道部分的运行效果13.3.1logo、地标轮播（HTML）在hdWrap尾部插入logo与地标图片轮播的结构代码<divclass="hdBody"><aclass="hdLogo"href="/"target="_blank"><imgsrc="./imgs/logo.png"class="hdLogoPic"/></a><divclass="hdLandmarks"><divclass="hdLandmarkItemactive"><imgsrc="./imgs/landmark01.png"/></div><divclass="hdLandmarkItem"><imgsrc="./imgs/landmark02.png"/></div><!--landmark03~landmark06结构相同，省略--></div></div>代码说明a.hdLogo定义可点击的logo，target="_blank"新窗口打开官网；div.hdLandmarks包裹用于轮播展示的多个地标图片；.hdLandmarkItem.active默认第一张（黄鹤楼）带active类，处于显示状态；其余五张不带active，处于隐藏状态。header.css：logo与地标轮播的定位样式相对定位+绝对定位配合，实现logo与轮播图布局/*由标注3、标注4组成的模块的样式*/.hdBody{width:1200px;height:440px;margin:0auto;position:relative;overflow:hidden;}.hdLogo{position:absolute;display:block;width:399px;height:157px;top:50%;margin-top:-78px;}.hdLogoPic{width:100%;height:100%;}.hdLandmarks{width:530px;height:280px;position:absolute;right:30px;top:60px;}.hdLandmarkItem{width:100%;height:100%;position:absolute;opacity:0;}.hdLandmarkItemimg{width:100%;height:100%;}.hdLandmarkItem.active{opacity:1;}代码说明hdBody相对定位作为参照物，使子元素可相对它绝对定位；hdLogo绝对定位top:50%后再margin-top:-78px（高度的一半），实现垂直居中；hdLandmarkItemabsolute使六张地标图堆叠在同一位置；opacity控制显隐默认0全透明，带active类时为1完全显示。地标轮播的实现原理absolute堆叠+opacity切换，是轮播效果的常见做法6张图片absolute定位堆叠在同一位置landmark06.png（opacity:0隐藏）landmark05.png（opacity:0隐藏）landmark04.png（opacity:0隐藏）landmark01.pngclass="hdLandmarkItemactive"opacity:1显示默认状态6个.hdLandmarkItem均absolute，一张"压"在另一张上控制显隐opacity:0全透明隐藏；加上.active类则opacity:1切换轮播JS定时改变active类，实现图片轮播本节先完成静态堆叠与默认显示第一张；轮播的自动切换将在任务实施中通过JavaScript完成。样式美化后的页面顶部浏览器中运行index.html，查看整体静态效果file:///whly/index.html（日期由JS动态生成）微信|微博|手机版logo黄鹤楼landmark01.png图13-8样式美化后的页面顶部13.3.2日期展示（JavaScript）js文件夹中新建header.js，获取当天日期并展示到页面window.addEventListener("load",function(){//函数：获取当天的日期functiongetCurDate(){letcurrentDate=newDate();//当前日期时间letyear=currentDate.getFullYear();//getMonth()从0开始计数，所以要加1letmonth=currentDate.getMonth()+1;letday=currentDate.getDate();//getDay()返回0（星期日）~6（星期六）letdayOfWeek;switch(currentDate.getDay()){case0:dayOfWeek="星期日";break;case1:dayOfWeek="星期一";break;/*……case2~case5类似，略*/case6:dayOfWeek="星期六";break;}constformattedDate=year+"年"+month+"月"+day+"日"+dayOfWeek;returnformattedDate;}constcurDate=getCurDate();varcurDateDom=document.getElementById("curDate");curDateDom.innerHTML=curDate;//写入页面展示})代码说明load事件页面加载完成后才执行，保证能取到页面元素；newDate()自动获取当前的日期与时间；getElementById获取id为curDate的p元素；innerHTML把格式化好的日期字符串写入元素，展示在页面上。Date对象常用方法本案例用到的日期获取方法一览方法说明getFullYear()获取年份，返回4位数字，如2026getMonth()获取月份，返回0~11，因此需要+1修正为1~12getDate()获取月份中的第几天（1~31）getDay()获取星期几，返回0~6，0表示星期日，6表示星期六<!--在head中引入脚本文件--><scripttype="text/javaScript"src="./js/header.js"></script>使用注意getMonth()从0开始一月返回0，十二月返回11，展示时必须+1；getDay()返回数字需要用switch或数组把数字转换为"星期日"等中文；字符串拼接用+把年、月、日与星期拼接成"2026年9月30日星期三"的格式。动态展示日期的页面顶部引入header.js后，日期由JavaScript自动生成并填充file:///whly/index.html2026年9月30日星期三微信|微博|手机版logo黄鹤楼landmark01.png图13-9动态展示日期的页面顶部任务实施"页面顶部"还有两