任务13.2 搭建页面结构

网页设计项目教程（HTML5+CSS3+JavaScript）模块13网页开发综合案例任务13.2搭建页面结构任务描述创建项目、搭建页面结构，使"页面顶部"与"页面主体"两模块按要求就位本节任务本节通过HTML、CSS、JavaScript等技术开发"文化旅游"页面。在创建该项目后，通过HTML、CSS代码搭建出页面结构，使得"页面顶部""页面主体"两个模块元素能够按照要求放置在合理位置。①创建项目按css/imgs/js分目录组织文件②搭建框架index.html中创建两个兄弟div③定位布局CSS设置宽高、背景与相对定位本任务知识点站点文件的组织方式|HTML基本文档结构（DOCTYPE、head、body）|div块级容器与类名规划CSS标签重置|background-image背景图|margin:0auto水平居中|position:relative结合top相对定位13.2.1创建项目：站点文件结构本案例内容多、结构复杂，需合理组织文件夹管理文档图13-5站点文件结构whly/项目根目录（站点文件夹）css/存放所有样式文件index.css通用样式+页面结构定位header.css页面顶部模块样式main.css页面主体模块样式imgs/存放图片文件js/存放JavaScript文件index.html描述页面结构分目录管理的意义•css/集中存放样式，统一管理与复用；•imgs/集中素材（背景图、logo、图标、雪碧图）；•js/集中脚本（header.js、main.js等）；•index.html放在根目录，作为页面入口。合理组织文件夹：既能提升开发效率，也方便日后的维护与更新，是规范开发的第一步。根目录名whly取"文旅"拼音首字母，与项目主题对应。图13-5站点文件结构13.2.2页面框架：index.html在index.html中搭建页面框架，创建两个兄弟模块<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>文化旅游-武汉市文化和旅游局</title></head><body><divclass="hdWrap"></div><divclass="mainWrap"></div></body></html>代码说明title标签包裹的文本为页面标题，显示在浏览器标题栏中。div.hdWrap为创建的"页面顶部"模块。div.mainWrap为创建的"页面主体"模块。两个div是兄弟节点，同为body的直接子元素，后续分别向其中填充顶部与主体的内容。两个兄弟模块：hdWrap与mainWrap页面由"页面顶部""页面主体"两个兄弟模块构成body<divclass="hdWrap">页面顶部<divclass="mainWrap">页面主体•两者是并列的兄弟关系；•按文档流自上而下依次排列；•后续通过CSS分别控制两者的尺寸与位置。结构化的意义先搭出"骨架"，再逐块填充内容与样式：①结构先行：先把页面的两个大模块用div划分清楚；②各司其职：顶部与主体互不干扰，便于分工与排查问题；③便于扩展：后续每个子模块都插入到对应父模块内，层次清晰。样式重置：新建css/index.css先消除浏览器默认样式，避免后续重复设置html,body,p,ul{margin:0;padding:0;}

ul{list-style:none;}

a{text-decoration:none;color:#000;}代码说明margin/padding归零将html、body、p、ul的默认内外边距清零，避免默认间距干扰布局。list-style:none去掉ul列表项前的小圆点。text-decoration/color去掉a链接下划线并统一文字颜色。这些是通用于全站的样式，提前统一设置，后续就不必反复书写。页面顶部：.hdWrap样式设置顶部模块的宽高与背景图/*顶部*/.hdWrap{width:100%;height:480px;background-image:url(../imgs/bg.jpg);background-size:100%100%;background-repeat:no-repeat;}代码说明width:100%顶部区域横向占满整个浏览器宽度。height:480px顶部区域的高度为480像素。background-image通过url(../imgs/bg.jpg)引入背景图，../表示回退到上一级（根目录）。background-size:100%100%让背景图拉伸铺满整个区域；background-repeat:no-repeat背景图不重复平铺。页面主体：.mainWrap样式固定宽度居中，并相对定位上移覆盖顶部区域/*主体部分*/.mainWrap{width:1200px;margin:0auto;background-color:#fff;position:relative;top:-100px;/*临时设置的样式，方便验证页面结构*/height:160px;background-color:#2b579e;}代码说明width:1200px主体模块固定宽度1200像素。margin:0auto左右外边距自动，使主体在页面中水平居中。position:relative+top:-100px在自身原位置基础上向上移动100px，从而覆盖"页面顶部"的下半部分。height/background-color（临时）主体暂无内容、高度为0，临时给高度与背景色以验证结构，正式开发时删除。相对定位：主体上移覆盖顶部position:relative配合top:-100px实现"压盖"效果file:///whly/index.htmlhdWrap480pxbackground-imagemainWrap1200px居中file:///whly/index.htmlhdWrap480pxbackground-imagemainWrap1200px居中↑上移100px（top:-100px）未设置定位：主体紧随顶部之下relative+top:-100px：主体上移覆盖顶部相对定位不脱离文档流，仍占据原来的位置，只改变自身的显示位置。引入样式表并查看效果link标签引入index.css，浏览器中运行验证结构<!--在head中引入样式文件--><linkrel="stylesheet"type="text/css"href="./css/index.css"/>link标签属性rel="stylesheet"声明引入的文件是样式表；type="text/css"指定样式类型为CSS；href="./css/index.css"指定样式文件的相对路径。引入后运行index.html，即可看到页面结构效果。file:///whly/index.htmlhdWrapwidth:100%height:480pxbackground-image:url(../imgs/bg.jpg)mainWrap（临时height:160px+蓝色背景）width:1200pxmargin:0autoposition:relativetop:-100px图13-6页面结构效果任务实施设计不同于本节的布局方案，实现同样的页面布局效果本节完成了项目的创建，用HTML创建了页面结构内容，并通过CSS定位技术实现了页面布局。请设计一种不同于本节的布局方案，实现同样的页面布局效果（两个模块+主体上移覆盖）。方案一：绝对定位•父容器position:relative•mainWrap用position:absolute•top设为负值使其上移方案二：负外边距•mainWrap保持普通文档流•设置margin-top:-100px•同样实现上移覆盖效果方案三：固定定位/变换•使用transform:translateY(-100px)•或结合z-index控制层级•注意不脱离文档流任务小结回顾"搭建页面结构"的关键步骤建项目按css/imgs/js分目录组织文件，根目录放index.html，规范且便于维护。搭骨