css布局

最新推荐文章于 2023-02-21 09:27:37 发布
最新推荐文章于 2023-02-21 09:27:37 发布
阅读量450 收藏
点赞数
 

精通CSS.DIV网页样式与布局（五） ——设置表格与表单样式

分类： CSS 2012-10-02 10:38  5414人阅读  评论(1)  收藏  举报

表格和表单是网页中非常重要的两个元素，我们这次来说说CSS如何设置表格和表单样式。我们先来看看CSS如何控制表格。

首先表格中的标记：我们看一下代码：

[html]  view plain copy
  1. <html>  
  2. <head>  
  3. <title>年度收入</title>  
  4. <style>  
  5. <!--  
  6. table{  
  7.     caption-side:bottom;  
  8. }  
  9. -->  
  10. </style>  
  11.    </head>  
  12. <body>   
  13. <table summary="This table shows the yearly income for years 2004 through 2007" border="1">  
  14.     <caption>年度收入 2010 - 2012</caption>  
  15.     <tr>  
  16.         <th></th>  
  17.         <th scope="col">2004</th>  
  18.         <th scope="col">2005</th>  
  19.         <th scope="col">2006</th>  
  20.         <th scope="col">2007</th>  
  21.     </tr>  
  22.     <tr>  
  23.         <th scope="row">拨款</th>  
  24.         <td>11,980</td>  
  25.         <td>12,650</td>  
  26.         <td>9,700</td>  
  27.         <td>10,600</td>  
  28.     </tr>  
  29.     <tr>  
  30.         <th scope="row">捐款</th>  
  31.         <td>4,780</td>  
  32.         <td>4,989</td>  
  33.         <td>6,700</td>  
  34.         <td>6,590</td>  
  35.     </tr>  
  36.     <tr>  
  37.         <th scope="row">投资</th>  
  38.         <td>8,000</td>  
  39.         <td>8,100</td>  
  40.         <td>8,760</td>  
  41.         <td>8,490</td>  
  42.     </tr>  
  43.     <tr>  
  44.         <th scope="row">募捐</th>  
  45.         <td>3,200</td>  
  46.         <td>3,120</td>  
  47.         <td>3,700</td>  
  48.         <td>4,210</td>  
  49.     </tr>  
  50.     <tr>  
  51.         <th scope="row">销售</th>  
  52.         <td>28,400</td>  
  53.         <td>27,100</td>  
  54.         <td>27,950</td>  
  55.         <td>29,050</td>  
  56.     </tr>  
  57.     <tr>  
  58.         <th scope="row">杂费</th>  
  59.         <td>2,100</td>  
  60.         <td>1,900</td>  
  61.         <td>1,300</td>  
  62.         <td>1,760</td>  
  63.     </tr>  
  64.     <tr>  
  65.         <th scope="row">总计</th>  
  66.         <td>58,460</td>  
  67.         <td>57,859</td>  
  68.         <td>58,110</td>  
  69.         <td>60,700</td>  
  70.     </tr>  
  71. </table>  
  72. </body>  
  73. </html>  


这是一个年度输入的表格，正文部分首先是一个table标记开始表示的是整个表格，一个caption表示的一个表格的标题，tr表示一个表格的行，而th表示的是一个表格的比较重要的第一行，后面th表示表格的竖着的比较重要的那个行，td表格一个一个的单元格，我们看一下效果，便明白。

这些标记：tr、th、td都是组成表格不可缺少的元素。

刚才的表格非常淡雅，我们仅仅只是为了表示表格的标记，那么CSS是如何控制表格的颜色的呢：我们看一下代码

[html]  view plain copy
  1. <html>  
  2. <head>  
  3. <title>年度收入</title>  
  4. <style>  
  5. <!--  
  6. body{  
  7.   
  8.     background-color:#ebf5ff;   /* 页面背景色 */  
  9.     margin:0px; padding:4px;  
  10.     text-align:center;          /* 居中对齐（IE有效） */  
  11. }  
  12. .datalist{  
  13.     color:#0046a6;              /* 表格文字颜色 */  
  14.     background-color:#d2e8ff;   /* 表格背景色 */  
  15.     font-family:Arial;          /* 表格字体 */  
  16. }  
  17. .datalist caption{  
  18.     font-size:18px;             /* 标题文字大小 */  
  19.     font-weight:bold;           /* 标题文字粗体 */  
  20. }  
  21. .datalist th{  
  22.     color:#003e7e;              /* 行、列名称颜色 */  
  23.     background-color:#7bb3ff;   /* 行、列名称的背景色 */  
  24. }  
  25. -->  
  26. </style>  
  27.    </head>  
  28. <body>   
  29. <table summary="This table shows the yearly income for years 2004 through 2007" border="1" class="datalist">  
  30.     <caption>年度收入 2008 - 2011</caption>  
  31.     <tr>  
  32.         <th></th>  
  33.         <th scope="col">2008</th>  
  34.         <th scope="col">2009</th>  
  35.         <th scope="col">2010</th>  
  36.         <th scope="col">2011</th>  
  37.     </tr>  
  38.     <tr>  
  39.         <th scope="row">拨款</th>  
  40.         <td>11,980</td>  
  41.         <td>12,650</td>  
  42.         <td>9,700</td>  
  43.         <td>10,600</td>  
  44.     </tr>  
  45.     <tr>  
  46.         <th scope="row">捐款</th>  
  47.         <td>4,780</td>  
  48.         <td>4,989</td>  
  49.         <td>6,700</td>  
  50.         <td>6,590</td>  
  51.     </tr>  
  52.     <tr>  
  53.         <th scope="row">投资</th>  
  54.         <td>8,000</td>  
  55.         <td>8,100</td>  
  56.         <td>8,760</td>  
  57.         <td>8,490</td>  
  58.     </tr>  
  59.     <tr>  
  60.         <th scope="row">募捐</th>  
  61.         <td>3,200</td>  
  62.         <td>3,120</td>  
  63.         <td>3,700</td>  
  64.         <td>4,210</td>  
  65.     </tr>  
  66.     <tr>  
  67.         <th scope="row">销售</th>  
  68.         <td>28,400</td>  
  69.         <td>27,100</td>  
  70.         <td>27,950</td>  
  71.         <td>29,050</td>  
  72.     </tr>  
  73.     <tr>  
  74.         <th scope="row">杂费</th>  
  75.         <td>2,100</td>  
  76.         <td>1,900</td>  
  77.         <td>1,300</td>  
  78.         <td>1,760</td>  
  79.     </tr>  
  80.     <tr>  
  81.         <th scope="row">总计</th>  
  82.         <td>58,460</td>  
  83.         <td>57,859</td>  
  84.         <td>58,110</td>  
  85.         <td>60,700</td>  
  86.     </tr>  
  87. </table>  
  88. </body>  
  89. </html>  

在table这里用一个class=“datalist”来将整个表格的CSS定义出来，body设置了背景颜色以及对齐方式；dataList设置了表格文字颜色、表格背景色以及表格字体；datalist caption设置了标题……我们看一下效果：

对于大量的数据，表格有非常多的行和非常多的列，如果表格的每一行都采用相同的颜色，对于长期面对显示器的人来说，是经常找不到数据的。而隔行变色就能解决这个问题，我们看这个效果：


下面我们看隔行表示显示的代码：

[html]  view plain copy
  1. <html>  
  2. <head>  
  3. <title>Member List</title>  
  4. <style>  
  5. <!--  
  6. .datalist{  
  7.     border:1px solid #0058a3;   /* 表格边框 */  
  8.     font-family:Arial;  
  9.     border-collapse:collapse;   /* 边框重叠 */  
  10.     background-color:#eaf5ff;   /* 表格背景色 */  
  11.     font-size:14px;  
  12. }  
  13. .datalist caption{  
  14.     padding-bottom:5px;  
  15.     font:bold 1.4em;  
  16.     text-align:left;  
  17. }  
  18. .datalist th{  
  19.     border:1px solid #0058a3;   /* 行名称边框 */  
  20.     background-color:#4bacff;   /* 行名称背景色 */  
  21.     color:#FFFFFF;              /* 行名称颜色 */  
  22.     font-weight:bold;  
  23.     padding-top:4px; padding-bottom:4px;  
  24.     padding-left:12px; padding-right:12px;  
  25.     text-align:center;  
  26. }  
  27. .datalist td{  
  28.     border:1px solid #0058a3;   /* 单元格边框 */  
  29.     text-align:left;  
  30.     padding-top:4px; padding-bottom:4px;  
  31.     padding-left:10px; padding-right:10px;  
  32. }  
  33. .datalist tr.altrow{  
  34.     background-color:#c7e5ff;   /* 隔行变色 */  
  35. }  
  36. -->  
  37. </style>  
  38.    </head>  
  39. <body>   
  40. <table class="datalist" summary="list of members in EE Studay">  
  41.     <caption>Member List</caption>  
  42.     <tr>  
  43.         <th scope="col">Name</th>  
  44.         <th scope="col">Class</th>  
  45.         <th scope="col">Birthday</th>  
  46.         <th scope="col">Constellation</th>  
  47.         <th scope="col">Mobile</th>  
  48.     </tr>  
  49.     <tr>                  <!-- 奇数行 -->  
  50.         <td>isaac</td>  
  51.         <td>W13</td>  
  52.         <td>Jun 24th</td>  
  53.         <td>Cancer</td>  
  54.         <td>1118159</td>  
  55.     </tr>  
  56.     <tr class="altrow">       <!-- 偶数行 -->  
  57.         <td>girlwing</td>  
  58.         <td>W210</td>  
  59.         <td>Sep 16th</td>  
  60.         <td>Virgo</td>  
  61.         <td>1307994</td>  
  62.     </tr>  
  63.     <tr>                  <!-- 奇数行 -->  
  64.         <td>tastestory</td>  
  65.         <td>W15</td>  
  66.         <td>Nov 29th</td>  
  67.         <td>Sagittarius</td>  
  68.         <td>1095245</td>  
  69.     </tr>  
  70.     <tr class="altrow">       <!-- 偶数行 -->  
  71.         <td>lovehate</td>  
  72.         <td>W47</td>  
  73.         <td>Sep 5th</td>  
  74.         <td>Virgo</td>  
  75.         <td>6098017</td>  
  76.     </tr>  
  77.     <tr>                  <!-- 奇数行 -->  
  78.         <td>slepox</td>  
  79.         <td>W19</td>  
  80.         <td>Nov 18th</td>  
  81.         <td>Scorpio</td>  
  82.         <td>0658635</td>  
  83.     </tr>  
  84.     <tr class="altrow">       <!-- 偶数行 -->  
  85.         <td>smartlau</td>  
  86.         <td>W19</td>  
  87.         <td>Dec 30th</td>  
  88.         <td>Capricorn</td>  
  89.         <td>0006621</td>  
  90.     </tr>  
  91.     <tr>                  <!-- 奇数行 -->  
  92.         <td>whaler</td>  
  93.         <td>W19</td>  
  94.         <td>Jan 18th</td>  
  95.         <td>Capricorn</td>  
  96.         <td>1851918</td>  
  97.     </tr>  
  98.     <tr class="altrow">       <!-- 偶数行 -->  
  99.         <td>shenhuanyan</td>  
  100.         <td>W25</td>  
  101.         <td>Jan 31th</td>  
  102.         <td>Aquarius</td>  
  103.         <td>0621827</td>  
  104.     </tr>  
  105.     <tr>                  <!-- 奇数行 -->  
  106.         <td>tuonene</td>  
  107.         <td>W210</td>  
  108.         <td>Nov 26th</td>  
  109.         <td>Sagittarius</td>  
  110.         <td>0091704</td>  
  111.     </tr>  
  112.     <tr class="altrow">       <!-- 偶数行 -->  
  113.         <td>ArthurRivers</td>  
  114.         <td>W91</td>  
  115.         <td>Feb 26th</td>  
  116.         <td>Pisces</td>  
  117.         <td>0468357</td>  
  118.     </tr>  
  119.     <tr>                  <!-- 奇数行 -->  
  120.         <td>reconzansp</td>  
  121.         <td>W09</td>  
  122.         <td>Oct 13th</td>  
  123.         <td>Libra</td>  
  124.         <td>3643041</td>  
  125.     </tr>  
  126.     <tr class="altrow">       <!-- 偶数行 -->  
  127.         <td>linear</td>  
  128.         <td>W86</td>  
  129.         <td>Aug 18th</td>  
  130.         <td>Leo</td>  
  131.         <td>6398341</td>  
  132.     </tr>  
  133.     <tr>                  <!-- 奇数行 -->  
  134.         <td>laopiao</td>  
  135.         <td>W41</td>  
  136.         <td>May 17th</td>  
  137.         <td>Taurus</td>  
  138.         <td>1254004</td>  
  139.     </tr>  
  140.     <tr class="altrow">       <!-- 偶数行 -->  
  141.         <td>dovecho</td>  
  142.         <td>W19</td>  
  143.         <td>Dec 9th</td>  
  144.         <td>Sagittarius</td>  
  145.         <td>1892013</td>  
  146.     </tr>  
  147.     <tr>                  <!-- 奇数行 -->  
  148.         <td>shanghen</td>  
  149.         <td>W42</td>  
  150.         <td>May 24th</td>  
  151.         <td>Gemini</td>  
  152.         <td>1544254</td>  
  153.     </tr>  
  154.     <tr class="altrow">       <!-- 偶数行 -->  
  155.         <td>venessawj</td>  
  156.         <td>W45</td>  
  157.         <td>Apr 1st</td>  
  158.         <td>Aries</td>  
  159.         <td>1523753</td>  
  160.     </tr>  
  161.     <tr>                  <!-- 奇数行 -->  
  162.         <td>lightyear</td>  
  163.         <td>W311</td>  
  164.         <td>Mar 23th</td>  
  165.         <td>Aries</td>  
  166.         <td>1002908</td>  
  167.     </tr>  
  168. </table>  
  169. </body>  
  170. </html>  

正文部分把奇数行和偶数行都写上了。属性值大家自己看，这里不再一一介绍了，值得一提的是这里的altrow,如果设置了这个的属性，那么他将覆盖他父亲的颜色，而是用自己的颜色，这就实现了隔行变色的效果。
那么接下来我们再看看CSS是如何控制表单的呢：代码

[html]  view plain copy
  1. <html>  
  2. <head>  
  3. <title>表单</title>  
  4. <style>  
  5. <!--  
  6. form {  
  7.     border: 1px dotted #AAAAAA;  
  8.     padding: 3px 6px 3px 6px;  
  9.     margin:0px;  
  10.     font:14px Arial;  
  11. }  
  12. input {  
  13.     color: #00008B;  
  14.     background-color: #ADD8E6;  
  15.     border: 1px solid #00008B;  
  16. }  
  17. select {  
  18.     width: 80px;  
  19.     color: #00008B;  
  20.     background-color: #ADD8E6;  
  21.     border: 1px solid #00008B;  
  22. }  
  23. textarea {  
  24.     width: 200px;  
  25.     height: 40px;  
  26.     color: #00008B;  
  27.     background-color: #ADD8E6;  
  28.     border: 1px solid #00008B;  
  29. }  
  30. -->  
  31. </style>  
  32.    </head>  
  33. <body>  
  34. <form method="post">  
  35. <p>请输入您的姓名:<br><input type="text" name="name" id="name"></p>  
  36. <p>请选择你最喜欢的颜色:<br>  
  37. <select name="color" id="color">  
  38.     <option value="red">红</option>  
  39.     <option value="green">绿</option>  
  40.     <option value="blue">蓝</option>  
  41.     <option value="yellow">黄</option>  
  42.     <option value="cyan">青</option>  
  43.     <option value="purple">紫</option>  
  44. </select></p>  
  45. <p>请问你的性别:<br>  
  46.     <input type="radio" name="sex" id="male" value="male">男<br>  
  47.     <input type="radio" name="sex" id="female" value="female">女</p>  
  48. <p>你喜欢做些什么:<br>  
  49.     <input type="checkbox" name="hobby" id="book" value="book">看书  
  50.     <input type="checkbox" name="hobby" id="net" value="net">上网  
  51.     <input type="checkbox" name="hobby" id="sleep" value="sleep">睡觉</p>  
  52. <p>我要留言:<br><textarea name="comments" id="comments" cols="30" rows="4"></textarea></p>  
  53. <p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit"></p>  
  54. </form>  
  55. </body>  
  56. </html>  

正文部分是一个表单，他以form标志开始，其中里边有输入框，有下拉菜单，有单选项，有复选框，有文字的输入框，有按钮，我们看显示的效果：


在CSS中的代码大家自己理解，和之前讲的都是一样的。

我们接下来看像文字一样的按钮

我们先看一下效果：


下面我们看一下代码是如何达到这个效果的，

[html]  view plain copy
  1. <html>  
  2. <head>  
  3. <title>像文字一样的按钮</title>  
  4. <style>  
  5. <!--  
  6. body{  
  7.     background-color:#daeeff;           /* 页面背景色 */  
  8. }  
  9. form{  
  10.     margin:0px; padding:0px;  
  11.     font:14px;  
  12. }  
  13. input{  
  14.     font:14px Arial;  
  15. }  
  16. .txt{  
  17.     border-bottom:1px solid #005aa7;    /* 下划线效果 */  
  18.     color:#005aa7;  
  19.     border-top:0px; border-left:0px;  
  20.     border-right:0px;  
  21.     background-color:transparent;       /* 背景色透明 */  
  22. }  
  23. .btn{  
  24.     background-color:transparent;       /* 背景色透明 */  
  25.     border:0px;                         /* 边框取消 */  
  26. }  
  27. -->  
  28. </style>  
  29.    </head>  
  30. <body>  
  31. <form method="post">  
  32.     请输入您的信息: <input type="text" name="name" id="name" class="txt">  
  33.     <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit>>" class="btn">  
  34. </form>  
  35. </body>  
  36. </html>  

其实我们的border-bottom设置为1px，其他的border-top、border-left、border-right边框都设置为了0.然后设置一个颜色和背景色就实现了这个按钮。而这个按钮，我们讲四个边框都设置为0，而背景色设置为透明来实现像文字一样的按钮；通过这个我们可以看到，巧妙的使用CSS，能达到许多意想不到的效果。

Excel表格是在office软件中非常受大家欢迎的一个软件，而在网页中我们来模拟。我们先看看这个显示效果：


我们可以像在office里边的excel一样随意的输入东西，而不再有繁琐的什么输入框。下面我们来看一下这个代码：

[html]  view plain copy
  1. <html>  
  2. <head>  
  3. <title>直接输入的Excel表格</title>  
  4. <style>  
  5. <!--  
  6. table.formdata{  
  7.     border:1px solid #5F6F7E;  
  8.     border-collapse:collapse;  
  9.     font-family:Arial;  
  10. }  
  11. table.formdata caption{  
  12.     text-align:left;  
  13.     padding-bottom:6px;  
  14. }  
  15. table.formdata th{  
  16.     border:1px solid #5F6F7E;  
  17.     background-color:#E2E2E2;  
  18.     color:#000000px;  
  19.     text-align:left;  
  20.     font-weight:normal;  
  21.     padding:2px 8px 2px 6px;  
  22.     margin:0px;  
  23. }  
  24. table.formdata td{  
  25.     margin:0px;  
  26.     padding:0px;  
  27.     border:1px solid #ABABAB;   /* 单元格边框 */  
  28. }  
  29. table.formdata input{  
  30.     width:100px;  
  31.     padding:1px 3px 1px 3px;  
  32.     margin:0px;  
  33.     border:none;                /* 输入框不要边框 */  
  34.     font-family:Arial;  
  35. }  
  36. .btn{  
  37.     border:1px solid #0083f2;  
  38.     font-family:Arial;  
  39. }  
  40. -->  
  41. </style>  
  42.    </head>  
  43. <body>  
  44. <form method="post">  
  45. <table class="formdata">  
  46. <caption>公司销售统计表 2004～2007</caption>  
  47. <tr>  
  48. <th></th>  
  49. <th scope="col">2004</th>  
  50. <th scope="col">2005</th>  
  51. <th scope="col">2006</th>  
  52. <th scope="col">2007</th>  
  53. </tr>  
  54. <tr>  
  55. <th scope="row">硬盘(Hard Disk)</th>  
  56.     <td><input type="text" name="harddisk2004" id="harddisk2004"></td>  
  57.     <td><input type="text" name="harddisk2005" id="harddisk2005"></td>  
  58.     <td><input type="text" name="harddisk2006" id="harddisk2006"></td>  
  59.     <td><input type="text" name="harddisk2007" id="harddisk2007"></td>  
  60. </tr>  
  61. <tr>  
  62.     <th scope="row">主板(Mainboard)</th>  
  63.     <td><input type="text" name="mainboard2004" id="mainboard2004"></td>  
  64.     <td><input type="text" name="mainboard2005" id="mainboard2005"></td>  
  65.     <td><input type="text" name="mainboard2006" id="mainboard2006"></td>  
  66.     <td><input type="text" name="mainboard2007" id="mainboard2007"></td>  
  67. </tr>  
  68. <tr>  
  69.     <th scope="row">内存条(Memory Disk)</th>  
  70.     <td><input type="text" name="memory2004" id="memory2004"></td>  
  71.     <td><input type="text" name="memory2005" id="memory2005"></td>  
  72.     <td><input type="text" name="memory2006" id="memory2006"></td>  
  73.     <td><input type="text" name="memory2007" id="memory2007"></td>  
  74. </tr>  
  75. <tr>  
  76.     <th scope="row">机箱(Case)</th>  
  77.     <td><input type="text" name="case2004" id="case2004"></td>  
  78.     <td><input type="text" name="case2005" id="case2005"></td>  
  79.     <td><input type="text" name="case2006" id="case2006"></td>  
  80.     <td><input type="text" name="case2007" id="case2007"></td>  
  81. </tr>  
  82. <tr>  
  83. <th scope="row">电源(Power)</th>  
  84.     <td><input type="text" name="power2004" id="power2004"></td>  
  85.     <td><input type="text" name="power2005" id="power2005"></td>  
  86.     <td><input type="text" name="power2006" id="power2006"></td>  
  87.     <td><input type="text" name="power2007" id="power2007"></td>  
  88. </tr>  
  89. <tr>  
  90.     <th scope="row">CPU风扇(CPU Fan)</th>  
  91.     <td><input type="text" name="cpufan2004" id="cpufan2004"></td>  
  92.     <td><input type="text" name="cpufan2005" id="cpufan2005"></td>  
  93.     <td><input type="text" name="cpufan2006" id="cpufan2006"></td>  
  94.     <td><input type="text" name="cpufan2007" id="cpufan2007"></td>  
  95. </tr>  
  96. <tr>  
  97. <th scope="row">总计(Total)</th>  
  98.     <td><input type="text" name="total2004" id="total2004"></td>  
  99.     <td><input type="text" name="total2005" id="total2005"></td>  
  100.     <td><input type="text" name="total2006" id="total2006"></td>  
  101.     <td><input type="text" name="total2007" id="total2007"></td>  
  102. </tr>  
  103. </table>  
  104. <p><input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data" class="btn">  
  105. <input type="reset" value="Reset All" class="btn"></p>  
  106. </form>  
  107. </body>  
  108. </html>  

我们说说是如何实现这个效果的思路，首先正文部分是用一个表格来进行搭建，而将表单嵌套在表格里边，每一项都设置一个id，一个name。最后是一个按钮；我们看CSS代码，在表格中，我们将td单元格他的边框设置，而对于input这个文本框，我们将他的border设置为none，那么这样所实现的效果就是输入的边框被取消掉了，而真正取而代之的是表格的边框，从而实现了这么一个小技巧。通过这个实例，我们可以看到，巧妙的设置CSS，能达到很多你意想不到的效果。

ninghan2
关注
CSS 表格样式
03-18
NULL 博文链接：https://janla.iteye.com/blog/694098
精通CSS.DIV网页样式与布局（五） ——设置表格与表单样式
热门推荐
陈宗毅 技术在于分享
10-02 8万+
表格和表单是网页中非常重要的两个元素，我们这次来说说CSS如何设置表格和表单样式。我们先来看看CSS如何控制表格。 首先表格中的标记：我们看一下代码： 年度收入 <!-- table{ caption-side:bottom; } --> 年度收入 2010 - 2012 2004 2005 2006 2007 拨款
div html表格样式,table 表格 div + css 样式
weixin_42527464的博客
06-29 743
【注意：此文章为博主原创文章！转载需注意，请带原文链接，至少也要是txt格式！】因偶尔在文章中会粘贴表格，发现没有任何样式，非常难看，然后发现freebuf中的样式还算好看，那么就分享一下啦。首先，在你需要有样式的页面调用如下CSS。#contenttxt hr {display: block;height: 0px;border: 0;border-top: 1px solid #ccc;mar...
CSS表格样式
成长日记的博客
06-26 2765
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
css表格样式
最新发布
m0_74899618的博客
02-21 206
<!-- 表格： 使用table标签定义表格，每个表格由若干行（由tr定行），每行被分为若干个单元格（由td定义）。 表格作用： 以前整个页面的布局都使用的是表格，结构复杂，维护起来麻烦。展示数据时还时选择表格。 定义表格 th表头单元格 默认样式：字体加粗、文字水平居中、垂直居中 td单元格 包含各种标签
高效学习CSS布局之道
11-26
高效学习CSS布局之道：通过244个范例掌握网页样式与布局技术
div+css布局大全
03-22
下面，我们将深入探讨div+css布局的相关知识点。 1. **Div元素**：HTML中的`<div>`（division）元素是一个通用容器，用于组合HTML元素，为页面提供结构。通过设置`<div>`的类或ID属性，我们可以对多个元素进行分组...
Div_CSS.rar_DIV css布局_css大全_css布局
09-23
**Div+CSS布局详解** Div（Division）+CSS（Cascading Style Sheets）布局是网页设计中的核心概念，它能够帮助开发者实现灵活、高效的页面结构和样式控制。本资料包包含"Div_CSS.pdf"，是一份全面的学习Div+CSS布局...
DIV+CSS布局基本流程及实例介绍
01-20
都说用DIV+CSS布局来设计网站便于优化，容易被收录，那么你对DIV+CSS布局的用法是否了解？CSS布局是网页html通过DIV标签+CSS样式表代码开发制作的（html）网页的统称。DIV+CSS布局是现在非常流行的布局方法，替代了...
css.rar_css_css布局
09-23
本资料“css.rar”聚焦于CSS布局，提供了全面的样式大全，旨在帮助开发者掌握各种布局技巧。 一、CSS基础布局概念 1. 块级元素与行内元素：块级元素如`<div>`占据整个宽度，通常用于创建结构；行内元素如`<span>`...
CSS表格样式1
05-27
NULL 博文链接：https://lwyingdao.iteye.com/blog/602713
一些漂亮的CSS表格样式
07-28
一些非常漂亮实用的CSS表格样式,使用方便.页面简洁!
CSS布局大全：掌握纯CSS布局的秘诀
CSS布局大全 CSS布局大全是一本详细介绍CSS布局的电子书籍，从HTML结构化到CSS布局的实现，都被涵盖在内。本书的主要内容包括HTML结构化、CSS布局入门、CSS选择器、CSS布局技巧等。 一、HTML结构化 在学习CSS布局...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值