時間：2023-04-21 02:12:02 | 來源：網(wǎng)站運(yùn)營
時間：2023-04-21 02:12:02 來源：網(wǎng)站運(yùn)營
HTML+CSS仿寫京東登陸頁面附代碼（web前端期末大作業(yè)）：本來想加上JS實現(xiàn)選項卡功能的，奈何本人水平實在有限，用JavaScript用到一半就放棄了，真的不會使用?。。。〗o你們看看效果吧。
在線咨詢
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京東-歡迎登錄</title> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/main.css"></head><body> <!-- 頂部 --> <div class="top"> <!-- 左邊 --> <div class="logo"> <img src="img/logo.png" alt="" class="logo"> <h2 class="wel">歡迎登錄</h2> </div> <!-- 右邊 --> <div class="survey"> <img src="img/massage.png" alt="" > <a href="#">登錄頁面，調(diào)查問卷</a> </div> </div> <!-- 條款法律 --> <div class="policy"> <img src="img/warn.png" alt=""> <span class="text">依據(jù)《網(wǎng)絡(luò)安全法》，為保障您的賬戶安全和正常使用，請盡快完成手機(jī)號驗證！ 新版<a href="#" class="policy">《京東隱私政策》</a>已上線，將更有利于保護(hù)您的個人隱私。</span> </div> <!-- 主界面 --> <div class="main"> <!-- 主界面下的子盒子用于放背景圖片 --> <div class="img"> <!-- 登錄頁 --> <div class="login"> <!-- 登錄頁頂部 --> <div class="top"> <img src="img/warn.png" alt=""> <span>京東不會以任何理由要求您轉(zhuǎn)賬匯款，謹(jǐn)防詐騙。</span> </div> <!-- 賬戶登錄和掃碼登錄選項卡 --> <div id="tab"> <div class="sel"> <ul> <div class="left"> <li class="off"><a href="">掃碼登錄</a></li> </div> <div class="right"> <li class="on"><a href="">賬戶登錄</a></li> </div> </ul> </div> <!-- 賬戶密碼登錄界面 --> <div class="m"> <div class="show"> <div class="inputs"> <input type="text" class="user"> <input type="text" class="pwd"> <span class="user_img"></span> <span class="pwd_img"></span> <a href="#">忘記密碼</a> <input type="button" class="button" value="登 錄"> </div> </div> </div> </div> <!-- 登錄頁底部 --> <div class="login-bottom"> <!-- 第三方登錄界面 --> <div class="other-login"> <img src="img/qq.png" alt=""> <a href="#">QQ</a> <img src="img/WeChat.png" alt=""> <a href="#">微信</a> </div> <!-- 注冊界面 --> <div class="enroll"> <img src="img/login.png" alt=""> <a href="#">立即注冊</a> </div> </div> </div> </div> <!-- 底部 --> <div class="bottom"> <ul class="about"> <a href="#"> 關(guān)于我們 </a><span>|</span> <a href="#"> 聯(lián)系我們 </a><span>|</span> <a href="#"> 人才招聘 </a><span>|</span> <a href="#"> 商家入駐 </a><span>|</span> <a href="#"> 廣告服務(wù) </a><span>|</span> <a href="#"> 手機(jī)京東 </a><span>|</span> <a href="#"> 友情鏈接 </a><span>|</span> <a href="#"> 銷售聯(lián)盟 </a><span>|</span> <a href="#"> 京東社區(qū) </a><span>|</span> <a href="#"> 京東公益 </a><span>|</span> <a href="#"> English Site </a> </ul> <!-- 底部版權(quán) --> <p class="copy"> Copyright ? 2004-2021 京東JD.com 版權(quán)所有 </p> </div></body></html>CSS (base.css)/* 基本預(yù)設(shè) *//*清除頁面中標(biāo)簽自帶的外間距和內(nèi)填充*/* { margin: 0; padding: 0; }/*清除ul自帶的列表符*/ul, li { list-style: none; }/*去掉a自帶的下劃線*/a { color: #666666; text-decoration: none; }/* 刪除a點擊后變藍(lán)色 */a:visited { color: #999999; text-decoration: none; } /* 點擊a上面有下劃線 且變紅*/a:hover{ text-decoration: underline; color: red; }/*去掉img自帶的邊框<當(dāng)圖像加上a標(biāo)簽后，IE瀏覽器在不去除圖像邊框時會顯示邊框>*/img { border: none; }html { height:100%; }body { min-height: 100%; position: relative; }(main.css)/* 頂部基礎(chǔ)設(shè)置 */.top{ width: 1000px; margin: 0 auto; padding: 18px; overflow: hidden;}/* 左浮動京東logo和歡迎登錄 */.top .logo .logo,.top .logo .wel{ float: left;}/* 調(diào)整京東logo和歡迎登錄之間的距離以及字體顏色和樣式 */.top .logo .wel{ height: 60px; line-height: 70px; font-weight: normal; margin-left: 25px; color: #333333;}/* 使用元素的相對定位將其調(diào)整到合適的界面并調(diào)整字體顏色和樣式 */.top .survey { position: relative; float: right; top: 45px; font-size: 12px; font-family: SimSun; color: #999999;}/* 政策條款 改背景色、字體、字號并居中*/.policy{ margin: 0 auto; padding-top: 10px; padding-bottom:10px; background: #fff8f0; width: 100%; text-align: center; font-size: 12px; font-family: SimSun; color: #999999; }/* 條款 調(diào)整顏色*/.policy .policy{ padding:0px; color: #333333;}/* 定義主界面高度和顏色*/.main{ height: 475px; background-color: #E93854;}/* 導(dǎo)入背景圖并居中 */.main .img{ width: 990px; height: 475px;/* 或者100% */ margin: 0 auto; background: url(../img/main.png);}/* 定義登錄頁面的高度寬度 并定位好位置 */.main .img .login{ width: 350px; height: 410px; background-color: white; float: right; margin-top: 15px;}/* 上邊的提醒警告欄 修改padding 字號 字體 */.main .img .login .top{ text-align: center; width: 350px; padding: 10px 0; background-color:#fff8f0; color: #666666; font-size: 12px; font-family: SimSun;}/* 掃碼登錄和賬號登錄大盒子 */.main .img .login .sel{ width: 350px; height: 56px; display: block;}/* 掃碼登錄和賬號登錄 */.main .img .login .left,.main .img .login .right{ width: 175px; height: 55px; text-align: center; line-height: 55px; font-size: 18px; border-bottom: 1px solid #f4f4f4;} .main .img .login .left{ float: left;} .main .img .login .right{ float: right;}/* 取消放上去的下劃線 */.main .img .login a:hover{ text-decoration: none;}.main .img .login .right a{ color: #E93854; font-weight: bolder;}/* 兩個輸入框都定位 */.show{ padding-top: 33px; padding-left: 20px; padding-right: 20px;}.show .user,.show .pwd{ width: 304px; height: 38px; border: 1px solid #ccc; margin-bottom: 20px; padding-left: 50px; box-sizing: border-box;}.inputs { position: relative;}/* 圖標(biāo)位置定位 */.show span { display: block; width: 36px; height: 36px; border-right: 1px solid #ccc; background-color: #f3f3f3; position: absolute;}/* 將圖標(biāo)導(dǎo)入 */.show .user_img { top: 1px; left: 1px; background: url("../img/account.jpg") no-repeat;}.show .pwd_img { top: 59px; left: 1px; background: url("../img/password.jpg") no-repeat;}/* 忘記密碼定位 */.inputs a{ float: right; font-size: 12px; font-family: SimSun; padding-bottom: 30px;}/* 登錄按鈕定位 */.inputs .button{ border: 1px solid #e85356; display: block; width: 302px; background: #e4393c; height: 31px; line-height: 31px; color: #fff; font-size: 20px;}/* 底部第三方登錄和注冊 */.login-bottom{ width: 100%; height: 50px; line-height: 50px; border-top:1px solid #f4f4f4 ; background-color: #fcfcfc; display: flex; justify-content: space-around; padding-top: 40px;}/* 調(diào)整底部的一些細(xì)節(jié) 圖標(biāo)與文字的位置等 */.login-bottom .other-login a{ position: relative; font-size: 12px; bottom: 5px;}.login-bottom .enroll a{ position: relative; font-family: SimSun; font-size: 14px; color: #E93854; bottom: 3px;}/* 底部基礎(chǔ)設(shè)置 與中央部分的距離調(diào)整 文字居中 字體、字號、顏色 */.bottom{ margin-top: 25px; text-align: center; font-size: 12px; font-family: SimSun; color: #666666; }/* 調(diào)整版權(quán)和關(guān)于我們項目之間的距離 */.bottom .copy{ margin-top: 12px;}關(guān)鍵詞：作業(yè),登陸
客戶&案例
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
