HTML5是一種常用的標記語言,它使用標簽來描述網頁的內容和結構,使得網頁能夠擁有更豐富的表現和交互。其中,交互式登錄頁面是網站中必不可少的一部分,下面是一個簡單的HTML5交互式登錄頁面的代碼。
<!DOCTYPE html> <html> <head> <title>交互式登錄頁面</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background-color: #f2f2f2; } .container { margin: 10% auto; width: 40%; text-align: center; } input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; } button { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; } button:hover { opacity: 0.8; } </style> </head> <body> <div class="container"> <h2>登錄</h2> <form action="/" method="POST"> <p><input type="text" placeholder="用戶名" name="uname"></p> <p><input type="password" placeholder="密碼" name="psw"></p> <p><button type="submit">登錄</button></p> </form> </div> </body> </html>上面的代碼中,使用了HTML5的doctype聲明,指定文檔類型為HTML5。在head標簽中,聲明了文檔的標題和字符集,同時還設置了網頁的視口大小。 在body標簽中,包含了一個class為“container”的div元素,它的樣式設置了div元素的位置和寬度,讓登錄頁面居中顯示。接著,使用form表單元素創建了一個登錄框,其中包含了兩個input輸入框(分別用于輸入用戶名和密碼),還有一個登錄按鈕。 在樣式設置中,設置了輸入框和按鈕的基本樣式,使其具有邊框、背景顏色、文本顏色等,并使用:hover偽類來實現鼠標懸浮時的效果。 總的來說,HTML5交互式登錄頁面代碼是一個基礎的登錄框實現,它使用了HTML5的一些基本元素和樣式,通過調整樣式,還可以實現更多的交互效果。
上一篇智慧樹的css教程的答案
下一篇html5五角星代碼知乎