|
2 | 2 | <html xmlns="http://www.w3.org/1999/xhtml"> |
3 | 3 | <head> |
4 | 4 | <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> |
5 | | - <script type="text/javascript" src="apijson.js"></script> |
| 5 | + <script type="text/javascript" language="JavaScript" charset="UTF-8" src="apijson.js" ></script> |
6 | 6 | <title>APIJSON Test</title> |
7 | 7 | <style type="text/css"> |
8 | 8 | html,body,div{ |
|
18 | 18 | margin: 0; |
19 | 19 | padding:0; |
20 | 20 | } |
21 | | - .title{ |
| 21 | + .top{ |
22 | 22 | width: 100%; |
23 | | - height:100px; |
24 | | - margin-top: 2%; |
25 | | - margin-bottom: 2%; |
| 23 | + height:40px; |
| 24 | + padding-left: 2%; |
| 25 | + padding-right: 2%; |
| 26 | + text-decoration-color: aquamarine; |
| 27 | + } |
| 28 | + .title{ |
| 29 | + width: auto; |
| 30 | + height:20px; |
26 | 31 | padding:0; |
| 32 | + text-overline-color: aquamarine; |
27 | 33 | } |
28 | 34 | .center{ |
29 | 35 | width: 100%; |
30 | | - height: 60%; |
| 36 | + height: 68%; |
31 | 37 | margin: 0; |
32 | 38 | padding:0; |
33 | 39 | } |
34 | 40 | .bottom{ |
35 | 41 | width: 100%; |
36 | | - height:50px; |
| 42 | + height:40px; |
37 | 43 | margin: 0; |
38 | 44 | padding:0; |
39 | 45 | } |
40 | 46 | .horizontal{ |
41 | 47 | width: 49%; |
42 | 48 | height:100%; |
43 | 49 | margin: 0; |
44 | | - padding:0; |
| 50 | + padding:auto; |
45 | 51 | } |
46 | 52 | .url{ |
47 | | - width: 75%; |
| 53 | + width: 74%; |
48 | 54 | height:50px; |
49 | 55 | margin: 0; |
50 | | - padding:0; |
51 | 56 | } |
52 | 57 | .button{ |
53 | | - width: 24%; |
| 58 | + width: 20px; |
| 59 | + height:10px; |
| 60 | + margin: 0; |
| 61 | + padding:0; |
| 62 | + } |
| 63 | + .send{ |
| 64 | + width: 25%; |
54 | 65 | height:50px; |
55 | 66 | margin: 0; |
56 | 67 | padding:0; |
|
59 | 70 | </head> |
60 | 71 | <body> |
61 | 72 | <div class="match"> |
62 | | - <h1 class="title" align="center">APIJSON Test</h1> |
| 73 | + <div class="top" aria-orientation="horizontal"> |
| 74 | + <h2 class="title" align="left">APIJSON Test</h2> |
| 75 | + <h2 class="button">Demo</h2> |
| 76 | + <button class="button" align="right">GET</button> |
| 77 | + </div> |
63 | 78 | <div class="center" aria-orientation="horizontal"> |
64 | | - <textarea class="horizontal" height="500px" width="800px" id="input" onkeyup="javascript:onChange()"> |
| 79 | + <textarea class="horizontal" id="input" onkeyup="javascript:onChange()"> |
65 | 80 | { |
66 | 81 | "[]":{ |
67 | 82 | "User":{ |
68 | 83 | "sex":1 |
69 | 84 | } |
70 | 85 | } |
71 | 86 | } |
72 | | - </textarea> |
73 | | - <textarea class="horizontal" height="500px" width="800px" id="output"> |
| 87 | + </textarea> |
| 88 | + <textarea class="horizontal" id="output" readonly> |
74 | 89 | initializing... |
75 | | - </textarea> |
| 90 | + </textarea> |
76 | 91 | </div> |
77 | 92 | <div class="bottom" aria-orientation="horizontal"> |
78 | 93 | <input class="url" type="text" placeholder="input url here" id="url" /> |
79 | | - <button class="button" id="ok" onclick="javascript:send()">Send</button> |
| 94 | + <button class="send" id="ok" onclick="javascript:send()">Send</button> |
80 | 95 | </div> |
81 | 96 | </div> |
82 | | -<script > |
| 97 | +<script type="text/javascript" language="JavaScript" charset="UTF-8" > |
83 | 98 | var input = document.getElementById("input"); |
84 | 99 | var output = document.getElementById("output"); |
85 | 100 | var url = document.getElementById("url"); |
|
0 commit comments