ホームページ > 記事 > ウェブフロントエンド > CSSログインインターフェースの美化

CSSログインインターフェースの美化

墨辰丷オリジナル: 2018-05-11 16:08:4711155ブラウズ

この記事では、CSSを使用してWebサイトのログインインターフェイスを美しくする方法を主に紹介します。必要な友達は参考にしてください。

コードは次のとおりです:

<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>

CSS美化、最適化、マージツール Recommendation_html/css _WEB -ITnose

純粋な CSS でラジオと checkbox_html/css_WEB-ITnose を美しくする

以上がCSSログインインターフェースの美化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSSアニメーションのチュートリアル次の記事：CSSアニメーションのチュートリアル

続きを見る