我们如何使用css& amp;创建这样的表单?HTML? [英] how can we make forms like this with css & html?
本文介绍了我们如何使用css& amp;创建这样的表单?HTML?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
现在这是一个问题:|
now thats a problem :|
感谢您的关注
亚当·拉马丹
推荐答案
好吧，我用它来学习表单和CSS :)感谢@corroded您的评论(没有其他DIV了！)经过FF 4b10测试，看上去非常漂亮.下面的代码是经过几次迭代后得到的.我确信它可以改进(即更好地重用css类)，但是在不远的将来会有3.0的答案；)
Well, I used it to learn about forms and CSS :) Thanks @corroded for your comment (there are no more DIVs to be found!) Tested on FF 4b10, it looks pretty darn close. The code below is what I got after several iterations here. I'm sure it can be improved (i.e., better reuse of the css classes) but tht's for the answer 3.0 some time in the far away future ;)
原始代码在这里: http://jsfiddle.net/vSqR3/19/
并测试新版本: http://jsfiddle.net/vSqR3/62/
<html>
<head>
<style type="text/css">
.noBullets {
list-style-type: none;
}
.containerDiv {
margin-left:0px;
border-width:1px;
border-color:#333;
border-top-style:none;
border-right-style:none;
border-left-style:none;
border-bottom-style:solid;
width: 284px;
height:20px;
}
.containerDivNoBorder {
margin-left:0px;
border-top-style:none;
border-right-style:none;
border-left-style:none;
border-bottom-style:none;
width: 284px;
height:20px;
}
.floatingLabel {
width: 160px;
height:20px;
float:left;
border-style:none;
}
.floatingShort {
border-width:1px;
border-color:#333;
border-top-style:none;
border-right-style:none;
border-left-style:solid;
border-bottom-style:none;
width: 39px;
height:20px;
float:left;
}
.floatingMedium {
border-top-style:none;
border-width:1px;
border-color:#333;
border-right-style:none;
border-left-style:solid;
border-bottom-style:none;
width: 80px;
height:20px;
float:left;
}
.floatingLong {
border-top-style:none;
border-width:1px;
border-color:#333;
border-right-style:none;
border-left-style:solid;
border-bottom-style:none;
width: 120px;
height:20px;
float:left;
}
.floatingLongBorder {
border-top-style:none;
border-right-style:none;
border-left-style:solid;
border-width:1px;
border-color:#333;
border-bottom-style:solid;
width: 120px;
height:20px;
float:left;
}
</style>
</head>
<body>
<form id="form" name="form" method="post" action="send.html">
<ul class="noBullets">
<h3>USER ACCOUNT</h3>
<li class="containerDiv">
<label class="floatingLabel">NAME</label>
<input class="floatingLong" type="text" name='name'/>
</li>
<li class="containerDiv">
<label class=floatingLabel>SURNAME</label>
<input class=floatingLong type="text" name='surname'/>
</li>
<li class="containerDiv">
<label class="floatingLabel">BIRTHDAY</label>
<input class="floatingShort" type="text" name='bd_d'/>
<input class="floatingShort" type="text" name='bd_m'/>
<input class="floatingShort" type="text" name='bd_y'/>
</li>
<li class="containerDiv">
<label class="floatingLabel">GENDER</label>
<input class="floatingShort" type="text" name='gender1'/>
<input class="floatingMedium" type="text" name='gender2'/>
</li>
<li class="containerDiv">
<label class="floatingLabel">USERNAME</label>
<input class="floatingLong" type="text" name='username'/>
</li>
<li class="containerDivNoBorder">
<label class="floatingLabel">E-MAIL</label>
<input class="floatingLongBorder" type="text" name='email1'/>
</li>
<li class="containerDiv">
<label class="floatingLabel">RE-TYPE E-MAIL</label>
<input class="floatingLong" type="text" name='email2'/>
</li>
<li class="containerDivNoBorder">
<label class="floatingLabel">PASSWORD</label>
<input class="floatingLongBorder" type="password" name='password1'/>
</li>
<li class="containerDiv">
<label class="floatingLabel">RE-TYPE PASSWORD</label>
<input class="floatingLong" type="password" name='password2'/>
</li>
<input type="submit" value="Submit" />
</ul>
</form>
</body>
</html>
这篇关于我们如何使用css& amp;创建这样的表单?HTML?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
