Web前端开发技术项目教程（HTML5 CSS3 JavaScript）（微课版） 课件 7.1任务引入 非遗资讯页面整体布局.pptx

项目7非遗资讯页面信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》页面布局

任务7.1搭建资讯页面的基本框架前端技术开发

任务引入一非遗资讯页面的原型图网页内容框架将复杂的页面划分成不同的区域，分而治之

任务描述搭建资讯页面整体布局1.将网页内容划分为3大区域，分别为页眉、页面主要内容、页脚，每个区域使用层来实现。2.页面主要内容区域又可划分为“资讯推介”区域和“专题报道”区域。3.为了直观了解网页的整体布局，会增加背景等样式来突出不同的区域。化繁为简，从大处着眼，从细节处着手。

任务实施二3124使用层来创建各区域，搭建网页结构设置各区域的样式根据UI设计，划分页面的各内容区域各区域的上下、左右排版HTML创建层CSS样式设置划分区域CSS排版

二任务实施将页面划分为页眉、页脚、页面主要内容三个区域页面主要内容页眉页脚Footer层Content层Header层对应创建Header层、Content层、Footer层

二任务实施Footer层Content层Header层创建Header层、Content层、Footer层三个部分divid=header 页面头部/divdivid=content 页面主体/divdivid=footer 页面底部/div创建层的HTML代码

任务实施二divid=content divid=news h1资讯推介/h1 /div divid=report h1专题报道/h1 /div/div页面主体HTML代码contentnewsreportnews区块逐步细化，分为news层和report层

任务实施二#header,#content,#footer{ width:1300px; margin:auto;}#header,#footer{ height:100px; background:#faa046;}#header,#content{ margin-bottom:10px;}#content{ height:600px; background:#50b8fd;}#news,#report{ height:290px; background:#ccc; margin-bottom:10px;}CSS代码设置各个层（区块）的大小，在实际应用中，一般只设置宽度，高度根据内容自适应。设置各个层之间的间距设置层的样式。

感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》