HTML5+CSS3网页设计与制作课件：添加菜单栏列表_第1页
HTML5+CSS3网页设计与制作课件：添加菜单栏列表_第2页
HTML5+CSS3网页设计与制作课件：添加菜单栏列表_第3页
HTML5+CSS3网页设计与制作课件：添加菜单栏列表_第4页
HTML5+CSS3网页设计与制作课件：添加菜单栏列表_第5页
已阅读5页，还剩19页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML5+CSS3网页设计与制作添加菜单栏列表项目将通过“制作一个D清单网页广告单页”项目，即通过制作一个HTML页面来承载网页制作知识，完成网页开发环境搭建、HTML5标签、CSS3叠层样式和响应式布局等的学习。项目目标D清单是某公司推出的一款跨平台同步的待办事项和任务提醒软件,旨在协助您完成待办事务比如生日提醒,旅行安排,会议准备等以便更好的进行时间和事项管理。为了方便D清单应用的推广，其公司需要制作一个该应用产品的介绍网页。该页面主要用于手机端进行分享推广，同时也要求能够在电脑端进行访问。前端工程师小王所在的科技公司已经拿到了设计稿，如图1所示。主管希望他担任本次项目的前端工作，开发完成后将成果交付给程序员完成逻辑制作、测试和发布。项目情境图1-1-1项目移动端和电脑端页面截图网页制作的一般流程如下：项目分析项目发布需求分析规划设计实施测试交付根据“移动优先”原则，我们需要制定项目完成的计划：项目分析时间段1时间段2时间段3时间段4时间段5分析规划实施阶段1移动端内容制作阶段2移动端格式制作阶段3响应式制作测试与交付D清单前端开发甘特图时间进度任务制作网页内容本次任务要求根据D清单网页效果图的菜单栏内容，本任务需在的基础上使用HTML列表添加菜单栏的内容（不考虑格式）。完成后的网页菜单栏效果图如图1-4所示。任务描述

添加菜单栏列表图1-4添加网页菜单栏列表内容后的菜单栏效果图要完成D清单网页菜单栏列表内容的制作，需要：学习HTML列表的结构组成、无序列表及有序列表的语法；分析D清单页面中的列表内容，正确选择及使用列表标签完成D清单网页中的列表制作。任务分析图1-4-1D清单菜单栏展开后的网页效果图

添加菜单栏列表知识与技能准备HTML的列表元素是一个由列表标签封闭的结构，包含的列表项由<li></li>组成。1、列表的结构组成列表在网页中占有比较大的比重，如信息分类、新闻列表、菜单、排行榜等，列表形式显示信息非常整齐直观，便于用户理解，列表项内部可以使用段落、换行符、图片、链接以及其他列表等。HTML支持有序、无序和定义列表，常用列表结构有无序列表和有序列表。知识与技能准备无序列表就是列表结构中的列表项没有先后顺序的列表形式。无序列表适合列表项之间无级别顺序关系的情况，大部分网页应用中的列表均采用无序列表，其列表标签采用<ul></ul>，其语法形式如下：1.1无序列表<ul><ul><li>列表项一</li><li>列表项二</li><li>列表项三</li></ul>打开VisualStudioCode软件，在<body>标签中输入如下代码：课堂练习1-4-1无序列表的简单应用12345<ul><li>HTML</li><li>CSS</li><li>JS</li></ul>显示效果如下：课堂练习1-4-1无序列表的简单应用图1-4-2无序列表的简单应用知识与技能准备有序列表就是列表结构中的列表项有先后顺序的列表形式，有序列表适合各项目之间存在顺序关系的情况。其列表标签采用<ol></ol>，其语法形式如下：1.2有序列表<ol><ol><li>列表项一</li><li>列表项二</li><li>列表项三</li></ol>打开VisualStudioCode软件，在<body>标签中输入如下代码：课堂练习1-4-2有序列表的简单应用12345<ol><li>HTML</li><li>CSS</li><li>JS</li></ol>显示效果如下：课堂练习1-4-1无序列表的简单应用图1-4-3有序列表的简单应用知识与技能准备当一个列表内容里还有细分的列表，就需要我们嵌套一个列表进去。语法结构与数学中的括号嵌套类似。2、嵌套列表打开VisualStudioCode软件，在<body>标签中输入如下代码：课堂练习1-4-3列表的嵌套使用1234567891011121314<ol> <li>牛奶

<ol> <li>纯牛奶</li> <li>高钙奶</li> </ol> </li> <li>茶

<ol> <li>红茶</li> <li>绿茶</li> </ol> </li></ol>显示效果如下：课堂练习1-4-3列表的嵌套使用图1-4-4列表的嵌套使用打开VisualStudioCode软件，在<body>标签中输入如下代码：课堂练习1-4-4有序列表和无序列表的嵌套使用12345678910111213141516<ol> <li>网页前端技术

<ol> <li>HTML</li> <li>CSS</li> <li>JS</li> </ol> </li> <li>网页后台的学习

<ol> <li>ASP</li> <li>PHP</li> <li>CGI</li> </ol> </li></ol>显示效果如下：课堂练习1-4-4有序列表和无序列表的嵌套使用图1-4-4有序列表和无序列表的嵌套使用任务实施1、打开中的index.html文件2、分析后采用HTML无序列表完成网页菜单栏内容的制作，在之前的<header>网页结构标签中添加列表代码。参考代码如下：123456789101112<header><nav><ul><li>首页</li><li>功能介绍</li><li>下载应用</li><li>高级会员</li>

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论