Web前端开发技术项目教程（HTML5 CSS3 JavaScript）（微课版） 课件 8.2任务引入.pptx

项目八非遗首页的制作信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》JavaScript基础

任务8.2制作非遗首页前端技术开发

任务引入一页眉导航轮播图主要内容页脚非遗首页的原型图将首页内容划分为不同的区域，分步实现

任务描述1.按照线框图实现非遗网站首页的布局2.准备素材丰富页面的内容3.将轮播图按照要求嵌入首页

任务实施二3124创建导航栏区域，使用CSS设置样式使用HTML、CSS创建主要内容使用HTML创建页眉页脚区域，并设置CSS样式创建轮播图并设置样式，使用JavaScript实现创建导航栏创建主要内容创建页眉页脚区域创建轮播图

任务实施二要点：1.横向布局2.垂直对齐3.背景样式设置4.溢出设置1.创建页眉区域 divclass=header divclass=container imgid=logosrc=res/logo.png h1中国非物质文化遗产/h1 inputtype=textid=txtSearchplaceholder=站内搜索 /div /div

任务实施二要点：1.无序列表样式2.列表项浮动设置3.超链接样式2.创建导航栏区域 divclass=nav divclass=container ulclass=navbar liclass=activeahref=#首页/a/li liahref=#机构/a/li liahref=#资讯/a/li liahref=#调研/a/li liahref=#指南/a/li /ul /div /div

任务实施二要点：1.CSS设置元素样式2.JavaScript实现图片轮播效果3.创建轮播图区域 divclass=carousel divclass=arrow-leftlt;/div imgid=img-carousel divclass=arrow-rightgt;/div /div

任务实施二要点：1.层布局4.创建主要内容区域divclass=containermain !--图片新闻-- divh2class=title图片新闻/h2/div !--热点关注-- divh2class=title热点关注/h2/div !--公示公告-- divh2class=title公示公告/h2/div/div

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