|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
说实话，我并不是反对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;}
.area{border:1pxsolid#F90;overflow:auto;background:#fffurl(bg_9_1.gif)rightbottomno-repeat;width:99%;height:100px;}
<!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提醒：能够先修正部分代码后再运转
大大增加了开发时间，同时也增加了开发成本。当然如果你是一个熟手，或者可以白天黑夜都加班而不用担心没有加班费，那可能不会。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-16 10:31:20
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
楼主