CSS设置表单样式.ppt

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