首先來張完工的效果圖。
一、html檔案如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登入介面</title> <link rel="stylesheet" type="text/css" href="css/login.css"/> </head> <body> <div class="content"> <div class="panel"> <div class="group"> <ul> <li><label>賬號</label></li> <li><input type="text" placeholder=" 請輸入賬號" /></li> </ul> <ul> <li><label>密碼</label></li> <li><input type="password" placeholder=" 請輸入密碼" /></li> </ul> </div> <div class="login"> <button type="button">登入</button> </div> </div> <div class="register"> <button type="button">註冊</button> <button type="button">找回密碼</button> </div> </div> </body> </html>
二、對應的login.css檔案如下,需要將CSS檔案放到對應的CSS資料夾中:
*{ margin:0 auto; padding:0; } /*新增一個淺灰色背景*/ body{ background-color:#eee; } .content{ /*border:1px solid red;*/ width:300px; margin-top:50px; } .content .panel{ border:1px solid #ccc; border-radius:5px; height:220px; background-color:#fff; } .content .panel .group{ margin:30px 10px 10px 20px; } .content .panel .group ul{ list-style: none; margin-top:15px; } .content .panel .group ul li{ margin-top:2px; } .content .panel .group ul li input{ line-height:22px; width:250px; font-size: 14px; font-family: "微軟雅黑","宋體"; } .content .panel .group ul li label{ font-size: 14px; font-family: "黑體","微軟雅黑","宋體"; font-weight: bold; } .content .panel .login{ text-align: center; /*border:1px solid red;*/ margin-top:20px; } .content button{ width:255px; height:30px; background-color:#008000; border:none; color:#fff; font-size:16px; font-weight: bold; cursor:pointer; } .content .register{ margin-top:15px; text-align: center; } .content .register button{ width:80px; height:30px; border:none; font-size:14px; background-color:#4c6bb2; color:#fff; font-family: "微軟雅黑"; text-align: center; margin-left:30px; }