实现综合案例的注册、登录和跳转到主页面的功能

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

<head>
    <meta charset="UTF-8">
    <title>首页面</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <!-- <link rel="shortcut icon" href="./favicon.ico"> -->
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
    <script>
        // 检测 userAgent(浏览器信息)
        !(function() {
            const userAgent = navigator.userAgent

            // 验证是否为Android或iPhone
            const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
            const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)

            // 如果是Android或iPhone,则跳转至移动站点
            if (android || iphone) {
                location.href = 'https://cn.bing.com/'
            }

        })()
    </script>
</head>

<body>
    <!-- 项部导航 -->
    <div class="xtx_topnav">
        <div class="wrapper">
            <!-- 顶部导航 -->
            <ul class="xtx_navs">
                <li>
                    <a href="./login.html">请先登录</a>
                </li>
                <li>
                    <a href="./register.html">免费注册</a>
                </li>
                <li>
                    <a href="./center-order.html">我的订单</a>
                </li>
                <li>
                    <a href="./center.html">会员中心</a>
                </li>
                <li>
                    <a href="javascript:;">帮助中心</a>
                </li>
                <li>
                    <a href="javascript:;">在线客服</a>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="mobile sprites"></i> 手机版
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 头部 -->
    <div class="xtx_header">
        <div class="wrapper">
            <!-- 网站Logo -->
            <h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>
            <!-- 主导航 -->
            <div class="xtx_navs">
                <ul class="clearfix">
                    <li>
                        <a href="./index.html">首页</a>
                    </li>
                    <li>
                        <a href="./category01.html">生鲜</a>
                    </li>
                    <li>
                        <a href="./category01.html">美食</a>
                    </li>
                    <li>
                        <a href="./category01.html">餐厨</a>
                    </li>
                    <li>
                        <a href="./category01.html">电器</a>
                    </li>
                    <li>
                        <a href="./category01.html">居家</a>
                    </li>
                    <li>
                        <a href="./category01.html">洗护</a>
                    </li>
                    <li>
                        <a href="./category01.html">孕婴</a>
                    </li>
                    <li>
                        <a href="./category01.html">服装</a>
                    </li>
                </ul>
            </div>
            <!-- 站内搜索 -->
            <div class="xtx_search clearfix">
                <!-- 购物车 -->
                <a href="./cart-none.html" class="xtx_search_cart sprites">
                    <i>2</i>
                </a>
                <!-- 搜索框 -->
                <div class="xtx_search_wrapper">
                    <input type="text" placeholder="搜一搜" onclick="location.href='./search.html'">
                </div>
            </div>
        </div>
    </div>
    <!-- 分类及焦点图 -->
    <div class="xtx_entry">
        <div class="wrapper">
            <!-- 分类 -->
            <div class="xtx_category">
                <!-- 顶级分类 -->
                <ul class="xtx_category_super">
                    <li>
                        <a href="javascript:;">
              生鲜
              <small>水果</small>
              <small>蔬菜</small>
            </a>
                        <i class="sprites"></i>
                    </li>
                    <li class="active">
                        <a href="javascript:;">
              美食
              <small>面点</small>
              <small>干果</small>
            </a>
                        <i class="sprites"></i>
                    </li>
                    <li>
                        <a href="javascript:;">
              电器
              <small>数码产品</small>
            </a>
                        <i class="sprites"></i>
                    </li>
                    <li>
                        <a href="javascript:;">
              居家
              <small>床品</small>
              <small>四件套</small>
              <small>被枕</small>
            </a>
                        <i class="sprites"></i>
                    </li>
                    <li>
                        <a href="javascript:;">
              洗护
              <small>洗发洗护</small>
              <small>美妆</small>
            </a>
                        <i class="sprites"></i>
                    </li>
                    <li>
                        <a href="javascript:;">
              孕婴
              <small>奶粉</small>
              <small>玩具</small>
              <small>辅食</small>
            </a>
                        <i class="sprites"></i>
                    </li>
                    <li>
                        <a href="javascript:;">
              餐橱
              <small>数码产品</small>
            </a>
                        <i class="sprites"></i>
                    </li>
                    <li>
                        <a href="javascript:;">
              服饰
              <small>女装</small>
              <small>男装</small>
            </a>
                        <i class="sprites"></i>
                    </li>
                    <li>
                        <a href="javascript:;">
              杂货
              <small>户外</small>
              <small>图书</small>
            </a>
                        <i class="sprites"></i>
                    </li>
                    <li>
                        <a href="javascript:;">
              品牌
              <small>品牌制造</small>
            </a>
                        <i class="sprites"></i>
                    </li>
                </ul>
                <!-- 子分类 -->
                <div class="xtx_category_subset">

                </div>
            </div>
            <!-- 焦点图 -->
            <div class="xtx_banner">

                <ul>
                    <li>
                        <a href="javascript:;">
                            <img src="./uploads/banner_1.png" alt="">
                        </a>
                    </li>
                </ul>
                <!-- 切换按钮  -->
                <a href="javascript:;" class="prev sprites"></a>
                <a href="javascript:;" class="next sprites"></a>
                <!-- 指示器 -->
                <div class="indicator">
                    <span></span>
                    <span></span>
                    <span class="active"></span>
                    <span></span>
                    <span></span>
                </div>

            </div>
        </div>
    </div>
    <!-- 新鲜好物 -->
    <div class="xtx_goods_new xtx_panel">
        <div class="wrapper">
            <!-- 面板头部 -->
            <div class="xtx_panel_header">
                <h3>新鲜好物<small>新鲜出炉 品质靠谱</small></h3>
                <a href="./index-new.html" class="more">
          查看全部<i class="sprites"></i>
        </a>
            </div>
            <!-- 商品列表 -->
            <div class="xtx_panel_goods_1">
                <a href="javascript:;">
                    <img src="./uploads/new_goods_1.jpg" alt="">
                    <span class="name">睿米无线吸尘器F8</span>
                    <span class="price"><small>¥</small>899</span>
                </a>
                <a href="javascript:;">
                    <img src="./uploads/new_goods_2.jpg" alt="">
                    <span class="name">智能环绕3D空调</span>
                    <span class="price"><small>¥</small>1299</span>
                </a>
                <a href="javascript:;">
                    <img src="./uploads/new_goods_3.jpg" alt="">
                    <span class="name">广东软软糯米煲仔饭</span>
                    <span class="price"><small>¥</small>129</span>
                </a>
                <a href="javascript:;">
                    <img src="./uploads/new_goods_4.jpg" alt="">
                    <span class="name">罗西机械智能手表</span>
                    <span class="price"><small>¥</small>3399</span>
                </a>
            </div>
        </div>
    </div>
    <!-- 人气推荐 -->
    <div class="xtx_goods_popular xtx_panel">
        <div class="wrapper">
            <!-- 面板头部 -->
            <div class="xtx_panel_header">
                <h3>人气推荐<small>人气爆款 不容错过</small></h3>
            </div>
            <!-- 商品列表 -->
            <div class="xtx_panel_goods_1">
                <a href="javascript:;">
                    <img src="./uploads/popular_1.jpg">
                    <span class="title">特惠推荐</span>
                    <span class="alt">我猜得到 你的需要</span>
                </a>
                <a href="./index-hot.html">
                    <img src="./uploads/popular_2.jpg">
                    <span class="title">爆款推荐</span>
                    <span class="alt">人气好物推荐</span>
                </a>
                <a href="./index-one.html">
                    <img src="./uploads/popular_3.jpg">
                    <span class="title">场景使用一站买全</span>
                    <span class="alt">编辑精心整理推荐</span>
                </a>
                <a href="javascript:;">
                    <img src="./uploads/popular_4.jpg">
                    <span class="title">领券中心</span>
                    <span class="alt">发现更多超值优惠券</span>
                </a>
            </div>
        </div>
    </div>
    <!-- 热门品牌 -->
    <div class="xtx_goods_brand xtx_panel">
        <div class="wrapper">
            <div class="xtx_panel_header">
                <h3>热门品牌<small>国际经典 品质保证</small></h3>
                <div class="page-bar">
                    <a href="javascript:;" class="prev sprites"></a>
                    <a href="javascript:;" class="next sprites active"></a>
                </div>
            </div>
            <!-- 商品列表 -->
            <div class="xtx_goods">
                <ul>
                    <li>
                        <a href="./index-brand.html">
                            <img src="./uploads/brand_goods_1.jpg" alt="">
                        </a>
                        <a href="./brand-list.html">
                            <img src="./uploads/brand_goods_2.jpg" alt="">
                        </a>
                        <a href="javascript:;">
                            <img src="./uploads/brand_goods_3.jpg" alt="">
                        </a>
                        <a href="javascript:;">
                            <img src="./uploads/brand_goods_4.jpg" alt="">
                        </a>
                        <a href="javascript:;">
                            <img src="./uploads/brand_goods_5.jpg" alt="">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 分类商品 -->
    <div class="xtx_goods_category xtx_panel">
        <div class="wrapper">
            <!-- 生鲜 -->
            <div class="xtx_panel_header">
                <h3>生鲜</h3>
                <a href="javascript:;" class="more">
          查看全部<i class="sprites"></i>
        </a>
                <div class="tabs-bar">
                    <a href="javascript:;" class="active">水果</a>
                    <a href="javascript:;">蔬菜</a>
                    <a href="javascript:;">肉禽蛋</a>
                    <a href="javascript:;">裤装</a>
                    <a href="javascript:;">衬衫</a>
                    <a href="javascript:;">内衣</a>
                </div>
            </div>
            <!-- 商品列表 -->
            <div class="xtx_panel_goods_2">
                <ul class="clearfix">
                    <li>
                        <a href="javascript:;">
                            <img src="./uploads/fresh_goods_cover.jpg" alt="">
                        </a>
                        <div class="label">
                            <span>生鲜馆</span>
                            <span>全场3件8折</span>
                        </div>
                    </li>
                    <li>
                        <!-- 商品图片 -->
                        <a href="javascript:;">
                            <div class="img-box">
                                <img src="./uploads/fresh_goods_1.jpg" alt="">
                            </div>
                        </a>
                        <!-- 商品信息 -->
                        <div class="meta">
                            <p class="name">美威 智利原味三文鱼排 240g/袋 4片装</p>
                            <p class="flag">海鲜年货</p>
                            <p class="price"><small>¥</small>59</p>
                        </div>
                        <!-- 其它 -->
                        <div class="extra">
                            <a href="javascript:;">
                                <span>找相似</span>
                                <span>发现现多宝贝&gt;</span>
                            </a>
                        </div>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="img-box">
                                <img src="./uploads/fresh_goods_2.jpg" alt="">
                            </div>
                        </a>
                        <div class="meta">
                            <p class="name">红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只</p>
                            <p class=
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值