《CSS设置表单样式.ppt》由会员分享，可在线阅读，更多相关《CSS设置表单样式.ppt（20页珍藏版）》请在三一文库上搜索。
1、CSS设置表单样式,主讲：毛丽娟,表单输入类型-文本输入框,语法： 姓名： 主要属性： name：名称，程序中常会用到。 size：设定此栏位显示的宽度。 value：预设内容。 align：对齐方式。 maxlength：设定可输入的最大长度。,表单输入类型-单选按钮,语法案例： 男 女 主要属性： checked name：需要将一组供选 择的单选框设置为相同的 名称，以保证这一组中只有 一个单选按钮被选中。,表单输入类型-复选按钮,语法： 兴趣： 文学 音乐 美术 主要属性： checked： name：,表单输入类型-密码输入框,语法： 密码： 主要属性： type：值为“passwo
2、rd”时， 输入框内显示为密码形式。,表单输入类型-按钮,语法： 主要属性： type：设置为“image”时， 成为图像按钮。 value：设置按钮上的文字。,表单输入类型-多行文本框,语法： 主要属性： cols：定义多行文本框的宽度（字符列数）。 rows：定义多行文本框的高度（行数）。 wrap：定义换行方式，有3种选择。 off：输入文字不换行。 virtual：输入文字在屏幕上会自动换行，但是如果访问者没有按回车键换行，则提交到服务器也视为没有换行。 physical：输入文字时会自动换行，提交到服务器时，会将屏幕上的自动换行视为换行效果提交。,表单输入类型-列表框1,语法1： F
3、lash Dreamweaver Fireworks Photoshop ,表单输入类型-列表框2,语法2：列表形式 Flash Dreamweaver Fireworks Photoshop ,案例-css设置表单样式,设计网页结构如右图所示,案例-HTML代码参考, 请输入您的姓名: 请选择你最喜欢的颜色: 红 绿 蓝 黄 青 紫 请问你的性别: 男 女 你喜欢做些什么: 看书 上网 睡觉 我要留言: ,案例-css设置表单样式,利用css样式实现右图风格。,案例-css代码参考,form border: 1px dotted #AAAAAA; padding: 3px 6px 3px 6
4、px; 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 #00
5、008B; ,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:
6、#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; ,案例-多彩的下拉菜单,c
7、ss不仅可以控制下拉菜单的整体字体和边框格式，还可以进一步的对下拉菜单的每一个选项设置各自的背景色和文字颜色。,案例-HTML结构代码, 请选择一种颜色 选择 蓝色 红色 绿色 黄色 青色 紫色 ,案例-”数独”游戏网页,“数独”是一种益智类的数字游戏，相传起源于拉丁方阵。 游戏规则是：在99的大九宫格中有9个33的小九宫格,根据格子里已有的数字,运用逻辑和推理的方法,在其他的空格上填入1到9的数字,要保证每个数字在每个小九宫格内不能重复,同时在每行每列中也不能重复。,案例-”数独”游戏网页,网页效果如图所示：,案例-”数独”游戏网页,步骤： 搭建基本表格； 设置表格样式； 加入文本输入框； 设置文本输入框的样式。,