html---css小练习（1）

一时失言乱红尘 2022-02-24 12:44 277阅读 0赞

预览效果图：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70

代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>homework1-1</title>
  6.     <meta charset="utf-8" />
  8.     <!--内部样式引用CSS-->
  9.     <style type="text/css">
  10.         table {
  11.             border-color: #11dc2e;
  12.         }
  14.         .red-color {
  15.             font-weight: 700;
  16.         }
  18.             .red-color td {
  19.                 text-align: center;
  20.             }
  23.         .blue-color {
  24.             color: #0b78ef;
  25.             font-weight: 700;
  26.         }
  28.         td.right {
  29.             text-align: right;
  30.         }
  31.     </style>
  33. </head>
  34. <body>
  36.     <center>
  37.         <div>
  38.             <h2>Global Co.Ltd.</h2>
  39.             <h2>Sale Report</h2>
  40.         </div>
  41.         <div>
  42.             <table border="1" width="800" cellspacing="0" cellpadding="5" align="center">
  43.                 <tr class="head">
  44.                     <td colspan="8" align="center"><h3>Items Sold August 2016</h3></td>
  45.                 </tr>
  46.                 <tr>
  47.                     <td></td>
  48.                     <td></td>
  49.                     <td colspan="3" align="center">Clothes</td>
  50.                     <td colspan="4" align="center">Accessories</td>
  51.                 </tr>
  52.                 <tr style="color:red" class="red-color">
  53.                     <td></td>
  54.                     <td></td>
  55.                     <td>Trousers</td>
  56.                     <td>Skirts</td>
  57.                     <td>Dresses</td>
  58.                     <td>Bracelets</td>
  59.                     <td>Rings</td>
  60.                 </tr>
  61.                 <tr>
  62.                     <td rowspan="3" class="blue-color">Belgium</td>
  63.                     <td class="blue-color">Antwerp</td>
  64.                     <td class="right">56</td>
  65.                     <td class="right">22</td>
  66.                     <td class="right">43</td>
  67.                     <td class="right">72</td>
  68.                     <td class="right">23</td>
  69.                 </tr>
  70.                 <tr>
  71.                     <td class="blue-color">Gent</td>
  72.                     <td class="right">46</td>
  73.                     <td class="right">18</td>
  74.                     <td class="right">50</td>
  75.                     <td class="right">61</td>
  76.                     <td class="right">15</td>
  77.                 </tr>
  78.                 <tr>
  79.                     <td class="blue-color">Brussels</td>
  80.                     <td class="right">51</td>
  81.                     <td class="right">27</td>
  82.                     <td class="right">38</td>
  83.                     <td class="right">69</td>
  84.                     <td class="right">28</td>
  85.                 </tr>
  86.                 <tr>
  87.                     <td rowspan="2" class="blue-color">The Netherlands</td>
  88.                     <td class="blue-color">Amsterdam</td>
  89.                     <td class="right">89</td>
  90.                     <td class="right">34</td>
  91.                     <td class="right">69</td>
  92.                     <td class="right">85</td>
  93.                     <td class="right">38</td>
  94.                 </tr>
  95.                 <tr>
  96.                     <td class="blue-color">Utrecht</td>
  97.                     <td class="right">80</td>
  98.                     <td class="right">12</td>
  99.                     <td class="right">43</td>
  100.                     <td class="right">36</td>
  101.                     <td class="right">19</td>
  102.                 </tr>
  105.             </table>
  106.         </div>
  107.     </center>
  110. </body>
  111. </html>

发表评论

表情：
评论列表 （有 0 条评论，277人围观）

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

相关阅读

    相关 小练习

    \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\   shell  脚本编程     一、一键部署脚本（源码包安装软件nginx） tar

    红太狼红太狼/ 0 赞/ 269 阅读