仿京東登入介面-----h5/css/js/jq/bookstrap

阿新 • • 發佈：2019-01-19

執行圖

碼：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京東-歡迎登入</title>
    <link rel="stylesheet" href="../../public/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../public/css/responsiveslides.css">
    <link rel="stylesheet" href="css/login.css">
    <script src="../../public/js/jquery-3.3.1.js"></script>
    <script src="../../public/js/bootstrap.min.js"> </script>
    <script src="../../public/js/jquery.qrcode.min.js"> </script>
    <script src="js/login.js"></script>
    <!--修改圖示-->
    <link rel="icon" href="../../public/images/favicon.ico" mce_href="../../public/images/favicon.ico" type="image/x-icon">
</head>
<body>
    <div class="jd-login-container"><!--總體-->
        <div id="jd-login-item-1"><!--item1   實現頂部-->
            <div id="img-b">
                <img src="../images/logo-201305-b.png" alt="logo-201305-b.png">
                <p>歡迎登入</p>
            </div>
            <div id="span-a">
                <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
                <a href="#">登入介面，調查問卷</a>
            </div>
        </div>
        <div id="jd-login-item-2" class="jd-login-item-not-first"><!--item2  警告-->
            <div class="alert alert-danger" role="alert"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>依據《網路安全法》，為保障您的賬戶安全和正常使用，請儘快完成手機號驗證！ 新版《京東隱私政策》已上線，將更有利於保護您的個人隱私。</div>
        </div>
        <div id="jd-login-item-3" class="jd-login-item-not-first"><!--item3   中間內容，，登入部分-->
            <div>
                <div class="panel panel-warning jd-login-panel">
                    <div class="panel-heading" >
                        <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span><span>京東不會以任何理由要求您轉賬匯款，謹防詐騙。</span>
                    </div>
                    <div class="panel-body jd-login-panel-body">
                        <div class="panel-st-container">
                            <!-- 上邊欄 -->
                            <div class="page-slide">
                                <div class="slide-item cur" data-target="page1">掃碼登入</div>
                                <div class="slide-item" data-target="page2">賬號登入</div>
                            </div>
                            <!-- 頁面下--顯示 -->
                            <div class="page  active page-red page-qrcode" id="page1">
                                <p>你好！這是一張神奇的二維碼</p>
                                <div class="qrcode"></div>
                                <div class="qrcode_phone"><img src="../images/qrcode_phone.jpg" alt="qrcode_phone.jpg"></div>
                            </div>
                            <div class="page  page-blue" id="page2">
                                <form action="#">
                                    <div class="form-group has-success has-feedback">
                                        <div class="input-group" id="item1">
                                            <span class="input-group-addon"><span class="glyphicon glyphicon-user btn-lg" aria-hidden="true"></span></span>
                                            <input type="text" class="form-control" required id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status" placeholder="郵箱/使用者名稱/已驗證手機">
                                        </div>
                                        <div class="input-group" id="item2">
                                            <span class="input-group-addon"><span class="glyphicon glyphicon-lock btn-lg" aria-hidden="true"></span></span>
                                            <input type="text" class="form-control" required id="inputGroupSuccess2" aria-describedby="inputGroupSuccess1Status" placeholder="密碼">
                                        </div>
                                        <p id="item3">忘記密碼</p>
                                        <button id="item4"> 登入</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="panel-footer">
                         <ul>
                             <li><img src="../images/qq_icon.jpg" alt="qq_icon.jpg"><a href="#">QQ</a></li>
                             <li>|</li>
                             <li><img src="../images/wechat_icon.jpg" alt="wechat_icon.jpg"><a href="#">微信</a></li>
                             <li> <span class="glyphicon glyphicon-circle-arrow-right" aria-hidden="true"></span><a href="#">立即註冊</a></li>
                         </ul>
                    </div>
                </div>

            </div>
        </div>
        <div id="jd-login-item-4" class="jd-login-item-not-first"><!--item4   頁尾-->
            <div>
                <ul>
                    <li><a href="#">關於我們</a></li>
                    <li>|</li>
                    <li><a href="#">聯絡我們</a></li>
                    <li>|</li>
                    <li><a href="#">人才招聘</a></li>
                    <li>|</li>
                    <li><a href="#">商家入駐</a></li>
                    <li>|</li>
                    <li><a href="#">廣告服務</a></li>
                    <li>|</li>
                    <li><a href="#">手機京東</a></li>
                    <li>|</li>
                    <li><a href="#">友情連結</a></li>
                    <li>|</li>
                    <li><a href="#">銷售聯盟</a></li>
                    <li>|</li>
                    <li><a href="#">京東社群</a></li>
                    <li>|</li>
                    <li><a href="#">京東公益</a></li>
                    <li>|</li>
                    <li><a href="#">English Site</a></li>
                </ul>
                <p>Copyright © 2004-2018  京東JD.com 版權所有</p>
            </div>
        </div>
    </div>

</body>
</html>

js：

/*生成二維碼*/
$(function () {
        jQuery('.qrcode').qrcode({
            render: "canvas",
            width: 160,
            height: 160,
            text: "http://www.jq22.com"
        });
});
/*二維碼與手機圖，，隱藏與顯示*/
$(function () {
        $(".qrcode_phone").hide();
        $(".qrcode").hover(function () {
            $(".qrcode").css({
                "margin-left":"40px",
            });
            $(".qrcode_phone").show();
        },function () {
            $(".qrcode").css({
                "margin-left":"110px",
            });
            $(".qrcode_phone").hide();
        });
});
/*實現掃碼登入與賬號登入切換*/
$(function () {
    var current = $(".active");
    $(".slide-item").on("click", function(ele) {
        var target = $("#"+ $(ele.currentTarget).data("target"));
        if (target.hasClass('active')) {
            return ;
        } else {
            $(this).addClass('cur');
            $(this).siblings().removeClass('cur');
            current.removeClass('active');
            target.addClass('active');
            current = target;
        }
    });
});

css：樣式寫的有些亂。這是拿來練手的，所以我路徑寫得深和一些命名有些亂。體諒體諒

目錄結構改改路徑就ok

* {margin: 0px;padding: 0px;}
body {overflow: hidden;}
div.jd-login-container div#jd-login-item-1 div#img-b img {margin: 30px auto auto 100px;float: left;}
div#img-b p {float: left;font-weight: 400;font-size: 24px;font-family: Verdana;margin: 50px auto auto 20px;}
div#span-a {float: right;margin: 60px 100px auto auto;}
div#span-a a:hover {color: #ff1f17;text-decoration: underline;}    /* 滑鼠移動到連結上 */
div.jd-login-item-not-first, div#jd-login-item-4 div p{clear: both;}
div#jd-login-item-3 {background: url("../../images/img10_360buyimg.jpg");width: 100%;height: 430px;margin-top: -20px;}
div#jd-login-item-4 div ul {margin-left: 17%;}
div#jd-login-item-4 div ul li, .panel-footer ul li{float: left;margin: 0px 5px;list-style-type: none;}
div#jd-login-item-4 div ul li a:visited, div#jd-login-item-4 div p , div#jd-login-item-2 div, div#span-a a:visited, #span-a a{color: #999;}
div#jd-login-item-4 div ul li a:hover {color: #ff1f17;text-decoration: underline;} /* 滑鼠移動到連結上 */
div#jd-login-item-4 div p {text-align: center;}
div.jd-login-panel {width: 28%;height: 400px;border-radius: 5px;position: relative;left: 65%;text-align: center;}
div#jd-login-item-2 div {font-size: 10px;text-align: center;background: #fcf8e3;}
.panel-footer ul {width: 100%;height: 30px;}
.panel-footer {background: #fff;height: 40px;}
div.jd-login-panel div span{color: #999;}
.panel-footer ul li:last-child {margin-left: 100px;font-size: 18px;}
.panel-footer ul li:last-child a, .panel-footer ul li:last-child span{color: red;}
.jd-login-panel-body {height: 79%;}
div.page-slide {position: absolute;z-index: 999;right: 50px;display: flex;flex-direction: row;justify-content: center;text-align: center;}
.panel-st-container {overflow: hidden;}
div.slide-item {float: left;font-size: 24px;margin: 0px 20px;cursor: pointer; }
.cur {color: red;}
.page {position: absolute;  height: 60%;width: 100%;z-index: 1; display: none;margin: 50px auto auto -15px;}
.page.active {z-index: 2;display: block;}
#item1, #item2 {width: 80%;height: 30px;margin: 10px 40px;}
#item1 input, #item2  input {height: 100%;}
#item1 span.input-group-addon , #item2  span.input-group-addon   {background: #fcf8e3;}
#item3 {margin-left: 230px;}
#item4 {width: 80%;height: 40px;margin: 0px 40px;background: red;color: white;border: none;font-size: 20px;}
.qrcode {margin: 10px 10px auto 110px;}
.qrcode, .qrcode_phone {float: left}

仿京東登入介面-----h5/css/js/jq/bookstrap

執行圖碼：html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>京東-歡迎登入<

初學h5 css js 第一天

第一次寫HTML部落格，我還是一個大二的學生關於h5的文字語法：font-style: font-family: font-size: font-color: text-align: backgr

RecyclerView二級聯動,仿京東分類介面

今天我們一起探討一下通過RecyclerView實現二級聯動,在這裡我做的是仿京東的分類頁面,京東的分類頁面是一個非常經典的專案,今天我們就來寫一下. 首先,第一步:搭建環境(依賴和許可權) 在這裡首先看一下所需依賴:在這裡圖片的記載我使用的是Glide /*android5.0的新特

recyclerview+viewpager實現多分類fragment介面仿京東分類介面

好久沒寫部落格了，今天決定寫一篇簡單的功能實現熱熱手這是我2018年10月份在京東app錄製的他們的分類介面，今天主要就是實現這樣的一個分類的介面整理思路首先整理思路啊。整體介面的實現方式可能很多，但是需要儘可能的用簡單的方式，比如左邊的分類介面和右邊的

使用HTML5搭建京東登入介面（一）

先來看一下最終的效果： HTML部分的程式碼如下： <body> <header> <div class="header-content"> <a href="index.html"

使用HTML5搭建京東登入介面（二）

在我們html檔案中，引入了2個css檔案，分別為reset.css和login.css。下面我們就來看一下這2個css檔案是如何實現佈局的。先來看一下reset.css，這裡是對於整個html檔案共同的元素需要統一設定的樣式，程式碼如下： login.css是針對性

H5+CSS+JS:表單

表單 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表單</title> &l

情人節-動態愛心（h5+css+js）

一、效果圖二、原始碼 <!DOCTYPE html> <html> <head> <title></title> </head> <style> *{ padding:

第一篇博文，發一個用（h5,css,js）做的鬧鐘吧

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">#bodyDi

學習完html,css,js,jq之後做網頁心得

經過5天的快速學習之後，我開始學著做網頁了，有一些心得體會，在這裡記錄一下。快速學習只是為了知道在真正實戰的時候，你可以知道你想要的東西到底在哪裡，這樣就可以快速地進行查詢到你所需要的東西。快速學習不是為了將所有你看到的東西全部都記住，而是有一個大概的印象。在真正

005_HTML製作炫酷登入介面（CSS精靈圖、背景圖片區域性顯示）

效果：說明：輸入框由三部分組成：裝區域性圖示的span 顯示提示文字的span 接受使用者輸入的input 互動效果剛開啟頁面，所有輸入框顯示提示文字當input獲得焦點，提示文字消失當input失去焦點，並且使用者沒有輸入內容

白話 h5+css+js

排版固定環境工作 ava 根據準備文字 script 聲明本人小白其下內容只是個人理解 html 官方定義“超文本標記語言”，其實html語言就是為網頁開發者所準備的規則。在最開始的時候某些公司想開發一款軟件，用於將類似報

HTML+CSS仿寫京東網站介面

在學習了HTML和CSS以後，用倆天的時間仿寫京東網站的部分介面，基本將之前學習的內容都應用到了，收貨頗多，也對網站的佈局有了更深的認識。總結整體的佈局在開始寫網站之前，要考慮整體的佈局，事先將每一塊的內容框架搭建好，後期就可以將每一塊的內容填充好，包括css的樣式。這樣

仿京東——我的介面（登入註冊，上傳頭像）

我的介面佈局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmln

CSS+H5的登入介面

<!DOCTYPE HTML> <html> <head> <title>後臺管理系統</title> <meta charset="utf-8"> <style>

html/css/js-如何利用jq來更改屬性的值和獲取屬性的值

lec tor 遇到 efi sha 小問題 width href name屬性 jquery的使用在web開發中是非常廣泛的，雖然說比較容易，易學，但在開發過程中，也總是會碰到各種各樣的小問題。我曾經就遇到這種問題，jq如何獲取屬性值和更改屬性值的。眾所周知，attr

Android 開發：（三）安卓常用控制元件以及仿《微門戶》登入介面實現

一、常用控制元件： 1、文字類控制元件 TextView 負責展示文字，非編輯 EditText 可編輯文字控制元件 2、按鈕類控制元件 Button 按鈕 ImageButton 圖片按鈕 RadioButton與RadioGroup 單

js實現：仿京東搜尋欄隨滑動透明度漸變

注意：不相容IE8及以下，IE11和360的IE相容模式測試通過====IE8不支援opacity 此效果採用的opacity做的透明漸變 html部分 1 <header class="module-layer"> 2 <div class="module-laye

DIV+CSS實現仿京東商城導航條效果

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xml

css+js模擬使用者註冊和登入頁面

製作一個註冊頁面使用者名稱不能為空並且（6-20位英文字母數字下劃線）密碼重複密碼 6位以上英文字母數字下劃線密碼和重複密碼必須一致身份證號：舊身份證號為15位數字新身份證號為18位數字，或17位數字，最末位為x或X email正常的郵箱規則使用者註冊： <!DO

仿京東登入介面-----h5/css/js/jq/bookstrap

相關推薦