代碼如下：
<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美化html表單控制項(表單美化)詳細樣本
css美化、最佳化、合并工具推薦_html/css_WEB-ITnose
用純CSS美化radio和checkbox_html/css_WEB-ITnose
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
