将html网页改成jsp

来源:互联网 发布:随身wifi网络不稳定 编辑:程序博客网 时间:2024/05/28 22:08

在使用jQuery mobile写了手机网页之后,需要改成jsp。一般正常显示的html(静态)页面是可以直接改成jsp页面的,然后放在容器(tomcat)里面运行,访问地址,就能正常显示了。

将html 页面改成jsp,直接修改,要不在新建一个jsp文件。主要都需要在页面最顶端添加如下的:

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>

注意:charset=utf-8指的是此jsp处理完后输出到浏览器的内容的编码方式为GB18030,而pageEncoding="utf-8" 就是设置从jsp文件到java文件的编码方式。

下面是使用jQuery mobile写的积分商城的界面:


代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" rel="stylesheet" href="jquery.mobile-1.4.5.min.css">
    <script src="jquery-2.1.3.min.js"></script>
    <script src="jquery.mobile-1.4.5.min.js"></script>
    <title></title>
</head>
<body>
<div data-role="page" id="pageone">
    <div data-role="header">
        <a href="#" data-role="button" data-icon="back">返回</a>


        <h1>积分商城</h1>
    </div>
    <div data-role="content">
        <div class="ui-grid-b">
            <div class="ui-block-a" style="border: 0px solid black;"><span>用户:mm</span></div>
            <div class="ui-block-b" style="border: 0px solid black;"><span></span></div>
            <div class="ui-block-c" style="border: 0px solid black;"><span></span></div>
            <div class="ui-block-a" style="border: 0px solid black;"><span>积分: 200</span></div>
            <div class="ui-block-b" style="border: 0px solid black;"><span></span></div>
            <div class="ui-block-c" style="border: px solid black;">
                <span><a data-role="text">积分规则</a></span>
            </div>
        </div>
        <ul data-role="listview" data-inset="true" data-split-theme="e">
            <li data-role="divider" data-theme="a">礼品商城:</li>
            <li>
                <a href="#">
                    <img src="img/lw2.jpg">


                    <h2>积分400</h2>


                    <p>Google Chrome 是一款免费的开源浏览器。发布于 2008 年。</p>


                    <p>查看我</p>


                    <p class="ui-li-aside">Re: Appointment</p>
                </a>
                <a href="#download" data-rel="dialog" data-transition="pop">下载浏览器</a>
            </li>
            <li>
                <a href="#">
                    <img src="img/lw1.jpg">


                    <h2>积分400</h2>


                    <p>Google Chrome 是一款免费的开源浏览器。发布于 2008 年。</p>


                    <h2>点击我</h2>


                </a>
                <a href="#download" data-rel="dialog" data-transition="pop">下载浏览器</a>
            </li>
            <li>
                <a href="#">
                    <img src="img/lw3.jpg">


                    <h2>积分400</h2>


                    <p>Google Chrome 是一款免费的开源浏览器。发布于 2008 年。</p>


                    <h2>点击我</h2>
                </a>
                <a href="#download" data-rel="dialog" data-transition="pop">下载浏览器</a>
            </li>


            <li>
                <a href="#">
                    <img src="img/lw2.jpg">


                    <h2>积分400</h2>


                    <p>Google Chrome 是一款免费的开源浏览器。发布于 2008 年。</p>


                    <h2>点击我</h2>
                </a>
                <a href="#download" data-rel="dialog" data-transition="pop">下载浏览器</a>
            </li>
            <li>
                <a href="#">
                    <img src="img/lw4.jpg">


                    <h2>积分400</h2>


                    <p>Google Chrome 是一款免费的开源浏览器。发布于 2008 年。</p>


                    <h2>点击我</h2>
                </a>
                <a href="#download" data-rel="dialog" data-transition="pop">下载浏览器</a>
            </li>
        </ul>
    </div>
</div>

</body>
</html>



0 0
原创粉丝点击