Question

enter image description here

现在有一个问题：|

感谢您查看

Adam Ramadhan

Answer 1

以下是您的入门指南，http://www.w3schools.com/html/html_forms.asp 你可以访问http://articles.sitepoint.com/article/fancy-form-design-css

，让它变得更加漂亮

我希望有所帮助。

Answer 2

好吧，我用它来学习表单和CSS :) 感谢@corroded的评论（没有更多的DIV可以找到！）在FF 4b10上测试，它看起来非常接近。下面的代码是我在这里进行几次迭代后得到的代码。我确信它可以得到改进（即更好地重用css类）但是在远方的未来一段时间内回答3.0;）

原始代码在此处：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>

Answer 3

使用uls

<ul>
  <li>
    <label>Name</label>
    <input type="text">
  </li>
</ul>

然后在你的CSS中：

label {
  float: left; }

ul li {
  border-bottom: 1px solid #000;
}

input {  
  border: 0
}

粗略的草图，但你明白了

我们怎样才能用css和amp; HTML？

3 个答案: