登录界面的美化

最新推荐文章于 2024-05-14 23:39:54 发布

醉酒七兮.

最新推荐文章于 2024-05-14 23:39:54 发布

阅读量57

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_57324252/article/details/131813780

版权

<html>

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

      <title>实验</title>

      <style type="text/css">

         *{margin:0;padding:0;}/*去掉页面样式*/

         body{color:white;}

        .content{

             background-color:pink;

             position:absolute;/*绝对定位*/

             top:50%;

             left:0;

            width:100%;

            height:400px;

            margin-top:-200px;

             overflow:hidden;/*隐藏滚动条*/

         }

        .main{

            text-align:center;/*文本居中*/

             max-width:600px;

             height:400px;

             padding:100px 0px;/*上下80px,左右为0*/

             /*background:yellow;*//*验证div的位置*/

             margin:0 auto;/*设置上右下左,居中显示*/

         }

         .main h1{

             font-family:"楷体";/*设置字体*/

             font-size:70px;/*设置字体大小*/

             font-weight:2px;/*调整字体粗细*/

         }

         form{

             padding:20px 0;

         }

         form input{

             border:1px solid white;

             display:block;

             margin:0px auto 10px auto;/*上 右  下 左*/

             padding:10px;

             width:220px;

             border-radius:30px;/*H5设置圆角边框*/

             font-size:18px;

             font-weight:300;

             text-align:center;

         }

        form input:hover{

             background-color:pink;

         }

         form button{

             background-color:yellow;

            border-radius:10px;

             border:0;

             height:30px;

             width:50px;

            padding:5px 10px;

         }

        form button:hover{

             background-color:red;

       }

    </style>

 </head>

 <body>

 <div class="content">    

     <div class="main">

        <h1>Welcome</h1>

         <form>

            <input type="text" name="useid" placeholder="请输入账号"/>

            <input type="password" name="pw" placeholder="请输入密码">

             <button type="submit">登  录</button>

         </form>

     </div>

 </div>    

     

 </body>

 </html>