任务13.4 页面主体

网页设计项目教程（HTML5+CSS3+JavaScript）模块13网页开发综合案例任务13.4页面主体任务描述开发"页面主体"：5个子模块的结构、样式与动态效果本节任务本节根据"页面主体"所展示的效果，使用HTML创建导航栏、搜索框、新闻资讯、文化名录、轮播器五个子模块的内容与结构，设置CSS样式布局美化，并通过JavaScript实现搜索提交与选项卡切换等动态效果。①导航栏ul.navs，7个可点击导航项②搜索框select+input+提交图标③新闻资讯五组选项卡，display切换④文化名录雪碧图图标+门户入口⑤轮播器武汉伴手礼（任务实施完成）开发顺序静态效果：HTML+CSS动态效果：JavaScript导航搜索→新闻选项卡→文化名录搜索提交+选项卡切换13.4.1导航栏、搜索框（HTML）在mainWrap中插入导航栏与搜索框的结构代码（网址有缩写）<divclass="mainHd"><ulclass="navs"><li><ahref="/">首页</a></li><li><ahref="…/zfxxgk/">政府信息公开</a></li><li><ahref="…/hdjl/">互动交流</a></li><li><ahref="…">办事服务</a></li><liclass="activeNav"><ahref="…/whly/">文化旅游</a></li><li><ahref="…/ztzl_27/">专题专栏</a></li><li><ahref="…">数据开放</a></li></ul><divclass="searchWrap"><select><optionvalue="0">关键词</option></select><inputtype="text"id="searchContent"><iclass="searchIcon"id="submit"></i></div></div>代码说明ul.navs定义导航栏，每个li内用a标签定义可点击的导航子项；li.activeNav当前栏目"文化旅游"带activeNav类，呈高亮状态；div.searchWrap搜索栏：select定义搜索类型，input供用户输入，i元素展示提交图标。main.css：导航栏样式新建css/main.css设置页面主体样式，先完成导航栏/*由标注1、标注2组成的模块的样式*/.mainHd{overflow:hidden;background-color:#2b579e;}.navs{list-style:none;overflow:hidden;color:#fff;height:60px;float:left;}.navsli{float:left;line-height:60px;font-size:22px;text-align:center;width:136px;}.navsa{color:#fff;text-decoration:none;font-weight:700;}.activeNav{background-color:rgba(0,0,0,.2);}代码说明float:leftnavs及其li均左浮动，实现导航子项的横向排列；line-height:60px行高等于栏高，文字垂直居中；rgba(0,0,0,.2)半透明黑色背景，叠加在蓝色上形成高亮当前栏目效果。首页政府信息公开互动交流办事服务文化旅游专题专栏数据开放导航栏排列效果：activeNav高亮当前栏目"文化旅游"main.css：搜索框样式flex布局使选择框、输入框、图标按要求水平排列.searchWrap{height:60px;display:flex;flex-direction:row;justify-content:center;align-items:center;}.searchWrapselect{height:34px;font-size:14px;background:#6b89bb;border:1pxsolid#6b89bb;color:#fff;padding-top:1px;border-radius:4px004px;}.searchWrapinput{height:34px;width:150px;box-sizing:border-box;line-height:20px;font-size:16px;padding:035px00;border:none;color:#fff;background:#6b89bb;outline:none;border-radius:04px4px0;}.searchIcon{position:absolute;right:30px;width:20px;height:20px;background-image:url(../imgs/search.png);background-size:100%100%;background-repeat:no-repeat;}<!--引入main.css--><linkrel="stylesheet"type="text/css"href="./css/main.css"/>代码说明display:flex搜索栏内三个控件水平排列并垂直居中；border-radius:4px004px选择框左圆角、输入框右圆角，拼接成一个整体；.searchIcon绝对定位到搜索栏右侧，以背景图展示放大镜图标。导航栏、搜索框效果浏览器中运行index.html，查看导航栏与搜索框file:///index.html首页政府信息公开互动交流办事服务文化旅游专题专栏数据开放关键词图13-13导航栏、搜索框效果13.4.1新闻资讯（HTML·选项卡结构）新闻资讯通过选项卡展示多种类型新闻，共五组，结构一致<divclass="row1"><divclass="row1Col"><divclass="tabs"><divclass="tabsNavs"><aclass="tabsNavsItemactive">法制建设</a><aclass="tabsNavsItem">规划发展</a></div><divclass="tabsPanels"><divclass="tabPanelsItemactive"><divclass="topNews"><atitle="武汉文旅普法讲座开启…">头条新闻标题</a><p>时间：12-09来源：长江日报</p></div><ul><liclass="newsItem"><a><spanclass="newsItemTitle">新闻标题…</span><spanclass="newsItemDate">12-05</span></a></li><!--其余新闻项结构相同--></ul></div><divclass="tabPanelsItem"><!--规划发展新闻，省略--></div></div></div></div><!--第二组选项卡：文化艺术/公共服务，结构相同--></div>代码说明div.tabs一组选项卡的容器；tabsNavs内两个a为可切换的选项；active类选项带active表示活跃，对应新闻列表同时展示；tabPanelsItem包裹每组新闻列表（头条+ul列表），带active才显示。main.css：选项卡样式row1使用flex平分宽度；display切换选项卡显隐.row1{display:flex;justify-content:center;}.row1Col{width:50%;padding:15px;box-sizing:border-box;}.tabsNavsItem{position:relative;padding:020px;font-weight:bold;font-size:20px;cursor:pointer;line-height:40px;}.tabsNavsItem.active{color:#2b579e;}.tabsNavsItem.active::after{/*选项左侧竖线装饰*/content:"";position:absolute;top:50%;left:0;width:5px;height:18px;margin-top:-9px;background-color:#2b579e;}.tabsPanels{overflow:hidden;position:relative;}.tabPanelsItem{display:none;}/*隐藏*/.tabPanelsItem.active{display:block;}/*显示*/.topNews{padding:20px;background-color:#f5f5f5;}.newsItemTitle{float:left;width:86%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}/*超长省略号*/.newsItemDate{float:right;color:#bbb;}代码说明row1+row1Col两组选项卡各占50%宽度，并排展示；display:none/blocktabPanelsItem默认隐藏，配合active显示新闻列表；::after伪元素活跃选项左侧的竖色条；text-overflow:ellipsis新闻标题超长时显示省略号。新闻资讯效果两组选项卡并排展示，各显示活跃选项下的新闻列表file:///whly/index.html首页政府信息公开互动交流办事服务文化旅游专题专栏数据开放关键词法制建设规划发展头条：武汉文旅普法讲座开启，"名家论坛"探索秦简中的法律智慧时间：12-09来源：长江日报晴川阁上新文旅普法长廊，开启"宪法宣传周"普法活动12-05外出旅行怎样"游"法可依？普法轻骑兵校园行开启09-23守护"少年的你"，暑期普法讲述如何远离校园欺凌08-05文化艺术公共服务头条：武汉文旅普法讲座开启，"名家论坛"探索秦简中的法律智慧时间：12-09来源：长江日报晴川阁上新文旅普法长廊，开启"宪法宣传周"普法活动12-05外出旅行怎样"游"法可依？普法轻骑兵校园行开启09-23守护"少年的你"，暑期普法讲述如何远离校园欺凌08-05图13-14新闻资讯效果13.4.1文化名录（HTML+CSS）列举多个可游玩的门户网站入口，点击跳转对应站点<divclass="travels"><ahref="…"class="mlPic"><imgsrc="./imgs/wlml.jpg"/></a><ulclass="travelsList"><li><ahref="…/jyjc/"><iclass="s1"></i><span>剧院剧场</span></a></li><li><ahref="…/tsgcx/"><iclass="s2"></i><span>图书馆</span></a></li><!--s3博物馆/s4旅游景区/s5旅行社/s6旅游饭店--></ul></div>

/*由标注4组成的模块的样式*/.travels{height:165px;border:1pxsolid#ccc;}.mlPicimg{width:430px;height:165px;float:left;}.travelsList{width:750px;margin-left:450px;padding:22px0;display:flex;flex-direction:row;flex-wrap:wrap;}.travelsListlia{display:flex;height:60px;font-size:20px;justify-content:flex-start;align-items:center;}.travelsListi{display:inline-block;width:40px;height:40px;background-image:url(../imgs/icons.png);background-size:320pxauto;margin:015px;}.travelsListi.s2{background-position:-40px-80px;}/*s1~s6通过不同的background-position取对应图标*/代码说明a.mlPic包裹文化名录大图，点击整图跳转新页面；sList六个li各为入口，flex换行排成两行三列；i.s1~i.s6入口图标均取自雪碧图，见下页。雪碧图：图标合并与取用多个小图标合并为一张图，用background-position精准取用雪碧图icons.png（320px宽，6个图标排成一行）0px-40px-80px-120px-160px-200px-240px-280px←图标横向依次偏移40px↑纵向-80px取图原理background-image:url(../imgs/icons.png)以整张雪碧图作为背景，background-size:320pxauto按原始尺寸显示；background-position:-40px-80px向左、向上平移背景图，让需要的图标恰好落在i元素40px×40px的显示区域内。图13-15雪碧图13.4.3搜索框的提交（JavaScript）新建js/main.js：点击提交图标，按用户输入跳转搜索结果页window.addEventListener("load",function(){document.getElementById("submit").onclick=function(){constinputDom=document.getElementById("searchContent");letvalue=inputDom.value.trim();//去除前后空格if(value===""){alert("请输入关键字");return;}constpathStr="/SITE/whs_70/search.html";constqueryStr="?searchWord="+value+"&siteId=15&pageSize=10&orderBy=all";constlinkStr=pathStr+queryStr;window.open(linkStr,"_blank")//新窗口打开搜索结果}})代码说明onclick点击事件监听id为submit的提交图标；value+trim()取得输入字符串并去除前后空格；为空判断为空则alert提示并return，不为空才跳转；window.open拼接查询字符串后在新窗口打开搜索结果页。13.4.3选项卡的切换（JavaScript）鼠标悬停选项即切换：高亮当前选项，展示对应新闻列表functionbindTabActive(tabNavs){for(vari=0;i<tabNavs.length;i++){tabNavs[i].onmouseenter=function(event){consttarget=event.target;//当前选项if(target.className.indexOf("active")!=-1){return;//已活跃则退出}target.className="tabsNavsItemactive";//高亮当前选项constparentDom=target.parentNode.parentNode;consttabpanelDoms=parentDom.getElementsByClassName("tabPanelsItem");constnextBroDom=target.nextSibling.nextSibling;if(nextBroDom){//选中第一个选项nextBroDom.className="tabsNavsItem";tabpanelDoms[1].className="tabPanelsItem";tabpanelDoms[0].className="tabPanelsItemactive";return;}constpreBroDom=target.previousSibling.previousSibling;if(preBroDom){//选中第二个选项preBroDom.className="tabsNavsItem";tabpanelDoms[0].className="tabPanelsItem";tabpanelDoms[1].className="tabPanelsItemactive";}}}}consttabsNavsItem=document.getElementsByClassName("tabsNavsItem");bindTabActive(tabsNavsItem);//为每个选项绑定动态效果代码说明mouseenter鼠标移入选项即触发，无需点击；indexOf("active")判断当前选项是否已活跃，活跃则直接返回；nextSibling/previousSibling判断选中的是第一个还是第二个选项；切换active类高亮当前选项，并切换两个新闻列表的显示与隐藏。动态的选项卡引入main.js后，鼠标悬停"规划发展"，新闻列表随之切换file:///whly/ind