系统前端页头和页尾代码

页头

<!-- 头部 start -->

<script src="js/getParameter.js"></script>
<script>
    $(function () {
    //查询用户信息
       $.get("findUserServlet",{},function (data) {
           //{uid:1,name:'李四'}
           var msg = "欢迎回来,"+data.name;
           $("#span_username").html(msg);
       });
    });

    //查询分类数据
    $.get("category/findAll",{},function (data){
       //[cid:i,cname:国内游,{},{}]
       var lis='<li class="nav-active"><a href="index.html">首页</a></li>';
       //遍历数组,拼接字符串(<li>)
       for(var i=0;i<data.length;i++){
        var li='<li><a href="route_list.html?cid='+data[i].cid+'">'+data[i].cname+'</a></li>';

        lis+=li;
       }

       //拼接收藏排行榜的li
       lis+='<li><a href="favoriterank.html">收藏排行榜</a></li>';

       //将lis字符串设置到ul的html内容中
       $("#category").html(lis);
    });

    //给搜索按钮绑定单击事件,获取搜索输入框的内容
    $("#search-button").click(function(){
        //线路名称
        var rname=$("#search_input").val();

        var cid=getParameter("cid");

        //跳转路径
        location.href="http://localhost/travel/route_list.html?cid="+cid+"&rname="+rname;
    });

</script>

<header id="header">
    <div class="top_banner">
        <img src="images/topbanner.jpg" alt="">
    </div>
    <div class="shortcut">
        <!-- 未登录状态  -->
        <div class="login_out">
            <a href="login.html">登录</a>
            <a href="register.html">注册</a>
        </div>
        <!-- 登录状态  -->
        <div class="login">

            <span id="span_username"></span>
<!--            <a href="myfavorite.html" class="collection">我的收藏</a>-->
            <a href="javascript:location.href='exitServlet';">退出</a>
        </div>
    </div>
    <div class="header_wrap">
        <div class="topbar">
            <div class="logo">
                <a href="/"><img src="images/logo.jpg" alt=""></a>
            </div>
            <div class="search">
                <input name="" id="search_input" type="text" placeholder="请输入路线名称" class="search_input" autocomplete="off">
                <a href="javascript:;" id="search-button" class="search-button">搜索</a>
            </div>
            <div class="hottel">
                <div class="hot_pic">
                    <img src="images/hot_tel.jpg" alt="">
                </div>
                <div class="hot_tel">
                    <p class="hot_time">客服热线(9:00-6:00)</p>
                    <p class="hot_num">400-618-9090</p>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- 头部 end -->
<!-- 首页导航 -->
<div class="navitem">
    <ul id="category1" class="nav">
        <li class="nav-active"><a href="index.html">首页</a></li>
        <li ><a href="1.html">评估范围</a></li>
        <li ><a href="2.html">评估指标</a></li>
        <li ><a href="3.html">术语和定义</a></li>
        <li ><a href="4.html">评估实施</a></li>
        <li ><a href="5.html">评估结果</a></li>
<!--        <li><a href="table_information.html">基本信息评估卡</a></li>-->
<!--        <li><a href="table_A.html">老年人能力评估表—A</a></li>-->
<!--        <li><a href="table_B.html">老年人能力评估表—B</a></li>-->
<!--        <li><a href="table_C.html">老年人能力评估表—C</a></li>-->
<!--        <li><a href="table_D.html">附录D</a></li>-->
    </ul>
</div>

页尾

<!-- 尾部 start-->
<footer id="footer">
    <div class="why_select">
        <dl>
            <dt class="fl">
                <img src="../../../../../hmday25/day25_综合案例1.1/代码/travel/src/main/webapp/images/icon_1.jpg" alt="">
            </dt>
            <dd>
                <h1>认知评估</h1>
                <h2>全面了解老年人的认知能力,精准评估</h2>
            </dd>
        </dl>
        <dl>
            <dt class="fl">
                <img src="../../../../../hmday25/day25_综合案例1.1/代码/travel/src/main/webapp/images/icon_2.jpg" alt="">
            </dt>
            <dd>
                <h1>身体健康评估</h1>
                <h2>评估老年人的体能状况,助力健康管理</h2>
            </dd>
        </dl>
        <dl>
            <dt class="fl">
                <img src="../../../../../hmday25/day25_综合案例1.1/代码/travel/src/main/webapp/images/icon_3.jpg" alt="">
            </dt>
            <dd>
                <h1>心理健康评估</h1>
                <h2>关注老年人的心理状态,提供科学分析</h2>
            </dd>
        </dl>
        <dl>
            <dt class="fl">
                <img src="../../../../../hmday25/day25_综合案例1.1/代码/travel/src/main/webapp/images/icon_4.jpg" alt="">
            </dt>
            <dd style="margin-right:0px;">
                <h1>生活能力评估</h1>
                <h2>评估日常生活能力,确保老年人独立生活</h2>
            </dd>
        </dl>
    </div>
    <div class="company">
        <p>石家庄铁道大学软件工程 2024寒假作业</p>
    </div>
</footer>
<!-- 尾部 end-->
posted @   呓语-MSHK  阅读(3)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示