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