前端大作业(期末复习)

超、凢脫俗 2021-12-11 15:09 342阅读 0赞
  1. <html>
  2. <title>小练习</title>
  3. <head>
  4. <style>
  5. .shangmian{
  6. width:100% ;
  7. height:20% ;
  8. background-size:cover ;
  9. background-image:url(1.jpeg);
  10. }
  11. .title{
  12. font-size:50px ;
  13. color:#AACECF;
  14. }
  15. .menu {
  16. align:center;
  17. width:20%;
  18. height:70% ;
  19. background-color:#095B66;
  20. }
  21. .op{
  22. border:solid ;
  23. margin:10 ;
  24. background-color:#E6D70C ;
  25. width:200px ;
  26. height:30px ;
  27. font-color:#CD0CE6 ;
  28. }
  29. .int{
  30. position:absolute ;
  31. top:150px ;
  32. left:300px ;
  33. padding:10px ;
  34. }
  35. .in {
  36. margin:10 ;
  37. }
  38. .table {
  39. position:absolute ;
  40. top:200px ;
  41. left:300 ;
  42. border:1px ;
  43. margin:10 ;
  44. }
  45. #ta{
  46. margin:10px ;
  47. border-collapse:collapse ;
  48. width:1000px;
  49. }
  50. #ta th,#ta td{
  51. border:solid 1px ;
  52. width:20% ;
  53. padding: 3px;
  54. text-align:center ;
  55. }
  56. .bu{
  57. margin:10 ;
  58. }
  59. </style>
  60. </head>
  61. <body>
  62. <div class="shangmian" align="center">
  63. <p class="title"> 优乐影院管理系统</p>
  64. </div>
  65. <div class="menu" align=center>
  66. <button class="op">查询剧目信息</button><p>
  67. <button class="op">查询用户信息</button></p><p>
  68. <button class="op">查询演出计划</button></p><p>
  69. <button class="op">查询演出票</button></p>
  70. </div>
  71. <div class="int">
  72. <label>片名:</label>
  73. <input type="text" class="in"></input>
  74. <label>编号:</label>
  75. <input type="text" class="in"></input>
  76. <label>演出厅:</label>
  77. <input type="text" class="in"></input>
  78. <label>国家:</label>
  79. <select name="select" class="in" value="软件1704">
  80. <option>US</option>
  81. <option>CN</option>
  82. <option>CN_HK</option>
  83. <option>UK</option>
  84. <option>JP</option>
  85. </select>
  86. <button>添加</button>
  87. <button>取消</button>
  88. </div>
  89. <div><hr color=black></div>
  90. <div class="table">
  91. <table id="ta">
  92. <tr class="Tr">
  93. <th>
  94. 片名
  95. </th>
  96. <th>
  97. 编号
  98. </th>
  99. <th>
  100. 演出厅
  101. </th>
  102. <th>
  103. 国家
  104. </th>
  105. <td>操作</td>
  106. </tr>
  107. <tr>
  108. <td>蜘蛛侠-英雄使命</td>
  109. <td></td>
  110. <td>0002</td>
  111. <td>US</td>
  112. <td><button>删除</button><button>修改</button></td>
  113. </tr>
  114. <tr>
  115. <td>蜘蛛侠-英雄使命</td>
  116. <td></td>
  117. <td>0002</td>
  118. <td>US</td>
  119. <td><button>删除</button><button>修改</button></td>
  120. </tr>
  121. <tr>
  122. <td>蜘蛛侠-英雄使命</td>
  123. <td></td>
  124. <td>0002</td>
  125. <td>US</td>
  126. <td><button>删除</button><button>修改</button></td>
  127. </tr>
  128. <tr>
  129. <td>蜘蛛侠-英雄使命</td>
  130. <td></td>
  131. <td>0002</td>
  132. <td>US</td>
  133. <td><button>删除</button><button>修改</button></td>
  134. </tr>
  135. <tr>
  136. <td>蜘蛛侠-英雄使命</td>
  137. <td></td>
  138. <td>0002</td>
  139. <td>US</td>
  140. <td><button>删除</button><button>修改</button></td>
  141. </tr>
  142. <tr>
  143. <td>蜘蛛侠-英雄使命</td>
  144. <td></td>
  145. <td>0002</td>
  146. <td>US</td>
  147. <td><button>删除</button><button>修改</button></td>
  148. </tr>
  149. <tr>
  150. <td>蜘蛛侠-英雄使命</td>
  151. <td></td>
  152. <td>0002</td>
  153. <td>US</td>
  154. <td><button>删除</button><button>修改</button></td>
  155. </tr>
  156. </table>
  157. <p align=center><button>1</button><button>2</button><button>3</button><button>4</button><button>...</button></p>
  158. </div>
  159. <div align=center class="info"><p>联系方式:88888888 QQ:99999999 姓名:CK</p><div>
  160. </body>
  161. </html>

在这里插入图片描述

发表评论

表情:
评论列表 (有 0 条评论,342人围观)

还没有评论,来说两句吧...

相关阅读

    相关 数据基础期末复习

    1. 大数据概念、大数据的性质、大数据技术概述、大数据应用趋势与应用实例 大数据5V,结构化非结构化半结构化数据,大数据处理过程图1-5,大数据的技术特征。 答:Volum

    相关 java 期末复习

    知识点总结: [Java基础知识总结][Java] [Java知识点汇总][Java 1] [Java基础知识总结(博客园)][Java 2] 百度文库: [http

    相关 【操作系统】期末复习

    第一章 引论 1.了解系统硬件组织,理解软件的层次结构与虚拟机的概念;P4 2.掌握操作系统的定义,了解系统的形成和发展; 定义:用以控制和管理系统资源,方便用户使用计算