第5章列表和表单的制作报告.pptVIP

网站综合开发解析 第 5 章 列表和表单的制作 float属性将其值设为left或right，被定义的元素向其父元素的左侧或右侧位置浮动。 CSS通过clear元素实现清除浮动。 CSS的字体属性可以对网页中的文字进行全方位设置。 使用span标签制作文本导航栏时，需要添加display属性将其转换为块级元素。 使用visibility:hidden属性可将二级下拉菜单隐藏。 列表的3种类型：有序列表、无序列表和定义列表。 一个完整的表单在结构上由表单标签、表单域以及表单按钮3个基本部分组成。 新闻列表的内容由列表栏标题、列表更多链接、新闻标题和新闻时间组成。 CSS中的overflow属性用来处理盒子模型中多余的内容。 制作用户注册表单 CSS部分的制作 对body以及整体样式进行定义 对标题栏h1以及列表进行定义 对列表内的各行进行细化 综合实例—网易邮箱注册页面的制作 效果图分析 综合实例—网易邮箱注册页面的制作 页面结构的制作 页面在布局上比较简单，从上到下分为4个div div class=header/div div class=tit/div div class=content/div div class=footer/div 综合实例—网易邮箱注册页面的制作 CSS部分的制作 对整体属性进行样式控制 对.header和.tit的内容进行定义 对.content内的列表内容进行定义 对footer内的超链接样式进行定义 本章总结 上章回顾 本章进阶 掌握列表在网页布局和排版中的应用 掌握表单在网页设计中的应用 列表和表单的介绍 列表的类型 在HTML语言中已经提供了列表的基本功能，但纯碎的HTML语言写出的列表样式不符合页面美观要求。CSS的列表属性被引入后，列表的样式被赋予了很多新的属性，甚至超过了其本身的功能限制，但列表基本的使用还是制作文章标题。 列表和表单的介绍 有序列表 有序列表是指使用编号进行列表项目排列，例如a、b、c或1、2、3等。有序列表的标记用ol表示，每个列表项用li表示。 ol li第一个有序列表项/li li第二个有序列表项/li li第三个有序列表项/li li第四个有序列表项/li li第五个有序列表项/li /ol 列表和表单的介绍 无序列表 在列表项前不添加列表序号的一种列表。无序列表的标记用ul表示，每个列表项用li表示。 ul li第一个无序列表项/li … li第二个无序列表项/li /ul 列表和表单的介绍 定义列表 定义列表也称字典列表，主要用于名词定义。包含两个层次的列表，名词是第一层次，解释或定义是第二层次。这种列表不包括项目符号，每个列表带有一段缩进的定义文字。定义列表的标记用dl表示，定义文字用dt表示，每个列表项用dd表示。 dl dt第一个名词/dt dd第一个名词的定义内容/dd …… /dl 列表和表单的介绍 表单的介绍 一个完整的表单在结构上由表单标签、表单域以及表单按钮3个部分组成，其作用分别如下： 表单标签：包括处理表单数据所用CGI程序和URL以及数据提交到服务器的方法。 表单域：包括文本框、密码框、隐藏域、多行文本框、复选框、单选按钮、下拉选择框和文件域等。 表单按钮：包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其它定义了脚本的处理工作。 form action= 表单域 input name=表单按钮 type=button / /form 对于表单的按钮，还可以使用“button表单按钮/button”的形式表示，作用与“input name=表单按钮 type=button id=表单按钮”一致，其中的“表单按钮”可以自定义为你所需要的文字。 列表和表单的介绍 表单标签：form/form，用于声明表单，定义采集数据的范围，把数据提交到服务器或者电子邮件中。 文本框：input type=text，通常用来填写单个字或者简短的回答，如姓名、地址等。 密码框：input type=password，密码框是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替。 隐藏域：input type=hidden，隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用已设置时定义的名称和值