當前位置：首頁 > news >正文

自己做的網站根目錄哪里找到網絡推廣seo怎么弄

news 2025/7/10 11:20:02

自己做的網站根目錄哪里找到,網絡推廣seo怎么弄,網站開發(fā)有哪些,正邦設計董事長倘若文章或代碼中有任何錯誤或疑惑，歡迎提出交流哦~ HTML和CSS 首先，我們需要編寫一個簡潔的注冊界面。簡單編寫下，如下： 呈現(xiàn)效果為： <!DOCTYPE html> <html lang"en"><head><me…

倘若文章或代碼中有任何錯誤或疑惑，歡迎提出交流哦~

HTML和CSS

首先，我們需要編寫一個簡潔的注冊界面。
簡單編寫下，如下：

呈現(xiàn)效果為：
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>結合JavaScript編寫注冊界面</title>
</head><body><div class="main"><h3>注冊界面</h3><form action="#"><ul><li><input type="text" id="name" placeholder="請輸入用戶昵稱"></li><li><input type="text" id="account" placeholder="請輸入賬號"></li><li><input type="text" id="password" placeholder="請輸入密碼"></li><li><input type="text" id="phone" placeholder="請輸入你的手機號碼"></li><li><input type="email" id="email" placeholder="請輸入郵箱地址"></li></ul><input type="submit" id="submit" value="注冊"></form></div>
</body></html>

在添加一定的css樣式后，得到下面文中的效果。

注冊按鈕

給注冊按鈕添加完css樣式后，因為將按鈕向右浮動，會導致上浮，所以添加了清除浮動類。這個比較重要我覺得。

添加如下要求：

用戶名：只能包含英文字符、中文字符、數(shù)字，長度在2-15。
賬號：只能包含字母和數(shù)字，長度在6-20，不允許包含任何的特殊符號。
密碼：密碼長度至少6個字符，且必須同時包含大寫字母，小寫字母，數(shù)字和特殊字符 (例如 !@#$%^&* )。
手機號：長度為11位的中國號碼。
郵箱：符合電子郵件的常規(guī)格式。

效果如下：
在這里插入圖片描述

也就是說，如果用戶輸入的內容錯誤了，那么輸入框下的提示信息就會變成紅色，來提醒出錯。

密碼顯示按鈕

可以看到我們使用類型為password的input輸入框時，輸入的內容都是不可見的，而我們在日常使用經?？吹?#xff0c;顯示密碼的按鈕，現(xiàn)在加上這個按鈕。
在這里插入圖片描述
下面是添加眼睛按鈕的HTML和CSS代碼，下一篇文章使用Javascript解決問題。

CSS和HTML代碼

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>結合JavaScript編寫注冊界面</title><style>.main {/* 設置內容寬度以及水平居中 */width: 80%;margin: 0 auto;margin-left: 20px;/* 邊框以及邊框圓角 */border: 1px solid #ccc;border-radius: 5px;/* 背景顏色 */background-color: #f5f5f5;padding: 20px;}form ul li {list-style: none;margin-bottom: 10px;}form ul li input[type="text"],form ul li input[type="password"],form ul li input[type="email"] {width: 80%;margin-top: 5px;padding: 10px;border: 1px solid #ccc;border-radius: 4px;}/* 提示信息部分 */.prompt {/* 讓文本和輸入框更緊湊 */margin-top: 2px;width: 80%;/* 設置提示信息為合適的大小，以及顏色 */font-size: 12px;color: rgba(0, 0, 0, 0.3);}/* 注冊按鈕部分 */form ul li input[type="submit"] {float: right;margin-top: 10px;padding: 10px 20px;border: none;background-color: #4CAF50;color: white;cursor: pointer;}form ul li input[type="submit"]:hover {background-color: #45a049;}/* 顯示圖標部分 */form ul li input[type="password"],button {display: inline;}button {border: none;cursor: pointer;padding-top: 5px;height: 25px;width: 30px;}img {/* 讓圖片占滿整個區(qū)域 */width: 100%;height: 100%;}</style>
</head><body><div class="main"><h3>注冊界面</h3><form action="#"><ul><li><input type="text" id="name" placeholder="請輸入用戶昵稱"><p class="prompt">用戶名只能包含英文字符、中文字符、數(shù)字，長度在2-15。</p></li><li><input type="text" id="account" placeholder="請輸入賬號"><p class="prompt">賬號只能包含字母和數(shù)字，長度在6-20，不允許包含任何的特殊符號。</p></li><li><input type="password" id="password" placeholder="請輸入密碼"><button id="button"><img src="./image/view.png" alt="顯示" id="img"></button><p class="prompt">密碼長度至少6個字符，且必須同時包含大寫字母，小寫字母，數(shù)字和特殊字符</p></li><li><input type="text" id="phone" placeholder="請輸入你的手機號碼"><p class="prompt">手機號為長度11位的中國號碼。</p></li><li><input type="email" id="email" placeholder="請輸入郵箱地址"><p class="prompt">請輸入符合電子郵件的常規(guī)格式。</p></li><li><input type="submit" id="submit" value="注冊"><!-- 消除浮動類，避免上浮 --><div style="clear: both"></div></li></ul></form></div>
</body></html>

頁面效果如下：
在這里插入圖片描述