jtahstu的博客

root@jtahstu.com   Github   英文博客  

最新碎语:以后没事写写小的知识点吧

您的位置:jtahstu的博客 >笔记> 大三下软件项目开发实训第二天 - 表单、表格美化

大三下软件项目开发实训第二天 - 表单、表格美化

这些都是做作业,没什么好看的,都比较丑,就是练习下html标签和css

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8"/>
  <title>注册页面</title>
  <style type="text/css">
   body{
    padding: 0;
    margin: 0;
    font-family: "微软雅黑";
    font-size: 18px;
   }
   .c{
    background-color: #A9DAE8;
   }
   .r{
    background-color: red;
   }
   .g{
    background-color: green;
   }
   .b{
    background-color: blue;
   }
  </style>
 </head>
 <body>
  <form action="" method="post">
   请输入您的姓名
   <br />
   <input type="text" name="" class="c" id="name" value="" />
   <br />
   请选择你喜欢的颜色
   <br />
   <select name="">
    <option value="红" class="r">红</option>
    <option value="蓝" class="b">蓝</option>
    <option value="绿" class="g">绿</option>
   </select>
   <br />
   请选择你的性别
   <br />
   <input type="radio" class="c" name="sex" id="sex" value="1" />男
   <br />
   <input type="radio" name="sex" id="sex" value="0" />女
   <br />
   你喜欢做什么
   <br />
   <input type="checkbox" name="like" id="" value="" />看书
   <input type="checkbox" name="like" id="" value="" />上网
   <input type="checkbox" name="like" id="" value="" />睡觉
   <br />
   我要留言
   <br />
   <textarea id="liu" class="c" rows="6" cols="40">
   </textarea>
   <br />
   <input type="submit" class="c" value="提交" id="submit"/>
  </form>
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>表单美化2</title>
  <style type="text/css">
   body{
    padding: 0;
    margin: 0;
    font-family: "微软雅黑";
    font-size: 18px;
   }
   .blue{
    background-color: blue;
   }
   .red{
    background-color: red;
   }   
   .green{
    background-color: green;
   }
   .yellow{
    background-color: yellow;
   }
   .cyan{
    background-color: cyan;
   }
   .purple{
    background-color: purple;
   }
  </style>
 </head>
 <body>
  <p>
   选择你最喜欢的颜色:
   <select name="">
    <option value="">Select One</option>
    <option value="" class="blue">blue</option>
    <option value="" class="red">red</option>
    <option value="" class="green">green</option>
    <option value="" class="yellow">yellow</option>
    <option value="" class="cyan">cyan</option>
    <option value="" class="" class="purple">purple</option>
   </select>
   <br />
   <input type="submit" id="submit" name="" value="Send!" />
  </p>
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>表格美化1</title>
  <style type="text/css">
   body {
    padding: 0;
    margin: 0;
    font-family: "微软雅黑";
    font-size: 18px;
   }
   /*table {
    border-collapse: collapse;
   }*/
   td{
    background-color: #D1E7FC;
   }
   .color{
    background-color: #7AB6FF;
   }
   .title{
    color: #174499;
   }
  </style>
 </head>
 <body>
  <table border="1" cellspacing="" cellpadding="">
   <caption class="title">年收入 2004-2007</caption>
   <tr class="color">
    <th></th>
    <th>2004</th>
    <th>2005</th>
    <th>2006</th>
    <th>2007</th>
   </tr>
   <tr>
    <td class="color">拨款</td>
    <td>11980</td>
    <td>12650</td>
    <td>9700</td>
    <td>10600</td>
   </tr>
   <tr>
    <td class="color">捐款</td>
    <td>4780</td>
    <td>4980</td>
    <td>6700</td>
    <td>6590</td>
   </tr>
   <tr>
    <td class="color">投资</td>
    <td>8000</td>
    <td>8100</td>
    <td>8760</td>
    <td>8490</td>
   </tr>
   <tr>
    <td class="color">募捐</td>
    <td>3200</td>
    <td>3120</td>
    <td>3700</td>
    <td>4210</td>
   </tr>
   <tr>
    <td class="color">销售</td>
    <td>28400</td>
    <td>27100</td>
    <td>27950</td>
    <td>29050</td>
   </tr>
   <tr>
    <td class="color">杂费</td>
    <td>2100</td>
    <td>1900</td>
    <td>1300</td>
    <td>1760</td>
   </tr>
   <tr>
    <td class="color">总计</td>
    <td>58460</td>
    <td>57859</td>
    <td>58110</td>
    <td>60700</td>
   </tr>
  </table>
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>表格美化2</title>
  <style type="text/css">
   body {
    padding: 0;
    margin: 0;
    font-size: 18px;
   }
   table {
    border-collapse: collapse;
    border-color: #7AB6FF;
   }
   tr,
   td {
    border-color: #7AB6FF;
   }
   .color {
    background-color: #7AB6FF;
   }
   .title {
    text-align: center;
   }
  </style>
 </head>
 <body>
  <table border="1" cellspacing="" cellpadding="">
   <tr class="title">
    <td id="title" colspan="5">年收入 2004-2007</td>
   </tr>
   <tr class="color">
    <th></th>
    <th>2004</th>
    <th>2005</th>
    <th>2006</th>
    <th>2007</th>
   </tr>
   <tr>
    <th class="color">拨款</th>
    <td>11980</td>
    <td>12650</td>
    <td>9700</td>
    <td>10600</td>
   </tr>
   <tr>
    <th class="color">捐款</th>
    <td>4780</td>
    <td>4980</td>
    <td>6700</td>
    <td>6590</td>
   </tr>
   <tr>
    <th class="color">投资</th>
    <td>8000</td>
    <td>8100</td>
    <td>8760</td>
    <td>8490</td>
   </tr>
   <tr>
    <th class="color">募捐</th>
    <td>3200</td>
    <td>3120</td>
    <td>3700</td>
    <td>4210</td>
   </tr>
   <tr>
    <th class="color">销售</th>
    <td>28400</td>
    <td>27100</td>
    <td>27950</td>
    <td>29050</td>
   </tr>
   <tr>
    <th class="color">杂费</th>
    <td>2100</td>
    <td>1900</td>
    <td>1300</td>
    <td>1760</td>
   </tr>
   <tr>
    <th class="color">总计</th>
    <td>58460</td>
    <td>57859</td>
    <td>58110</td>
    <td>60700</td>
   </tr>
  </table>
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>表格美化3</title>
  <style type="text/css">
   body {
    padding: 0;
    margin: 0;
    font-size: 18px;
    font-family: "Consolas";
   }
   table {
    border-collapse: collapse;
    border-color: ;
    width: 30%;
    text-align: center;
    margin-left: 35%;
   }
   .th {
    background-color: #4CABFD;
    color: #FFFFFF;
   }
  </style>
  <script src="jquery.min.js"></script>
  <script type="text/javascript">
   $(function() {
    $('tr:gt(1):even').css("background-color", "#C7E5FF");
   })
  </script>
 </head>
 <body>
  <h2 align="center">Member List</h2>
  <table border="1" cellspacing="" cellpadding="" id="table">
   <tr class="th">
    <th>Name</th>
    <th>Class</th>
    <th>Birthday</th>
    <th>Constellation</th>
    <th>Mobile</th>
   </tr>
   <tr>
    <td>isaac</td>
    <td>W13</td>
    <td>Jun 24th</td>
    <td>Cancer</td>
    <td>1118159</td>
   </tr>
   <tr>
    <td>girlwing</td>
    <td>W210</td>
    <td>Sep 16th</td>
    <td>Virgo</td>
    <td>1307994</td>
   </tr>
   <tr>
    <td>tastestory</td>
    <td>W15</td>
    <td>Nov 29th</td>
    <td>Sagittarius</td>
    <td>1095245</td>
   </tr>
   <tr>
    <td>lovehate</td>
    <td>W47</td>
    <td>Sep 5th</td>
    <td>Virgo</td>
    <td>6098017</td>
   </tr>
   <tr>
    <td>slepox</td>
    <td>W19</td>
    <td>Nov 28th</td>
    <td>Scorpio</td>
    <td>0658635</td>
   </tr>
   <tr>
    <td>smartlau</td>
    <td>W19</td>
    <td>Dec 30th</td>
    <td>Capricorn</td>
    <td>0006621</td>
   </tr>
   <tr>
    <td>whaler</td>
    <td>W19</td>
    <td>Jan 18th</td>
    <td>Capricorn</td>
    <td>1851918</td>
   </tr>
   <tr>
    <td>shenhuanyan</td>
    <td>W25</td>
    <td>Jan 31th</td>
    <td>Aquarius</td>
    <td>0621827</td>
   </tr>
   <tr>
    <td>tuonene</td>
    <td>W210</td>
    <td>Nov 26th</td>
    <td>Sagittarius</td>
    <td>0091704</td>
   </tr>
   <tr>
    <td>ArthurRivers</td>
    <td>W91</td>
    <td>Feb 26th</td>
    <td>Pisces</td>
    <td>0468357</td>
   </tr>
   <tr>
    <td>reconzansp</td>
    <td>W09</td>
    <td>Oct 13th</td>
    <td>Libra</td>
    <td>3643041</td>
   </tr>
   <tr>
    <td>linear</td>
    <td>W86</td>
    <td>Aug 18th</td>
    <td>Leo</td>
    <td>6398341</td>
   </tr>
   <tr>
    <td>ArthurRivers</td>
    <td>W91</td>
    <td>Feb 26th</td>
    <td>Pisces</td>
    <td>0468357</td>
   </tr>
   <tr>
    <td>reconzansp</td>
    <td>W09</td>
    <td>Oct 13th</td>
    <td>Libra</td>
    <td>3643041</td>
   </tr>
   <tr>
    <td>linear</td>
    <td>W86</td>
    <td>Aug 18th</td>
    <td>Leo</td>
    <td>6398341</td>
   </tr><tr>
    <td>ArthurRivers</td>
    <td>W91</td>
    <td>Feb 26th</td>
    <td>Pisces</td>
    <td>0468357</td>
   </tr>
   <tr>
    <td>reconzansp</td>
    <td>W09</td>
    <td>Oct 13th</td>
    <td>Libra</td>
    <td>3643041</td>
   </tr>
   <tr>
    <td>linear</td>
    <td>W86</td>
    <td>Aug 18th</td>
    <td>Leo</td>
    <td>6398341</td>
   </tr>
  </table>
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>表格美化4</title>
  <style type="text/css">
   body {
    padding: 0;
    margin: 0;
    font-size: 18px;
    font-family: "Consolas";
   }
   table {
    border-collapse: collapse;
    border-color: ;
    width: 40%;
   }
   #title {
    background-color: #D4D39D;
    line-height: 25px;
    text-align: center;
   }
   td {
    height: 100px;
    width: 100px;
    vertical-align: top;
   }
   .num {
    text-align: left;
   }
   .bl{
    background-color: #B1CCE1;
   }
   .bl span{
    font-size: 12px;
    text-align: center;
   }
  </style>
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript">
   $(function() {
    $('#last td:gt(2)').css('background-color', '#F6F4E7');
   })
  </script>
 </head>
 <body>
  <h2>2016-05</h2>
  <table border="1">
   <tr id="title">
    <th>Sunday</th>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
    <th>Thursday</th>
    <th>Friday</th>
    <th>Saturday</th>
   </tr>
   <tr>
    <td class="bl">
     1<br/>
     <span>五棵松摄影</span>
    </td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
   </tr>
   <tr>
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
   </tr>
   <tr>
    <td>15</td>
    <td>16</td>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
    <td>21</td>
   </tr>
   <tr>
    <td>22</td>
    <td>23</td>
    <td>24</td>
    <td>25</td>
    <td>26</td>
    <td>27</td>
    <td>28</td>
   </tr>
   <tr id="last">
    <td>29</td>
    <td>30</td>
    <td>31</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
   </tr>
  </table>
 </body>
</html>

---

本文章采用 知识共享署名2.5中国大陆许可协议 进行许可,欢迎转载,演绎或用于商业目的。

---

二维码加载中...

扫一扫移动端访问O(∩_∩)O

发表评论

72 + 31 =
路人甲 表情
看不清楚?点图切换 Ctrl+Enter快速提交
正在加载中……