Mr.J--簡單頁面製作
阿新 • • 發佈：2018-11-17
作為一個初學html+css的人，自己做一個小的頁面是非常有必要的。以一個小的登入頁面為例：
<!DOCTYPE html> <html> <link rel="stylesheet" href="css/FirstTest.css" /> <head> <meta charset="UTF-8"> <title>FirstTest</title> </head> <body> <h1> 506登入系統 </h1> <div class="divcss5"></div> <div class="divcss6"> <div class="divcss4"> <form action="" method="post"> <tr> <td><label for="txtname"style="font-weight:bold;">賬號：</label></td> <td><input type="text" id="txtname" name="login_username" placeholder="請輸入您的使用者名稱！"/></td> </tr> <br /><br /> <tr> <td><label for="txtpswd" style="font-weight:bold;">密碼：</label></td> <td><input type="password" id="txtpswd" name="login_pswd" placeholder="請輸入您的使用者密碼！"/> <a href="index.html"> 忘記密碼</a></td> </tr> <tr> <td colspan=2> <br /> <br />   <button type="submit" class="submit_button">登入</button>   <a href="註冊.html";>去註冊</a></td> </td> </tr> </table> </form> </div> </div> </div> </body> </html>
上面是html部分，設定字型樣式用CSS 雖然對於設定字型優先順序 ：行內樣式>內部樣式>外部樣式(後兩者是就近原則)（CSS 三種引入方式）
body{ position: absolute; z-index: -1; background: url(../img/背景.jpg); } h1{ /*設定字型顏色*/ color: aqua; /* 設定字型陰影*/ text-shadow:saddlebrown 5px 5px 10px; /* 設定在頁面中的位置 */ position:relative; left:1250px; top:180px; /* 設定字型樣式 */ font-family:"Ink Free"; font-size: 30px; } .divcss4{ position:absolute; z-index: 2; right:0px; top:20px; } .divcss5{ z-index:1; background:silver; opacity: 0.35; position: absolute; left:1160px; top:250px; width: 400px; height: 220px;} .divcss6{ z-index: 5; position:absolute; left:1480px; top:230px; } a{ font-size:12px; } button{ width: 150px; height: 27px; color: cornflowerblue; font-size: 18px; } input{ width: 250px; height:30px; }
裡面的背景圖由自己選擇，頁面效果：
