HTML5二級菜單登入代碼可以幫助網站管理者更方便地搭建網站、管理用戶信息和設置權限。下面給大家分享一下HTML5二級菜單登入代碼的具體實現方式。
首先,在HTML文件中引入CSS樣式表和JavaScript腳本,這樣才能實現網頁的外觀和功能。代碼如下:
接下來,在body標簽中添加菜單和登入表單。代碼如下:
在CSS文件中,我們可以對菜單和登入表單進行樣式設置。代碼如下:
.menu { background-color: #333; color: #fff; padding: 10px; } .menu ul { margin: 0; padding: 0; list-style: none; } .menu ul li { float: left; position: relative; } .menu ul li a { display: block; padding: 5px 10px; color: #fff; text-decoration: none; } .menu ul li:hover >ul { display: block; } .menu ul ul { display: none; position: absolute; top: 100%; left: 0; background-color: #333; padding: 0; } .menu ul ul li { float: none; position: static; } .menu ul ul a { padding: 5px 10px; color: #fff; } .login form { display: none; position: absolute; top: 100%; right: 0; background-color: #333; padding: 10px; } .login label { display: block; color: #fff; margin-bottom: 5px; } .login input[type="text"], .login input[type="password"] { display: block; width: 100%; margin-bottom: 10px; padding: 5px; } .login input[type="button"] { display: block; background-color: #666; color: #fff; border: none; padding: 5px 10px; cursor: pointer; }最后,在JavaScript文件中實現登入功能。代碼如下:
function login() { var username = document.getElementById("username").value; var password = document.getElementById("password").value; if(username == "" || password == "") { alert("請輸入用戶名和密碼"); } else if(username == "admin" && password == "123456") { alert("登錄成功"); document.getElementById("username").value = ""; document.getElementById("password").value = ""; } else { alert("用戶名或密碼錯誤"); } }以上就是HTML5二級菜單登入代碼的具體實現方式。我們可以根據自己的需求進行一定的修改和優化,以達到更好的效果。
上一篇更改css里的圖片
下一篇HTML5書店內容代碼