第五天
可视化页面的设计(三)
页面设计代码
<%@ 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代码更加整洁。

浙公网安备 33010602011771号