高考考試資訊介面製作
阿新 • • 發佈：2018-12-10
【一】考試資訊網介面：
程式碼實現：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>考試資訊網</title> <style> .book{ text-align: center; font-style: initial; background-color: aqua; background-size: 100%; } </style> </head> <body> <marquee>資訊查詢網</marquee> <hr> <h1 class="book" >考試資訊</h1> <hr> <h3>高考分數已出來，智慧系統已根據之前您的錄取意願，自動進行了網上報名，現可以查詢到您的考試成績及錄取資訊</h3> <br> <a href="demo8.html">跳轉到考試成績頁面</a> <br> <a href="demo4.html">跳轉到錄取資訊頁面</a> </body> </html>
輸出樣式：
【二】考試成績介面
程式碼實現：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>高考考試成績</title> </head> <script src="js/jquery-3.2.1.min.js"></script> <style> td:hover {background-color: blue; color: white;} </style> <body> <h2 align="center">李小明高考成績</h2> <table border="1" width="100%"> <tbody> <tr> <td>語文</td> <td>數學</td> <td>英語</td> <td>理綜</td> </tr> <tr id="tr"> <td>140</td> <td>134</td> <td>145</td> <td>285</td> </tr> </tbody> <tfoot> <tr> <td colspan="4">總分:704</span></td> </tr> </tfoot> </table> </body> </html>
輸出樣式：
【三】錄取資訊介面
程式碼實現：
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> <title>錄取通知書</title> <style> .book{ width:100%; height:auto; } img{ filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; width:100%; height:auto; position: absolute; } </style> </head> <body style="overflow: scroll;overflow: hidden"> <div class="book"> <img src="qinghua.jpg" alt=""> <marquee>金榜題名時</marquee> <hr> <h1 align="center"> <br> <br> 錄取通知書 </h1> <br> <h2> 親愛的<u>李小明</u>同學： </h2> <br> <h3> 你好！</h3> <hr> <br> <h3> 你被錄取到我校 <u>自動化學院</u> <u> 自動化</u>專業學習，學制四年，請於九月七日至八日憑本通知書來校報到。 </h3> <hr> <br> <br> <br> <br> <h4 align="right">清華大學自動化院</h4> <h4 align="right">日期：2060年8月</h4> </div> </body> </html>
輸出樣式：
主要程式碼：
（1）align="center"----------實現文字居中
（2）<td colspan="4">----------實現列合併
（3）font-style----------字型
（4）background-color----------背景顏色
（5）filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;----------改變背景影象透明度
（6）<a href="demo8.html">跳轉到考試成績頁面</a>-----------實現頁面跳轉
（7）style="overflow: scroll;overflow: hidden"----------不要滾動條
（8）<marquee>金榜題名時</marquee>----------移動字型（走馬燈）