HTML5、CSS和JavaScript是現代Web開發中不可缺少的三個元素。今天我們將演示如何使用這三種技術來創建一個簡單的QQ登陸界面。以下是我們的代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>QQ登陸界面</title> <style> body { font-family: Arial, sans-serif; background-color: #f8f8f8; } #login-div { width: 300px; margin: 50px auto; background-color: #fff; padding: 20px; box-shadow: 0px 0px 5px #999; } h1 { text-align: center; margin-bottom: 30px; } input[type=text], input[type=password] { width: 100%; padding: 10px; margin-bottom: 20px; border: none; border-bottom: 1px solid #aaa; } .btn { width: 100%; background-color: #09f; color: #fff; padding: 10px; border: none; border-radius: 5px; cursor: pointer; } .btn:hover { background-color: #0088cc; } </style> </head> <body> <div id="login-div"> <h1>QQ登錄</h1> <form> <input type="text" placeholder="QQ號/手機/郵箱"> <input type="password" placeholder="密碼"> <button type="submit" class="btn">登錄</button> </form> </div> </body> </html>
使用HTML5,我們創建了一個基本的網頁框架,并在
標簽中引用了CSS樣式表。我們使用CSS來為頁面元素添加樣式,包括設置背景顏色、設置元素邊框、設置陰影效果以及設置按鈕顏色等。在HTML中,我們創建了一個包含登錄表單的
元素。表單包含了兩個輸入框和一個按鈕。其中,我們使用了元素來創建輸入框,并設置了placeholder屬性來顯示輸入框的提示信息。我們還使用了