通过html和css页面布局来做一个登陆页面，实例？

最新推荐文章于 2025-06-30 09:11:09 发布

原创最新推荐文章于 2025-06-30 09:11:09 发布 · 4.4k 阅读

19 ·

CC 4.0 BY-SA版权

本文详细介绍了一个简洁美观的用户登录界面的设计与实现过程，包括HTML、CSS布局及表单元素的样式设置，实现了响应式设计，确保了良好的用户体验。

效果如图：

代码如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>用户登录</title>
       <style type="text/css">
           *{margin: 0;
           padding: 0;
           }/*去掉页面样式，通用选择器*/
           body{color:white}/*标签选择器*/
           .context{background: #50A3A2;
           position: absolute;
           left: 0;
           top:50%;
           width: 100%;
           height: 400px;
           margin-top: -200px;
           overflow: hidden;/*隐藏滚动条*/
           }/*定位浏览器边距位置左上 */
           .container{/*类选择器*/
               max-width: 600px;
               height: 400px;/*左右*/
               padding: 80px 0;/*上下*/
               text-align: center;
               margin: 0 auto;/*居中显示*/
           }
           .container h1{/*派生*/
               font-size: 40px;
           font-weight: 300;}
           form{padding: 20px 0;}
           form input{border: 1px solid #FFF;
           width: 220px;
           padding: 10px 15px;
           display: block;
           margin: 0 auto 10px auto;
           border-radius: 30px;/*圆角*/
           font-size: 18px;
           font-weight: 300;
           text-align: center;
           }
           form button{
              background: white;
              border: 0;
              padding: 10px 15px;
              color: green;
              border-radius: 8px;
              width: 250px;
              font-size: 16px;
           }
           form button:hover{
              background:#CCC; /*鼠标移动上去按钮颜色变灰色*/
           }
       </style>
   </head>
   <body>
       <div class="context">
           <div class="container">
               <h1>Welcome</h1>
               <form action="" method="get">
                   <input type="text" name="userid" placeholder="请输入账号"/>
                   <input type="password" name="userpw" placeholder="请输入密码"/>
                   <button type="submit">登  陆</button>
               </form>
           </div>
       </div>
   </body>
</html>