文章目錄
- 概述
- 代碼
- 截圖
- 代碼鏈接
概述
web美團 登錄和注冊功能、頁面展示。
代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="main"><div class="main-left"><div class="main-left-content"><!-- 坐標的列表 --><ul><li><img src="images/美食.png" alt=""><span class="select">美食</span><i>＞</i></li><li><img src="images/外賣.png" alt=""><span class="select"><a href="order.html">外賣</a></span><i>＞</i></li><li><img src="images/酒店.png" alt=""><span class="select">酒店</span><i>＞</i></li><li><img src="images/民宿.png" alt=""><span class="select">貓眼電影</span><i>＞</i></li><li><img src="images/民宿1.png" alt=""><span class="select">民宿</span><i>＞</i></li><li><img src="images/機票.png" alt=""><span class="select">機票</span><span>/</span><span class="select">火車票</span><i>＞</i></li><li><img src="images/休閑娛樂.png" alt=""><span class="select">休閑娛樂</span><span>/</span><span>KTV</span><i>＞</i></li><li><img src="images/服務.png" alt=""><span class="select">生活服務</span><i>＞</i></li><li><img src="images/麗人.png" alt=""><span class="select">麗人</span><span>/</span><span class="select">美發</span><span>/</span><span class="select">醫學美容</span><i>＞</i></li><li><img src="images/結婚.png" alt=""><span class="select">結婚</span><span>/</span><span class="select">婚紗攝影</span><span>/</span><span class="select">婚宴</span><i>＞</i></li><li><img src="images/親子.png" alt=""><span class="select">親子</span><span>/</span><span class="select">兒童樂園</span><span>/</span><span class="select">幼教</span><i>＞</i></li><li><img src="images/運動.png" alt=""><span class="select">運動健身</span><span>/</span><span class="select">健身中心</span><i>＞</i></li><li><img src="images/家裝.png" alt=""><span class="select">家裝</span><span>/</span><span class="select">建材</span><span>/</span><span class="select">家居</span><i>＞</i></li><li><img src="images/學習.png" alt=""><span class="select">學習培訓</span><span>/</span><span class="select">音樂培訓</span><i>＞</i></li><li><img src="images/醫療.png" alt=""><span class="select">醫療健康</span><span>/</span><span class="select">寵物</span><span>/</span><span class="select">愛車</span><i>＞</i></li><li><img src="images/酒吧.png" alt=""><span class="select">酒吧</span><span>/</span><span class="select">密室逃脫</span><i>＞</i></li></ul></div></div><!-- 中間展示 --><div class="main-middle"><div class="main-middle-content"><div class="main-middle-content-top"><!-- <div class="main-main-content-top-left"><div class="main-main-content-top-left-prev"></div><div class="main-main-content-top-left-next">啊偉大偉大</div></div> --><!-- <div class="main-main-content-top-right">啊偉大偉大</div> --></div><!-- <div class="main-middle-content-foot"><div class="main-middle-content-foot-left">你好</div><div class="main-middle-content-foot-middle">hello</div><div class="main-middle-content-foot-right">....</div></div> --></div></div><!-- 展示的右邊 --><div class="main-right"><div class="main-right-content"><div class="main-right-content-top"><div class="main-right-content-top-img"></div><div class="main-right-content-top-content">Hi ！你好</div><div class="main-right-content-top-login"><a href="register.HTML">注冊</a></div><div class="main-right-content-top-register"><a href="login.html">登錄</a></div></div><div class="main-right-content-foot"><div class="main-right-content-foot-2D"></div><div class="main-right-content-foot-content"><p>美團APP手機版</p><span class="money">1元起</span><span>吃喝玩樂</span></div></div></div></div>
</div>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登錄</title><link rel="shortcut icon" href="images/camera.ico"><link rel="stylesheet" href="css/login.css"><link rel="stylesheet" href="css/footer.css">
</head>
<body>
<!--頭部-->
<div id="header"><!--頭部中間信息--><div class="h_center"><img src="images/logo.png" alt=""><p>歡迎來到點單系統：請先登錄！</p></div>
</div><!--中部-->
<div id="login_body"><div class="login_b_center"><div class="login_bg"><h1>密碼登錄</h1><form action="#" id="login">
<!-- //用戶名--><div class="userName"><span></span><input type="text" value="賬戶"></div>
<!-- //密碼--><div class="password"><span></span><input type="password" ></div>
<!-- //登錄按鈕--><div class="login_btn"><a href="index.html"><input type="button" value="登錄"></a></div><div class="forgot_password"><a href="">忘記密碼</a><a href="register.html">注冊賬號</a><a href="1.0/index.html">幫助</a></div></form></div></div>
</div><!--尾部-->
<div id="footer"><div class="link"><a href="">關于我們</a>|<a href="">聯系我們</a>|<a href="">商家入駐</a>|<a href="">友情鏈接</a>|</div><div class="copyright">版權所屬 網絡</div>
</div>
</body>
</html>注冊
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注冊</title><link rel="stylesheet" href="css/register.css"><link rel="shortcut icon" href="images/camera.ico"><script src="js/register.js"></script>
</head>
<body>
<!--頭部-->
<div id="reg_header"><div class="reg_h_center"><div class="reg_h_left"><img src="images/logo.png" alt=""><h3>歡迎注冊</h3></div></div>
</div><!--表單內容-->
<div class="reg_back"><div class="reg_left"><p>新用戶注冊</p><p>USER REGISTER</p></div><div class="reg_center"><div class="reg_form"><form action="#" method="post"><table><tr><td class="td_left"><label for="username">用戶名</label></td><td class="td_right"><input type="text" name="username" placeholder="請輸入用戶名"id="username"></td></tr><tr><td class="td_left"><label for="password">密碼</label></td><td class="td_right"><input type="password" name="password" placeholder="請輸入密碼"id="password"></td></tr><tr><td class="td_left"><label for="Email">Email</label></td><td class="td_right"><input type="email" name="email" placeholder="請輸入Email" id="Email"></td></tr><tr><td class="td_left"><label for="rename">姓名</label></td><td class="td_right"><input type="text" name="rename" placeholder="請輸入真實姓名" id="rename"></td></tr><tr><td class="td_left"><label for="Telphone">手機號</label></td><td class="td_right"><input type="text" name="telphone" placeholder="請輸入您的手機號"id="Telphone"></td></tr><tr><td class="td_left"><label>性別</label></td><td class="td_right"><input type="radio" name="gender" value="male" checked> 男<input type="radio" name="gender" value="female"> 女</td></tr><tr><td class="td_left"><label for="Birthday">出生日期</label></td><td class="td_right"><input type="date" name="birthday" id="Birthday"></td></tr><tr><td class="td_left"><label for="checkcode">驗證碼</label></td><td class="td_right"><input type="text" name="checkcode" id="checkcode"><img src="images/check_code.png" id="img_check"></td><!-- 10.png為驗證碼圖片 --></tr><tr><td colspan="2" align="center"><input type="submit" value="注冊" id="btn_sub" onclick="onshow()"></td></tr></table></form></div></div><div class="reg_right"><p>已有賬號?<a href="login.html">立即登錄</a></p></div>
</div>
<!-- 采用的jsp代碼 ，函數調用--><script>function onshow(){alert("注冊成功");}
</script>
</body>
</html>截圖
代碼鏈接
鏈接: https://pan.baidu.com/s/1c-7nDlgn_I5AektDwkVaHg?pwd=cuii 提取碼: cuii
–來自百度網盤超級會員v3的分享
