master

分支 (9)

管理

管理

master

wtxfz

llz

nt

tzc

wj

wtx

xg

zhl

project
/
login.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微星-登录</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="css/common.css">
    <script src="js/jquery.min.js"></script>
<style>
     .wth {
            width: 0%!important;
        }
        /* .wft {
            width: 100%!important;
        } */
        .top_nav > ul > li > .table_goods > .goods_left > ul > li > ol > li > a {
            padding: 0!important;
            border: none!important;
        }
        .menu_box > ul > li > span > ul > li > a {
            text-decoration: none!important;
            color: rgb(121, 121, 121)!important;
        }
        .menu_box > ul > li > a {
            text-decoration: none!important;
            color: rgb(121, 121, 121)!important;
        }
</style>
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="top">
            <!-- 大盒子包裹 -->
            <div class="top_left  hidden-sm hidden-xs"></div>
            <div class="top_nav  hidden-sm hidden-xs ">
                <ul>
                    <li>
                        <a href="#">产品资讯</a>
                        <div class="table_goods">
                            <!-- <div class="goods_box"> -->
                                <div class="goods_left">
                                    <ul>
                                        <li>
                                            笔记本电脑
                                            <ol>
                                                <li><a href="list.html">泰坦GT系列</a></li>
                                                <li>绝影GS系列</li>
                                                <li>强袭GE系列</li>
                                                <li>侠客GF系列</li>
                                                <li>先锋Alpha</li>
                                            </ol>
                                        </li>
                                        <li>
                                            台式电脑
                                            <ol>
                                                <li>Aegis系列</li>
                                                <li>Nightblade系列</li>
                                                <li>Infinite系列</li>
                                                <li>Trident系列</li>
                                                <li>CodeX系列</li>
                                            </ol>
                                        </li>
                                        <li>
                                            电脑显卡
                                            <ol>
                                                <li>MEG系列</li>
                                                <li>MPG系列</li>
                                                <li>MAG系列</li>
                                                <li>Pro系列</li>
                                                <li>NVA系列</li>
                                            </ol>
                                        </li>
                                        <li>
                                            电脑主板
                                            <ol>
                                                <li>MEG系列</li>
                                                <li>MPG系列</li>
                                                <li>MAG系列</li>
                                                <li>Pro系列</li>
                                                <li>NVA系列</li>
                                            </ol>
                                        </li>
                                        <li>
                                            显示器
                                            <ol>
                                                <li>MPG系列</li>
                                                <li>MAG系列</li>
                                                <li>PAG系列</li>
                                                <li>Creator系列</li>
                                                <li>Prestige系列</li>
                                            </ol>
                                        </li>
                                    </ul>
                                </div>
                                <div class="goods_center"></div>
                                <div class="goods_right">
                                    <div class="mac">
                                        <div class="mac_box"></div>
                                    </div>
                                    <div class="pc">
                                        <div class="pc_box"></div>
                                    </div>
                                    <div class="socket">
                                        <div class="socket_box"></div>
                                    </div>
                                    <div class="cpu">
                                        <div class="cpu_box"></div>
                                    </div>
                                    <div class="display">
                                        <div class="display_box"></div>
                                    </div>
                                </div>
                            <!-- </div> -->
                        </div>
                    </li>
                    <li>
                        <a href="characteristic.html">勇者系列</a>
                        <div class="table_list">
                            <div class="list_box"></div>
                        </div>
                    </li>
                    <li>
                        <a href="active.html">活动&促销</a>
                        <div class="table_active">
                           <div class="active_box"></div>
                        </div>
                    </li>
                    <li>
                        <a href="main.html">内容创造</a>
                        <div class="table_main">
                            <div class="main_box"></div>
                        </div>
                    </li>
                    <li>
                        <a href="service.html">客户服务</a>
                    </li>
                    <li>
                        <a href="news.html">新闻</a>
                    </li>
                </ul>
            </div>
            <!-- 小屏下隐藏以上两个盒子，显示下边两个盒子 -->
            <div class="tops_left visible-sm visible-xs">
                <a href="#" class="glyphicon glyphicon-align-justify"></a>
                <a href="#" class="glyphicon glyphicon-remove" style="display:none;"></a>
            </div>
            <div class="tops_logo visible-sm visible-xs">
                <a href="index.html"></a>
            </div>
            <div class="click_menu">
               <div class="menu_box">
                <ul>
                    <li>
                        <em>产品资讯</em>
                        <!-- <em>返回</em> -->
                        <span>
                            <em>返回</em>
                            <ul>
                                <li>
                                    <a href="list.html">笔记本电脑</a>
                                </li>
                                <li>台式电脑</li>
                                <li>电脑显卡</li>
                                <li>电脑主板</li>
                                <li>显示器</li>
                            </ul>
                        </span>
                    </li>
                    <li>
                        <em>勇者系列</em>
                        <span>
                            <em>返回</em>
                            <ul>
                                <li>
                                    <a href="characteristic.html">勇者系列</a>
                                </li>
                            </ul>
                        </span>
                    </li>
                    <li>
                        <em>活动&促销</em>
                        <span>
                            <em>返回</em>
                            <ul>
                                <li>
                                    <a href="active.html">活动</a>
                                </li>
                                <li>促销</li>
                            </ul>
                        </span>
                    </li>
                    <li>
                        <em>内容创造</em>
                        <span>
                            <em>返回</em>
                            <ul>
                                <li>
                                    <a href="main.html">内容</a>
                                </li>
                                <li>创造</li>
                            </ul>
                        </span>
                    </li>
                    <li>
                        <a href="service.html">客户服务</a>
                    </li>
                    <li>
                        <a href="news.html">新闻</a>
                    </li>
                </ul>
               </div>
            </div>
            <div class="top_right">
                <ul>
                    <li><a href="login.html"></a></li>
                    <li><a href="#"></a></li>
                </ul>
            </div>
        </div>
    </header>
    <!-- 主体部分 -->
    <div class="main">
        <div class="row">
            <div class="col-xs-12">
                <h1>LOGIN</h1>
            </div>
        </div>
        <form action="">
            <div class="row">
                <div class="col-xs-12">
                    <h3>电子邮箱</h3>
                </div>
                <div class="email col-xs-12">
                    <input type="text" placeholder="电子邮件">
                </div>
                <div class="col-xs-12">
                    <h3>密码</h3>
                </div>
                <div class="pwd col-xs-12">
                    <input type="password" placeholder="忘记密码">
                </div>
                <div class="col-xs-12">
                    <a href="#">忘记了密码?</a>
                </div>
                <h3 class="col-1 col-xs-12">验证码</h3>
                <div class="pic col-xs-12">
                    <img src="images/securimage_show.png" alt="">
                </div>
                <div class="text col-xs-12">
                    <input type="text" name="" id="count" placeholder="请计算并输入上面图片的答案">
                </div>
                <p class="col-xs-12">请计算并输入图片中的答案</p>
                <div class="link col-xs-12">
                    <button id="btn">
                        <a href="#">登录</a>
                    </button>
                    <a href="register.html">创建账户</a>
                </div>
            </div>
        </form>
        <!-- 底部 版权部分 -->

    </div>
    <footer>
        <!-- 底部上部分 -->
        <div class="footer_top hidden-xs">
            <ol>
                <li>
                    <h2>社区</h2>
                    <ul>
                        <li><a href="#">微星论坛</a></li>
                        <li><a href="#">部落格</a></li>
                        <li><a href="#">媒体平台</a></li>
                        <li><a href="#">影音中心</a></li>
                        <li><a href="#">电竞战队</a></li>
                        <li><a href="#">星光班论坛</a></li>
                        <li><a href="#">Customer Studies</a></li>
                    </ul>
                </li>
                <li>
                    <h2>技术支持</h2>
                    <ul>
                        <li><a href="#">大客户服务</a></li>
                        <li><a href="#">下载中心</a></li>
                        <li><a href="#">会员中心</a></li>
                        <li><a href="#">在线客服</a></li>
                        <li><a href="#">授权代理</a></li>
                        <li><a href="#">服务站点</a></li>
                        <li><a href="#">保修条款</a></li>
                        <li><a href="#">增值服务</a></li>
                    </ul>
                </li>
                <li>
                    <h2>新闻</h2>
                    <ul>
                        <li><a href="#">新闻</a></li>
                        <li><a href="#">获奖荣誉</a></li>

                    </ul>
                </li>
                <li>
                    <h2>媒体</h2>
                    <ul>
                        <li><a href="#">产品目录</a></li>
                        <li><a href="#">壁纸下载</a></li>
                        <li><a href="#">MSI App</a></li>

                    </ul>
                </li>
                <li>
                    <h2>关于微星</h2>
                    <ul>
                        <li><a href="#">微星简介</a></li>
                        <li><a href="#">品牌故事</a></li>
                        <li><a href="#">品质认证</a></li>
                        <li><a href="#">品质标准</a></li>

                    </ul>
                </li>
            </ol>
        </div>
        <!-- 底部上部分小屏显示 -->
        <div class="footers_top visible-xs">
            <ul>
                <li>
                    社区
                    <dl>
                        <dd>微星论坛</dd>
                        <dd>部落格</dd>
                        <dd>媒体平台</dd>
                        <dd>影音中心</dd>
                        <dd>电竞战队</dd>
                        <dd>星光班论坛</dd>
                        <dd>Customer Studies</dd>
                    </dl>
                </li>
                <li>
                    技术支持
                    <dl>
                        <dd>大客户服务</dd>
                        <dd>下载中心</dd>
                        <dd>会员中心</dd>
                        <dd>在线客服</dd>
                        <dd>授权代理</dd>
                        <dd>服务站点</dd>
                        <dd>保修条款</dd>
                        <dd>增值服务</dd>
                    </dl>
                </li>
                <li>
                    新闻
                    <dl>
                        <dd>新闻</dd>
                        <dd>荣誉获奖</dd>
                    </dl>
                </li>
                <li>
                    媒体
                    <dl>
                        <dd>产品目录</dd>
                        <dd>壁纸下载</dd>
                        <dd>MSI App</dd>

                    </dl>
                </li>
                <li>
                    关于微星
                    <dl>
                        <dd>微星简介</dd>
                        <dd>品牌故事</dd>
                        <dd>媒体平台</dd>
                        <dd>品质认证</dd>
                        <dd>品质标准</dd>
                    </dl>
                </li>
            </ul>
        </div>
        <!-- 底部下部分 -->
        <div class="footer_bottom">
            <a href="#">联系我们</a>
            <a href="#">隐私保护权政策</a>
            <a href="#">网站使用条款</a>
        </div>
        <!-- 版权保护 -->
        <div class="copyright">
            <div class="logo"></div>
            Copyright © 2020 版权为微星科技股份有限公司所有 沪ICP备19047683号
        </div>
    </footer>
    <script>
        $('.top_nav > ul > li:first').mousemove(function(){
            $('.table_goods').css({
                height:'400px',
                borderBottom:'4px solid red'
            })
            $('.goods_left ul').show()
        })

        $('.top_nav > ul > li:first').mouseout(function(){
            $('.table_goods').css({
                height:'0px',
                borderBottom:'0px'
            })
            $('.goods_left ul').hide()
        })

        $('.top_nav > ul > li:eq(1)').mousemove(function(){
            $('.table_list').css({
                height:'300px',
                borderBottom:'4px solid red'
            })
        })
        $('.top_nav > ul > li:eq(1)').mouseout(function(){
            $('.table_list').css({
                height:'0px',
                borderBottom:'0px'
            })
        })
        $('.top_nav > ul > li:eq(2)').mousemove(function(){
            $('.table_active').css({
                height:'300px',
                borderBottom:'4px solid red'
            })
        })
        $('.top_nav > ul > li:eq(2)').mouseout(function(){
            $('.table_active').css({
                height:'0px',
                borderBottom:'0px'
            })
        })
        $('.top_nav > ul > li:eq(3)').mousemove(function(){
            $('.table_main').css({
                height:'300px',
                borderBottom:'4px solid red'
            })
        })
        $('.top_nav > ul > li:eq(3)').mouseout(function(){
            $('.table_main').css({
                height:'0px',
                borderBottom:'0px'
            })
        })
        $('.goods_left > ul > li:first').mousemove(function() {
            $('.mac').show()
        })
        $('.goods_left > ul > li:first').mouseout(function() {
            $('.mac').hide()
        })
        $('.goods_left > ul > li:eq(1)').mousemove(function() {
            $('.pc').show()
        })
        $('.goods_left > ul > li:eq(1)').mouseout(function() {
            $('.pc').hide()
        })
        $('.goods_left > ul > li:eq(2)').mousemove(function() {
            $('.socket').show()
        })
        $('.goods_left > ul > li:eq(2)').mouseout(function() {
            $('.socket').hide()
        })
        $('.goods_left > ul > li:eq(3)').mousemove(function() {
            $('.cpu').show()
        })
        $('.goods_left > ul > li:eq(3)').mouseout(function() {
            $('.cpu').hide()
        })
        $('.goods_left > ul > li:eq(4)').mousemove(function() {
            $('.display').show()
        })
        $('.goods_left > ul > li:eq(4)').mouseout(function() {
            $('.display').hide()
        })
        $('.mac').mousemove(function(){
            $(this).show()
            $('.mac_box').css('width','250px')
        })
        $('.mac').mouseout(function(){
            $(this).hide()
            $('.mac_box').css('width','0px')
        })
        $('.pc').mousemove(function(){
            $(this).show()
            $('.pc_box').css('width','250px')
        })
        $('.pc').mouseout(function(){
            $(this).hide()
            $('.pc_box').css('width','0px')
        })
        $('.socket').mousemove(function(){
            $(this).show()
            $('.socket_box').css('width','250px')
        })
        $('.socket').mouseout(function(){
            $(this).hide()
            $('.socket_box').css('width','0px')
        })
        $('.cpu').mousemove(function(){
            $(this).show()
            $('.cpu_box').css('width','250px')
        })
        $('.cpu').mouseout(function(){
            $(this).hide()
            $('.cpu_box').css('width','0px')
        })
        $('.display').mousemove(function(){
            $(this).show()
            $('.display_box').css('width','250px')
        })
        $('.display').mouseout(function(){
            $(this).hide()
            $('.display_box').css('width','0px')
        })
        $('.goods_left > ul > li:eq(0)').mousemove(function(){
            $('.goods_left > ul > li:eq(0) > ol').show()
        })
        $('.goods_left > ul > li:eq(0)').mouseout(function(){
            $('.goods_left > ul > li:eq(0) > ol').hide()
        })
        $('.goods_left > ul > li:eq(1)').mousemove(function(){
            $('.goods_left > ul > li:eq(1) > ol').show()
        })
        $('.goods_left > ul > li:eq(1)').mouseout(function(){
            $('.goods_left > ul > li:eq(1) > ol').hide()
        })
        $('.goods_left > ul > li:eq(2)').mousemove(function(){
            $('.goods_left > ul > li:eq(2) > ol').show()
        })
        $('.goods_left > ul > li:eq(2)').mouseout(function(){
            $('.goods_left > ul > li:eq(2) > ol').hide()
        })
        $('.goods_left > ul > li:eq(3)').mousemove(function(){
            $('.goods_left > ul > li:eq(3) > ol').show()
        })
        $('.goods_left > ul > li:eq(3)').mouseout(function(){
            $('.goods_left > ul > li:eq(3) > ol').hide()
        })
        $('.goods_left > ul > li:eq(4)').mousemove(function(){
            $('.goods_left > ul > li:eq(4) > ol').show()
        })
        $('.goods_left > ul > li:eq(4)').mouseout(function(){
            $('.goods_left > ul > li:eq(4) > ol').hide()
        })
    </script>
    <!-- 小屏菜单 -->
    <script>
        $('.tops_left > a:first').click(function(){
            $('.click_menu').css('width','100%')
            $(this).hide(500)
            $('.tops_left > a:last').show(500)
            // $('.click_menu').show()
        })
        $('.tops_left > a:last').click(function(){
            $('.click_menu').css('width','0')
            $(this).hide(500)
            $('.tops_left > a:first').show(500)
            // $('.click_menu').hide()
        })
        $('.menu_box > ul > li > em').click(function(){
            $(this).siblings('span').addClass('wth1')
        })
        $('.menu_box > ul > li > span > em').click(function(){
            $(this).parent('span').removeClass('wth1')
        })
        // $('.menu_box > ul > li:first').click(function(){
        //     $('.menu_box > ul > li:first span').css('width','100%')
        // })
        // $('.menu_box > ul > li:first em').click(function(){
        //     //  if (flag) {
        //         $('.menu_box > ul > li:first span').addClass('wth')
        //         // flag = false
        //     //  }else {
        //         // $('.menu_box > ul > li:first span').classList.remove('wth')
        //         // flag = true
        //     //  }
        // })

        // $('.menu_box > ul > li:eq(1)').click(function(){
        //     $('.menu_box > ul > li:eq(1) span').css('width','100%')
        // })
        // $('.menu_box > ul > li:eq(1) span em').click(function(){
        //      $('.menu_box > ul > li:eq(1) span').addClass('wth')
        // })

        // $('.menu_box > ul > li:eq(2)').click(function(){
        //     $('.menu_box > ul > li:eq(2) span').css('width','100%')
        // })
        // $('.menu_box > ul > li:eq(2) span em').click(function(){
        //      $('.menu_box > ul > li:eq(2) span').addClass('wth')
        // })

        // $('.menu_box > ul > li:eq(3)').click(function(){
        //     $('.menu_box > ul > li:eq(3) span').css('width','100%')
        // })
        // $('.menu_box > ul > li:eq(3) span em').click(function(){
        //      $('.menu_box > ul > li:eq(3) span').addClass('wth')
        // })
    </script>
    <!-- // 底部论坛手风琴 -->
    <script>
       $('.footers_top > ul > li').mouseenter(function(){
           $(this).stop().animate({
                height:250
           }).find('dl').stop().fadeIn()
           $(this).siblings().stop().animate({
               height:40
           }).find('dl').stop().fadeOut()
       })
    //    $('.footers_top > ul > li:first').mouseenter(function(){
    //     $('.footers_top > ul > li:first dl').show()
    //     $('.footers_top > ul > li:eq(1) dl').hide()
    //     $('.footers_top > ul > li:eq(2) dl').hide()
    //     $('.footers_top > ul > li:eq(3) dl').hide()
    //     $('.footers_top > ul > li:eq(4) dl').hide()
    //    })
    //    $('.footers_top > ul > li:eq(1)').mouseenter(function(){
    //     $('.footers_top > ul > li:first dl').hide()
    //     $('.footers_top > ul > li:eq(1) dl').show()
    //     $('.footers_top > ul > li:eq(2) dl').hide()
    //     $('.footers_top > ul > li:eq(3) dl').hide()
    //     $('.footers_top > ul > li:eq(4) dl').hide()
    //    })
    //    $('.footers_top > ul > li:eq(2)').mouseenter(function(){
    //     $('.footers_top > ul > li:first dl').hide()
    //     $('.footers_top > ul > li:eq(1) dl').hide()
    //     $('.footers_top > ul > li:eq(2) dl').show()
    //     $('.footers_top > ul > li:eq(3) dl').hide()
    //     $('.footers_top > ul > li:eq(4) dl').hide()
    //    })
    //    $('.footers_top > ul > li:eq(3)').mouseenter(function(){
    //     $('.footers_top > ul > li:first dl').hide()
    //     $('.footers_top > ul > li:eq(1) dl').hide()
    //     $('.footers_top > ul > li:eq(2) dl').hide()
    //     $('.footers_top > ul > li:eq(3) dl').show()
    //     $('.footers_top > ul > li:eq(4) dl').hide()
    //    })
    //    $('.footers_top > ul > li:eq(4)').mouseenter(function(){
    //     $('.footers_top > ul > li:first dl').hide()
    //     $('.footers_top > ul > li:eq(1) dl').hide()
    //     $('.footers_top > ul > li:eq(2) dl').hide()
    //     $('.footers_top > ul > li:eq(3) dl').hide()
    //     $('.footers_top > ul > li:eq(4) dl').show()
    //    })
    </script>
</body>

</html>