学习下网页结构中表单罕见成绩及办理举措
最近在做一个魔术网的div+css切割，昨晚发现了长期以来一直无记录下来的问题！关于兼容IE跟FF的float属性。[*]
[*]
开始草拟本文时，命的名字叫：“谈谈网页结构中表单位素的几宗罪”接上去的内容以下：
当您看到这个题目时，大概会以为有点言过其实了吧！表单为我们和服务器交互供应了很好的接口，怎样说是有罪呢？
固然，表单的壮大功效我们不成否定，但它在结构上的辣手成绩也是让很多人头疼的，特别是老手。看看论坛上的发问，与表单相干的不胜枚举。厥后以为这个名字不太太了然，以是就改成“网页结构中表单罕见成绩及办理举措”。上面我就网页结构中经常使用表单及罕见成绩总结一下：
1、form 假如您必要提交数据，谁人form标签是必不成少的。它标志了数据提交的体例及处置页面。但form默许外补钉的成绩也使很多人找不着北了。以下图，在IE6和IE7下，默许form是有高低外补钉的。如许就形成了原本想和高低内容切近显现的，了局却离的很远，有大概形成页面庞杂。而在火狐下却没有外补钉的。办理的举措是在款式表中到场form{margin:0px;}，如许在IE和火狐下显现都分歧了。
<!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"/><title>IE下form默许有外补钉的成绩及办理举措</title><style>form{background:#f90;margin:0px;}div{background:#ccc;border:1pxsolid#999;}</style></head><body><div>此处显现新Div标签的内容</div><formid="form1"name="form1"method="post"action="">这里是form标签</form><div>此处显现新Div标签的内容</div><div>尺度之路是进修网页尺度幻想的中央</div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
2、宽度 当用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"/><title>表单宽度不相称的成绩及办理举措</title></head><body><p><inputstyle="width:150px;"type="text"name="textfield"id="textfield"/></p><p><selectstyle="width:150px;"name="select"id="select"><option>请选择</option></select></p></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
今朝，自己的办理举措是把select的宽度界说年夜一样，一点一点调剂至一样为止。假如您另有甚么更好的举措，接待贴出来。
别的一个成绩就是按钮的宽度在IE和火狐下显现一样，办理这个举措就是用css界说按钮的宽度。
3、丑化和层级 这个次要针对经常使用的select。当用css对表单举行丑化时，select对边框和高度设置不起感化，这也是select让人头疼的一个中央。要想丑化select，只能用别的举措，高度能够接纳把字体变年夜变小的办法来完成。不外能够参考本站的divcss摹拟丑化的Select款式,超典范这篇文章，能够把select丑化成任何你想要的款式。
层级成绩是select是让人更次疼的一个中央。指的是当有div设置居于其上时，在IE6下不克不及将其遮挡，select还显现在最下层，这个成绩的办理举措其一就是接纳此例divcss摹拟丑化的Select款式,超典范丑化后便可（它接纳埋没实在select，用div摹拟成的）。另有就是接纳iframe办法。在IE6看来，假如只要div和select，不管你的z-index怎样设置,div的层永久被会被select标签踩在脚底，而iframe则能够爬到select头上，以是，上面的办法之以是能办理成绩，是由于iframe在select上方，而div搭着iframe的顺风车也爬到了select的头上。这个成绩能够具体参考怎样让层挡住下拉列表框？成绩办理计划
4、表单和笔墨间的换行 此成绩呈现在源代码方面，当表单厥后跟的笔墨和表单的源代码不在一行时，预览时表单和笔墨两头会有个空格，不换行时没有空格。但用dreamweaver默许的代码格局是分行显现的，这也是呈现表单和笔墨挨不着的缘故原由。
<!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"/><title>表单后内容在源代码中换行与不换行的差别</title></head><body><p><inputstyle="width:150px;"type="text"name="textfield"id="textfield"/>input后换行</p><p><inputstyle="width:150px;"type="text"name="textfield"id="textfield"/>input后不换行</p></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
5、文件域按钮没法丑化 文件域在前台制造时对照罕用，在背景制造时较长用。它的丑化也是难点，由于它是一个文本框和按钮的组合。在设置背景时能同时使用到文本框和按钮上，边框也是同时使用。别的的倒没法设置，自己临时没有别的设置的举措，等候高人办理供应办法。
本站更多和表单相干的文章
DIV层被Flash或表单粉饰的办理办法
divcss表单结构的五个小技能
JS表单提交考证类
有图片预览功效的上传表单
怎样把表单内输出的中文逗号主动转换为英文逗号？
超壮大的JS表单考证及利用办法教程(我是佛隐士)
让文本框textarea主动顺应内容的高度
文本框提醒款式，鼠标点击取得核心时提醒内容消散
只要下边框的文本输出框款式
怎样垂直居中对齐文本与文本输出框
绿色下载站用div摹拟select下拉菜单丑化效果实例
一个不错的带下拉菜单的DIV搜刮条
自己用css制造的一组平面感很强的按钮款式
按钮onClick事务新窗口翻开和在本窗口翻开的办法
表格复选和复选变色效果
首先你要知道，当你开始学习DIV+CSS的时候，你要把以前所有用DW画布局表格的思维方法忘的一干二净(如果你以前是用TABLE布局的话)，然而这项技术更适合刚接触网页制作的人。 每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。 还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。 还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。 您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。 在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅. 由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。
页:
[1]