CSS:不用表格制作表单

效果：

参考代码：

html:

View Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>不使用表格制作表单</title>
<link rel="stylesheet" type="text/css" href="不使用表格制作表单.css" />
</head>

<body>
    <h1>User Registration Form</h1>
    <form method="post" action="#">
        <p>
            <label for="fullname">Name:</label>
            <input type="text" name="fullname" class="text" />
        </p>
        <p>
            <label for="email">Email Address:</label>
            <input type="text" name="email" class="text" />
        </p>
        <p>
            <label for="password">Password:</label>
            <input type="password" name="password" class="text" />
        </p>
        <p>
            <label for="confirmpassword">Confirm Password:</label>
            <input type="password" name="confirmpassword" class="text" />
        </p>
        <p>
            <label for="level">Member Level:</label>
            <select name="lebvel">
                <option value="silver">silver</option>
                <option value="gold">gold</option>
            </select>
        </p>
        <p>
            <input type="submit" name="btnSubmit" id="btnSubmit" value="Sign Up" class="btn" />
        </p>
    </form>
</body>
</html>

css:

View Code 
@charset "utf-8";
/* CSS Document */
input.text
{
    color:#000099;
    border:1px inset #000000;
    width:200px;
}
form p
{
    clear:left;
    paddint-top:5px;
}
form p label
{
    /*关键：将label浮动起来，然后设置label宽度*/
    float:left;
    width:200px;
}

 

 

 

 

posted @ 2013-03-10 17:02  KeenLeung  阅读(400)  评论(0)  编辑  收藏  举报