仓酷云

标题: 今天来学习第九天　CSS表单计划 [打印本页]

作者: 简单生活 时间: 2015-1-16 10:31
标题: 今天来学习第九天　CSS表单计划
说实话，我并不是反对div+css，但物生一利，必生一弊，div+css的利处大家说了很多，我就说说狂热的追求div+css的几个弊端：

明天我们入手下手进修《十天学会web尺度(div+css)》的css表单计划，包括以下内容和常识点：

改动文本框和文本域款式
用图片丑化按钮
改动下拉列表款式
用label标签提拔用户体验

1、改动文本框和文本域款式

假如前边几章进修的对照踏实的话，本节教程就相称简单了。下边先说一下文本框，文本框和文本域都是能够用css举行丑化的。好比改动边框精密，色彩，增加背景致、背景图象等。请看下边的实例：

.text1{border:1pxsolid#f60;color:#03C;}
.text2{border:2pxsolid#390;width:200px;height:24px;font-size:16px;font-weight:bold;line-height:1.6;}
.text3{border:2pxsolid#C3C;height:20px;background:url(icon9.gif)right3pxno-repeat;}
.text4{border:2pxsolid#F60;width:150px;height:29px;font-size:16px;line-height:1.6;background:url(bg_9.gif)00no-repeat;}

这四个款式表分离对应第2、3、4、5行表单，第一行是文本框的默许款式；第二举动设置边框和字体色彩的款式；第三举动设置边框、宽度、高度、字体巨细、行高的款式；第四行设置边框和增添背景致和背景图片；第五举动增添一个gif动画的背景图片，看起来是否是活泼很多，详细步骤不再赘述。上面我们看一下文本域的款式设置：

.area{border:1pxsolid#F90;overflow:auto;background:#fffurl(bg_9_1.gif)rightbottomno-repeat;width:99%;height:100px;}

上图中第一个为默许的文本域款式，第二个为设置边框、宽度为百分比、高度和景图片。overflow:auto界说当内容不凌驾如今文本域高度时不呈现转动条。好了，上面运转一下代码看看二者的效果吧
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><styletype="text/css">.text1{border:1pxsolid#f60;color:#03C;}.text2{border:2pxsolid#390;width:200px;height:24px;font-size:16px;font-weight:bold;line-height:1.6;}.text3{border:2pxsolid#C3C;height:20px;background:#ffeeffurl(/upload/2010-08/28/icon9.gif)right3pxno-repeat;}.text4{border:2pxsolid#F60;width:150px;height:29px;font-size:16px;line-height:1.6;background:url(/upload/2010-08/28/bg_9.gif)00no-repeat;}.area{border:1pxsolid#F90;overflow:auto;background:#fffurl(/upload/2010-08/28/bg_9_1.gif)rightbottomno-repeat;width:99%;height:100px;}</style></head><body><p><inputtype="text"name="textfield"id="textfield"/>这是默许款式</p><p><inputname="textfield2"type="text"class="text1"id="textfield2"value="我是蓝色的"/>这是改动边框的款式和笔墨色彩</p><p><inputname="textfield3"type="text"class="text2"id="textfield3"value="看我年夜吧"/>这是改动边框并设置高宽和字体巨细的款式</p><p><inputclass="text3"type="text"name="textfield4"id="textfield4"/>这是增添背景图片实例，也可放左边</p><p><inputclass="text4"type="text"name="textfield5"id="textfield5"/>这是增添了一个背景图片为gif动画</p><p><textareaname="textarea"id="textarea"cols="45"rows="5"></textarea></p><p><textareaclass="area"name="textarea2"id="textarea2"cols="45"rows="5"></textarea></p></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
2、用图片丑化按钮

按钮也是网页中常常见的元素，但默许的款式偶然候和页面全体效果不和谐，必要把它丑化一下，它的款式设置和文本框一模一样，没有甚么出格的地方。上面以三个实例来讲明一下：

.btn02{background:#fffurl(btn_bg2.gif)00;height:22px;width:55px;color:#297405;border:1pxsolid#90be4a;font-size:12px;font-weight:bold;line-height:180%;cursor:pointer;}
.btn04{background:url(btn_bg2.gif)0-24px;width:70px;height:22px;color:#9a4501;border:1pxsolid#dbb119;font-size:12px;line-height:160%;cursor:pointer;}
.btn07{background:url(submit_bg.gif)0px-8px;border:1pxsolid#cfab25;height:32px;font-weight:bold;padding-top:2px;cursor:pointer;font-size:14px;color:#660000;}
.btn08{background:url(submit_bg.gif)0px-64px;border:1pxsolid#8b9c56;height:32px;font-weight:bold;padding-top:2px;cursor:pointer;font-size:14px;color:#360;}
.btn09{background:url(http://www.ckuyun.com/upload/2010-08/14/014304_btn_bg.gif)00no-repeat;width:107px;height:37px;border:none;font-size:14px;font-weight:bold;color:#d84700;cursor:pointer;}

图中的按钮，前两个为流动宽度，但宽度能够依据必要随便调剂；两头两个为自顺应宽度，依据字数几往顺应；这四个款式都是接纳一个背景图片横向轮回完成，以是宽度不受限定，最初一个完整接纳背景图片，如许宽度就得流动逝世了，要不会影响美妙。必要注重的是这类体例必要往失落按钮边框。
接纳以上的按钮有一个优点是当css款式表没有加载上时，将会显现为默许按钮款式，如许用户能够分明地晓得这是个按钮，一般加载后，会使按钮加倍美妙。它和我们第五天讲的css按钮有所分歧，那边的按钮实践仍是个链接，而这里的是按钮元素。注：分歧扫瞄器下显现效果略有分歧。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><styletype="text/css">.btn02{background:#fffurl(/upload/2010-08/28/btn_bg2.gif)00;height:22px;width:55px;color:#297405;border:1pxsolid#90be4a;font-size:12px;font-weight:bold;line-height:180%;cursor:pointer;}.btn04{background:url(/upload/2010-08/28/btn_bg2.gif)0-24px;width:70px;height:22px;color:#9a4501;border:1pxsolid#dbb119;font-size:12px;line-height:160%;cursor:pointer;}.btn07{background:url(/upload/2010-08/28/submit_bg.gif)0px-8px;border:1pxsolid#cfab25;height:32px;font-weight:bold;padding-top:2px;cursor:pointer;font-size:14px;color:#660000;}.btn08{background:url(/upload/2010-08/28/submit_bg.gif)0px-64px;border:1pxsolid#8b9c56;height:32px;font-weight:bold;padding-top:2px;cursor:pointer;font-size:14px;color:#360;}.btn09{background:url(http://www.ckuyun.com/upload/2010-08/14/014304_btn_bg.gif)00no-repeat;width:107px;height:37px;border:none;font-size:14px;font-weight:bold;color:#d84700;cursor:pointer;}</style></head><body><p><inputname="button"type="submit"class="btn02"id="button"value="提交"/></p><p><inputname="button2"type="submit"class="btn04"id="button2"value="提交"/></p><p><inputname="button"type="submit"class="btn07"id="button"value="提交"/></p><p><inputname="button2"type="submit"class="btn08"id="button2"value="看看我的宽度有多宽"/></p><p><inputname="button"type="submit"class="btn09"id="button"value="收费注册"/></p></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
3、改动下拉列表款式

下拉列表（菜单）是人人最头疼的一个元素，因其对很多款式不失效，故而在页面中显现很丑恶，并且在IE6下总在最下层，形成很多弹出层不克不及把其遮挡（可爱的IE6呀），使页面的用户查验年夜打扣头，以是一些计划师想出了很多举措来改动这类情形。
IE6下对下拉列表的背景和宽度款式失效，别的尽年夜部分不失效，IE8下增添了对边框和高度的撑持。但如许仿佛离我们请求还很远，以是不能不追求别的的举措了。先看上面三个图，统一代码分离在IE6、FF、IE8下显现的差别吧。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><styletype="text/css">.select{border:1pxsolid#f60;background:#FF9;height:30px;}.tip{width:50px;border:1pxsolid#ccc;background:#fff;position:absolute;top:5px;left:70px;font-size:12px;height:100px;padding:5px;}</style></head><body><p>请选择项目：</p><p><selectname="select"id="select"class="select"><option>请选择----------------</option><option>尺度之路</option></select></p><divclass="tip">看看谁能把我挡着</div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
在三个扫瞄器下显现都不尽不异，以是最好是追求别的的举措大概利用默许款式了。基中IE6下被遮挡能够把浮动层用iframe，因下拉列表不会跑到iframe上边。有更高丑化需求的能够用div摹拟来取代下拉列表，但这类办法完成起来贫苦，因为工夫干系，本节不外多的先容这类办法，感乐趣的伴侣能够参考http://www.ckuyun.com/css_example/541.shtml，进一步的进修。
4、用label标签提拔用户体验

label标签经常被人人疏忽了，公道使用会使页面的用户体验失掉提拔，我们能够对表单的申明笔墨利用label标签，如许当用户点击笔墨时，光标就定位到表单上了

如上图，当鼠标点击姓名笔墨时，光标就会定位到后边的文本框上了；点击男女笔墨也会选中响应的选项；同理，复选框和文本域也是一样的。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><styletype="text/css"></style></head><body><p><labelfor="name">姓名：</label><inputtype="text"name="name"id="name"/></p><p>性别：<inputtype="radio"name="sex"id="male"value="radio"/><labelfor="male">男</label><inputtype="radio"name="sex"id="female"value="radio2"/><labelfor="female">女</label></p><p>喜好：<inputtype="checkbox"name="music"id="music"/><labelfor="music">听音乐</label><inputtype="checkbox"name="web"id="web"/><labelfor="web">上彀</label><inputtype="checkbox"name="book"id="book"/><labelfor="book">看书</label></p><p><labelfor="content">简历：</label><textareaname="content"id="content"cols="45"rows="5"></textarea></p><p></p><p></p></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
大大增加了开发时间，同时也增加了开发成本。当然如果你是一个熟手，或者可以白天黑夜都加班而不用担心没有加班费，那可能不会。

作者: 只想知道 时间: 2015-1-18 06:47
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: 谁可相欹 时间: 2015-1-23 09:34
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

作者: 兰色精灵 时间: 2015-1-31 15:52
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

作者: 分手快乐 时间: 2015-2-6 21:37
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

作者: 莫相离 时间: 2015-2-18 22:40
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 小妖女 时间: 2015-3-6 11:26
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

作者: 简单生活 时间: 2015-3-13 01:08
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 因胸联盟 时间: 2015-3-20 09:02
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

欢迎光临仓酷云 (http://ckuyun.com/)