当前位置:主页 > 教程 > 网页设计 > div/css >

CSS实现form表单居中显示

作者:秋军 发布时间:2017-04-02 阅读:

我们在做网页的时候有很多时候会遇到输入框。那么如何让输入框有限制的显示在网页中呢。比如输入框居中,或者靠左,边框颜色等等。下面小编做了一个简单的CSS样式让form这个元素居中显示,想要其他显示根据修改CSS既可以实现。

<!DOCTYPE html>
<html mip>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>易采站长站</title>
<meta name="description" content="易采站长站" />
<meta name="keywords" content="易采站长站" />
<STYLE type="text/css">  
        #login{  
            width:400px;  
            height:280px;  
            position:absolute;  
            left: 50%;  
            top: 50%;  
            margin-left:-200px;  
            margin-top:-140px;  
            border:1px;  
            background-color:red;     
            align:center;  
        }     
        #form{  
            width:300px;  
            height:160px;  
            position:relative;  
             left:50%;  
              top:50%;  
              margin-left:-150px;  
              margin-top:-80px;  
          
        }  
</STYLE>  
</head>  
<body>   
    <div id="login">   
        <div id="form">  
                <s:form action="" >  
                    <s:textfield name="username" label="用户名" ></s:textfield>   
                    <s:password name="password" label="密码" ></s:password>  
                    <s:select list="{}" listKey="1" listValue="1" label="用户类型"></s:select>  
                    <tr align="center">  
                        <td colspan="2" align="center" valign="middle">  
                            <s:submit value="登录" theme="simple"></s:submit>     
                            <s:reset value="重置" theme="simple"></s:reset> 
</td>  
                    </tr>  
                </s:form>  
        </div>  
    </div>  
  </body>  
</html>


关键词: