综合案例 跳转到主页面（index）

最新推荐文章于 2023-04-01 08:02:40 发布
最新推荐文章于 2023-04-01 08:02:40 发布
阅读量677 收藏
点赞数
分类专栏： JS作业 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59219560/article/details/125212546
版权 
<!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=
最低0.47元/天 解锁文章
默言800
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
登录界面的实现
weixin_53758688的博客
05-30 1708
<!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"> <!-- &.
用Android stdio 实现BMI指数计算及页面跳转显示.zip
12-10
在Android开发中，BMI...同时，这也是一个实际的案例，能够帮助开发者理解如何将理论知识应用到实际开发中。在实际的项目中，可能还需要考虑错误处理、数据验证、UI美化等方面，但这个基础版本已经足够让初学者入门。
Vue实现自动化平台（二）--实现登录页面&首页
喵酱
04-01 7803
Vue实现自动化平台（二）
登录功能的实现（包括前后端）
_Kiwi_berry的博客
08-10 2万+
登录功能对于前端刚入门不久的我来说较为困难，花了很久查阅了许多资料。代码部分涉及的技术栈和细节也很多。过了一段时间来看，发现对自己写的代码竟然感觉十分陌生，故想写篇博客，对整个过程进行梳理。方便自己重看代码，同时也希望能帮到在实现这一功能受阻的程序猿们o(￣▽￣)ブ前端验证用户输入是否符合规范前端调用后端登录接口，向后端发起登录请求后端收到请求，查验数据库种是否有相应账号以及密码是否正确验证通过后，将成功信息连同token一起发送给前端。...................................
一个简单的登录页面实现
qq_43717065的博客
04-11 2474
一、页面效果 1、密码登录 2、手机号验证码登录 3、修改密码 二、代码 这里只给出了页面实现的代码，具体的前端发送请求，后台接口的代码可以到github上克隆下来。 目录结构： index.js import { useState } from 'react'; import { Link, useHistory } from 'react-router-dom'; import { Form, Button, message, Tabs, Checkbox, Row, Col } from "a
如何实现登录页
weixin_49431241的博客
10-31 1104
针对已下载好脚手架的 在 src 目录下新建一个 views 文件夹 views 目录下创建一个 登录页的页面(login.vue) ** 1.1 配置路由** 在 src 目录下创建一个 router 文件夹 配置路由 在router 目录下创建一个 index.js 配置路由 **在 1.2 main.js 中引入 路由 ** 1.3 在 App.vue 中映射组件** 在 2 login.vue 中写登录页的结构 ** 2.1 使用 Element 框架中的 Form 表单 主要是添加
好看的网站跳转页面.zip
04-20
这个源码适用于那些希望创建一个简洁而吸引人的过渡页面，用于引导访客前往其主站点或其他特定页面的人。 【描述】中提到的源码是一个单页HTML结构，这意味着整个网页的布局和内容都集中在一个HTML文件——"index....
网站密码访问单页-自定义密码跳转页面
03-20
在这个案例中，我们有style.css（样式表）、index.html（主网页文件）以及可能包含设置和逻辑的新建文本文档.txt。下载这些文件后，你需要确保它们完整且无误。 其次，将源码**上传到服务器**是必要的步骤。你可以...
新手vue构建单页面应用实例代码
08-29
Vue构建单页面应用实例代码详解 本篇文章主要介绍了新手vue构建单页面应用实例代码的实现过程，通过一步步的指导，帮助读者快速入门Vue.js框架，并构建一个功能完整的单页面应用程序。 目录结构 在构建单页面应用...
漂亮的设计行业作品案例单页跳转模板_墨绿色漂亮设计个性博客设计师行业作品案例单面跳转专题html5.rar
最新发布
09-12
标题中的“漂亮的设计行业作品案例单页跳转模板”指的是一个专门为设计行业打造的、用于展示作品案例的单页面模板。这种模板通常包含简洁而吸引人的布局，方便用户快速浏览和跳转到不同的设计作品。单页跳转设计强调...
一个简单美观的登录界面
03-09
用html、JS、css写的一个登录界面的网页。 可以进行用户名、密码判断；界面跳转。 当然，该例子主要是展示css对页面的美化效果。
登陆界面功能的实现
Cisyam_的博客
06-26 839
简单模拟qq登录功能
简约风 登录页面
qq_52046856的博客
11-22 1945
一个简单的登录页面，写写改改练练手，没有复杂的逻辑，用了HTML和CSS写页面和样式，通过JavaScript实现点击按钮切换状态。
QT-登录界面的实现
qq_55914897的博客
09-15 4127
​ 创建一个窗体，设计用户登录的界面（含有用户名、密码），并实现用户登录的功能，要求用户提交的登录按钮时能获取界面中的用户名、密码数据并与数据库中的数据进行匹配，若用户名，密码正确则登录成功，否则登录失败。
Spring Boot基础学习之(六）:前后端交互实现用户登录界面
m0_52479012的博客
03-29 3015
如何通过前端交互：实现用户登录界面？
【java实现简单的登录界面】
热门推荐
ZERO_HOPE的博客
01-26 3万+
我们可以用java实现简单的登录界面。
分享好看实用的登陆页面一【附源码】
小魏快起床的博客
11-28 2506
我们经常会做网页设计，而登录功能是必不可少的，所以登录页面就至关重要了，有一个好看的页面能让人眼前一亮，下面为大家推荐一个登录页面
简单实现用户登录页面（课工场JavaWeb学习1）
boring_fish的博客
05-15 2620
JavaWeb简单的登录界面
实现一个简单的登录页面
小丞同学
04-10 1万+
利用ajax实现一个简单的登录页面
java中跳转到主页面
06-09
在Java中跳转到主页面需要使用GUI框架，比如Swing或JavaFX。以下是使用JavaFX框架实现跳转到主页面的示例代码： ``` import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.StackPane; import javafx.stage.Stage; public class Main extends Application { @Override public void start(Stage primaryStage) throws Exception { // 创建主页面 StackPane root = new StackPane(); Button button = new Button("跳转到子页面"); root.getChildren().add(button); // 跳转到子页面的事件处理 button.setOnAction(event -> { ChildPage childPage = new ChildPage(); Scene scene = new Scene(childPage.getRoot(), 400, 300); primaryStage.setScene(scene); }); // 设置主页面的场景 Scene scene = new Scene(root, 400, 300); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } } class ChildPage { private StackPane root; public ChildPage() { // 创建子页面 root = new StackPane(); Button button = new Button("返回主页面"); root.getChildren().add(button); // 返回主页面的事件处理 button.setOnAction(event -> { Stage stage = (Stage) root.getScene().getWindow(); stage.close(); }); } public StackPane getRoot() { return root; } } ``` 上述代码中，首先创建了主页面的场景，并将其设置为当前舞台的场景。然后，为主页面上的按钮添加了跳转到子页面的事件处理。当按钮被点击时，创建子页面的场景并将其设置为当前舞台的场景。在子页面中，为返回主页面的按钮添加了事件处理，当按钮被点击时，关闭当前舞台即可返回到主页面。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值