第五天

可视化页面的设计（三）

页面设计代码

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

<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>输入提示后查询</title>
    <link rel="stylesheet" href="./css/index.css">
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=99e8165b38a7b852e95b9c4f710c9a74&plugin=AMap.CitySearch,AMap.AutoComplete,AMap.PlaceSearch"></script>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>

</head>

<body>
    <div class="header">
        <h1>头部区域</h1>
        <p>重置浏览器大小查看效果。</p>
    </div>
    <div class="row">
        <div class="column left" align="center">
            <h2>左侧栏</h2>
            <p>牛客教程 - 学的不仅是技术，更是梦想！</p>
                <form name="form" id="form" method="POST" action="nowtable.jsp">
        <input type="hidden" name="nowcity" id="nowcity">
    </form>
            <div class="middle1">
                <div class="cirqueBox">
                    <div class="cirqueRed"></div>
                    <div class="cirqueGrey"></div>
                </div>
            </div>

            <div class="middle4" align="center">
                <div id="panel"></div>
            </div>

        </div>
        <div id="container" class="column middle"></div>
        <div id="myPageTop" class="column right" align="center">
            <table align="center">
                <tr>
                    <h3>搜索</h3>
                    <td>
                        <input id="tipinput" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input id="tipinput3">
                        <button id="clickOn" style="margin-right:1rem;">搜索</button>
                    </td>
                </tr>

            </table>

            <div class="middle2" id="middle2">
                <iframe  height="750px" width="90%" id="IFeditValue" name ="IFeditValue"></iframe>
                <input id ="childin" type="hidden" value="故宫">
                <script>

                </script>
            </div>

        </div>
    </div>
    <div class="info">
        <p id='info'></p>
    </div>
    <script type="text/javascript" src="./js2/index.js"></script>

</body>

</html>

css和js都在外部，分开文件写，可以让html代码更加整洁。

posted @ 2021-04-28 17:55  韦德·沃兹  阅读(65)  评论(0)    收藏  举报