CSS设置表单样式.ppt

CSS设置表单样式 主讲：毛丽娟 表单输入类型-文本输入框 语法： 姓名： 主要属性： name：名称，程序中常会用到。 size：设定此栏位显示的宽度。 value：预设内容。 align：对齐方式。 maxlength：设定可输入的最大长度。 表单输入类型-单选按钮 语法案例： 男 女 主要属性： checked name：需要将一组供选 择的单选框设置为相同的 名称，以保证这一组中只有 一个单选按钮被选中。 表单输入类型-复选按钮 语法： 兴趣： 文学 音乐 美术 主要属性： checked： name： 表单输入类型-密码输入框 语法： 密码： 主要属性： type：值为“password”时， 输入框内显示为密码形式。 表单输入类型-按钮 语法： 主要属性： type：设置为“image”时， 成为图像按钮。 value：设置按钮上的文字。 表单输入类型-多行文本框 语法： 主要属性： cols：定义多行文本框的宽度（字符列数）。 rows：定义多行文本框的高度（行数）。 wrap：定义换行方式，有3种选择。 off：输入文字不换行。 virtual：输入文字在屏幕上会自动换行，但是如果访问者没有 按回车键换行，则提交到服务器也视为没有换行。 physical：输入文字时会自动换行，提交到服务器时，会将屏 幕上的自动换行视为换行效果提交。 表单输入类型-列表框1 语法1： Flash Dreamweaver Fireworks Photoshop 表单输入类型-列表框2 语法2：列表形式 Flash Dreamweaver Fireworks Photoshop 案例-css设置表单样式 设计网页结构如右图所示 案例-HTML代码参考 请输入您的姓名: 请选择你最喜欢的颜色: 红 绿 蓝 黄 青 紫 请问你的性别: 男 女 你喜欢做些什么: 看书 上网 睡觉 我要留言: 案例-css设置表单样式 利用css样式实现右图 风格。 案例-css代码参考 form border: 1px dotted #AAAAAA; padding: 3px 6px 3px 6px; margin:0px; font:14px Arial; input color: #00008B; background-color: #ADD8E6; border: 1px solid #00008B; select width: 80px; color: #00008B; background-color: #ADD8E6; border: 1px solid #00008B; textarea width: 200px; height: 40px; color: #00008B; background-color: #ADD8E6; border: 1px solid #00008B; ps：此样式代码在IE和FF中浏览有较大的 效果差异。 案例-修改浏览器差异的css form border: 1px dotted #AAAAAA; padding: 1px 6px 1px 6px; margin:0px; font:14px Arial; input/* 所有input标记 */ color: #00008B; input.txt/* 文本框单独设置 */ border: 1px inset #00008B; background-color: #ADD8E6; 案例-修改浏览器差异的css input.btn/* 按钮单独设置 */ color: #00008B; background-color: #ADD8E6; border: 1px outset #00008B; padding: 1px 2px 1px 2px; select width: 80px; color: #00008B; background-color: #ADD8E6; border: 1px solid #00008B; textarea width: 200px; height: 40px; color: #00008B; background-color: #ADD8E6; border: 1px inset #00008B; 案例-多彩的下拉菜单 css不仅可以控制下拉菜单的整体字体和边 框格式，还可以进一步的对下拉菜单的每 一个选项设置各自的背景色和文字颜色。 案例-HTML结构代码 请选择一种颜色 选择 蓝色 红色 绿色 黄色 青色 紫色 案例-”数独”游戏网页 “数独”是一种益智类的数字游戏，相传起源 于拉丁方阵。 游戏规则是：在99的大九宫格中有9个 33的小九宫格,根据格子里已有的数字,运 用逻辑和推理的方法,在其他的空格上填入 1到9的数字,要保证每个数