HTML5基礎(九)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

    <head>
        <base href="<%=basePath%>">

        <title>京東-歡迎登錄</title>
        <meta charset="utf-8">
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        <!-- 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
    -->
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap/bootstrap.js"></script>
        <style type="text/css">
            .logo {
                margin: 10px 0;
                position: relative;
                width: 300px;
                float: left;
                height: 60px;
            }
            
            .welcome-login {
                margin-top: 15px;
                position: absolute;
                margin-left: 15px;
                color: rgb(51, 51, 51);
            }
            
            .questions {
                position: relative;
                float: right;
                text-decoration: none;
                color: #999;
                font-size: 12px;
                outline: rgb(109, 109, 109) none 0px;
                top: 52px;
            }
            
            a {
                text-decoration: none;
                color: #999;
            }
            
            a:hover {
                color: #f00;
                text-decoration: underline;
            }
            
            .background-img {
                position: relative;
                width: 102%;
                margin-left: -8px;
            }
            
            .login-form {
                position: absolute;
                margin-top: 180px;
            }
            
            .login-wrap {
                position: relative;
                height: 475px;
                margin: 10px 0 20px;
                z-index: 5px;
            }
            
            .w {
                width: 990px;
                margin: 0 auto;
            }
            
            #content {
                clear: both;
            }
            
            .login-wrap .login-form {
                float: right;
                top: -140px;
            }
            
            .login-form {
                position: relative;
                z-index: 4;
                background: #fff;
                overflow: visible;
                width: 345px;
            }
            
            .login-form .login-tab {
                margin-top: 15px;
                height: 39px;
                font-size: 18px;
                font-family: "microsoft yahei";
                text-align: center;
                border-bottom: 1px solid #f4f4f4;
                position: absolute;
                background: #ffff;
                display: block;
            }
            
            .login-tab {
                position: relative;
                margin-left: 500px;
            }
            
            .login-form .login-tab-r {
                right: 0;
            }
            
            .login-form .login-tab-l,
            .login-form .login-tab-r {
                width: 173px;
            }
            
            a,
            address,
            b,
            big,
            blockquote,
            body,
            center,
            cite,
            code,
            dd,
            del,
            div,
            dl,
            dt,
            em,
            fieldset,
            font,
            form,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            html,
            i,
            iframe,
            img,
            ins,
            label,
            legend,
            li,
            ol,
            p,
            pre,
            small,
            span,
            strong,
            u,
            ul,
            var {
                margin: 0;
                padding: 0;
            }
            
            .msg-wrap {
                width: 306px;
                margin-left: 20px;
            }
            
            .msg-warn {
                color: #666;
                border: solid 1px;
                border-color: orange;
                background-color: #FFEEDD;
                margin-top: 60px;
                text-align: center;
                font-size: 12px;
                padding-top: 3px;
                padding-bottom: 3px;
            }
            
            .form {
                margin-left: 20px;
                width: 306px;
                margin-top: 10px;
                font-size: 20px;
            }
            
            .item .item-fore1 .item .item-fore2 {
                border: 1px solider #bdbdbd;
            }
            
            .form .item-fore1 {
                z-index: 6;
            }
            
            .form .item {
                position: relative;
                margin-bottom: 20px;
            }
            
            .item .item-fore2 {
                margin-top: 10px;
            }
            
            .form .itxt {
                line-height: 18px;
                height: 40px;
                padding: 10px 0 10px 10px;
                width: 256px;
                float: none;
                overflow: hidden;
                font-size: 14px;
            }
            
            .item-fore4 {
                font-size: 12px;
                margin-top: 10px;
                height: 18px;
                /* width: 306px; */
            }
            
            .forgetPassword {
                /*  margin-left:182px; */
                position: absolute;
                right: 0;
                top: 0;
                margin: 0;
            }
            
            .jdcheckbox {
                float: none;
                vertical-align: middle;
                margin: 0 3px 0 0;
                padding: 0;
            }
            
            .item-fore5 {
                text-align: center;
            }
            
            .lo {}
            
            .login-form .login-box .login-btn {
                border: 1px solid #cb2a2d;
                width: 99%;
                position: relative;
                height: 32px;
            }
            
            .login-form .login-box .login-btn .btn-img {
                border: 1px solid #e85356;
                background: #e4393c;
                width: 302px;
                font-size: 20px;
                color: #fff;
                display: block;
                height: 31px;
                line-height: 31px;
                font-family: 'Micraosoft YaHei';
            }
            
            a.btn-img:hover {
                color: #000;
                text-decoration: none;
            }
            
            a.ss:hover {
                color: red;
                /* text-decoration: none;  */
            }
            
            .main-img {
                width: 990;
                height: 475;
            }
            
            element.style {
                background-color: #e93955;
            }
            /**圖片樣式*/
            
            .login-banner {
                background-color: #e93955;
                position: absolute;
                width: 100%;
                margin-top: 0px;
            }
            /* 底部鏈接*/
            
            #footer {
                text-align: center;
                padding-bottom: 30px;
                font-size: 12px;
                color: #666;
            }
            
            .copyright {
                margin-top: 10px;
            }
        </style>
    </head>

    <body>
        <div class="w">
            <!-- 頭部亏狰，logo部分 -->
            <div class="logo">
                ![](img3/logo.png)
                <font size="5px" class="welcome-login">歡迎登錄</font>
            </div>
            <a class="questions" onmouseover="color:red;" target="_blank" >登錄頁面，調(diào)查問卷</a>
        </div>
        <!-- body -->
        <div id="content">
            <div class=login-wrap>
                <div class="w">
                    <!-- 登錄框 -->
                    <div class="login-form">
                        <div class="login-tab login-tab-l">
                            <a class="ss" href="javascript:void(0)" style="color: #666">掃碼登錄</a>
                        </div>
                        <div class="login-tab login-tab-r">
                            <a class="ss" href="javascript:void(0)" style="color:#f00">賬戶登錄</a>
                        </div>
                        <!-- 主體 -->
                        <div class="login-box">
                            <div class="mt tab-h"></div>
                            <div class="msg-wrap">
                                <div class="msg-warn">
                                    <label>公共場所不建議自動登錄料按，以防賬號丟失</label>
                                </div>
                            </div>

                            <!-- 輸入框 -->
                            <div class="mc">
                                <div class="form">
                                    <form id="formlogin" method="post" onsubmit="return false;">
                                        <div class="item item-fore1">
                                            <label for="loginanme" class="login-label name-label ">賬號</label>
                                            <input class="itxt" type="text" name="loginname" placeholder="郵箱/用戶名/已驗證手機">
                                        </div>
                                        <div class="item item-fore2">
                                            <label for="loginanme" class="login-label name-label">密碼</label>
                                            <input type="text" class="itxt" name="loginname" placeholder="請輸入密碼">
                                        </div>

                                        <div class="item item-fore4">
                                            <div class="safe">
                                                <input class="jdcheckbox" type="checkbox" name="remember">自動登錄
                                                <a href="#" class="forgetPassword" style="text-align: right;">忘記密碼</a>
                                            </div>
                                        </div>

                                        <!-- 登錄按鈕 -->
                                        <div class="item item-fore5">
                                            <div class="login-btn">
                                                <a href="javascript:;" class="btn-img btn-entry" tabindex="6" id="loginsubmit">  
                                                登  錄</a>
                                            </div>
                                        </div>

                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="login-banner">
                    <!-- style="background-color:#041422" -->
                    <div class="w">
                        ![](img3/banner.png)
                        <!-- <div id="banner-bg"  class="i-inner"   
                        style="background: url(//img11.360buyimg.com/da/jfs/t3154/258/5179306513/128208/9d5b12bd/5864cf6eN542ab244.jpg) "></div> -->
                    </div>
                </div>
            </div>

        </div>

        <div class="w">
            <div id="footer">
                <div class="links">
                    <a rel="nofollow" target="_blank" >  
                關于我們  
            </a> |
                    <a rel="nofollow" target="_blank" >  
                聯(lián)系我們  
            </a> |
                    <a rel="nofollow" target="_blank" >  
                人才招聘  
            </a> |
                    <a rel="nofollow" target="_blank" >  
                商家入駐  
            </a> |
                    <a rel="nofollow" target="_blank" >  
                廣告服務  
            </a> |
                    <a rel="nofollow" target="_blank" >  
                手機京東  
            </a> |
                    <a target="_blank" href="/links.vm/club.jd.com/links.aspx">  
                友情鏈接  
            </a> |
                    <a target="_blank" >  
                銷售聯(lián)盟  
            </a> |
                    <a  target="_blank">  
                京東社區(qū)  
            </a> |
                    <a  target="_blank">  
                京東公益  
            </a> |
                    <a target="_blank"  clstag="pageclick|keycount|20150112ABD|9">English Site</a>
                </div>
                <div class="copyright">
                    Copyright &copy; 2004-2017 京東JD.com 版權所有
                </div>
            </div>
        </div>
    </body>

</html>

最后編輯于：2017.12.11 02:34:04

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末萨蚕，一起剝皮案震驚了整個濱河市乱顾，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖姥敛，帶你破解...
沈念sama閱讀 217,084評論 6贊 503
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件道逗，死亡現(xiàn)場離奇詭異兵罢，居然都是意外死亡，警方通過查閱死者的電腦和手機滓窍，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,623評論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門卖词，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人吏夯，你說我怎么就攤上這事此蜈〖春幔” “怎么了？”我有些...
開封第一講書人閱讀 163,450評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵裆赵，是天一觀的道長东囚。經(jīng)常有香客問我，道長战授，這世上最難降的妖魔是什么页藻？我笑而不...
開封第一講書人閱讀 58,322評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮陈醒，結果婚禮上惕橙，老公的妹妹穿的比我還像新娘。我一直安慰自己钉跷，他們只是感情好弥鹦，可當我...
茶點故事閱讀 67,370評論 6贊 390
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著爷辙，像睡著了一般彬坏。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上膝晾，一...
開封第一講書人閱讀 51,274評論 1贊 300
城市分裂傳說
那天栓始，我揣著相機與錄音，去河邊找鬼血当。笑死幻赚，一個胖子當著我的面吹牛，可吹牛的內(nèi)容都是我干的臊旭。我是一名探鬼主播落恼，決...
沈念sama閱讀 40,126評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼离熏！你這毒婦竟也來了佳谦？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 38,980評論 0贊 275
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤滋戳，失蹤者是張志新（化名）和其女友劉穎钻蔑，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體奸鸯，經(jīng)...
沈念sama閱讀 45,414評論 1贊 313
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡咪笑，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,599評論 3贊 334
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了娄涩。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蒲肋。...
茶點故事閱讀 39,773評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出兜粘，到底是詐尸還是另有隱情申窘，我是刑警寧澤，帶...
沈念sama閱讀 35,470評論 5贊 344
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布孔轴，位于F島的核電站剃法，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏路鹰。R本人自食惡果不足惜贷洲，卻給世界環(huán)境...
茶點故事閱讀 41,080評論 3贊 327
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望晋柱。院中可真熱鬧优构，春花似錦、人聲如沸雁竞。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,713評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽碑诉。三九已至彪腔，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間进栽，已是汗流浹背德挣。一陣腳步聲響...
開封第一講書人閱讀 32,852評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留快毛，地道東北人格嗅。一個月前我還...
沈念sama閱讀 47,865評論 2贊 370
代替公主和親
正文我出身青樓，卻偏偏與公主長得像唠帝，于是被迫代替她去往敵國和親屯掖。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 44,689評論 2贊 354

HTML5基礎(九)

推薦閱讀更多精彩內(nèi)容