Home > Article > Web Front-end > Proficient in CSS DIV web page style and layout setting forms and tables_html/css_WEB-ITnose
Proficient in CSS DIV web page style and layout setting forms and tables_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:51:141564browse
Tables and forms are two very important elements in web pages. In the last blog, we briefly introduced the page background setting of CSS. Today, the editor will continue to introduce the relevant knowledge of CSS. In our How to set up tables and forms in CSS, first of all, let’s take a look at a mind map to briefly preview the basic knowledge of CSS that this blog post mainly explains: The tags, codes and running results in the table are as follows:
In the input form, the text part first starts with a table tag, which represents the entire table, a caption represents the title of a table, tr represents the rows of a table, and th represents the more important first row of a table, followed by th represents the more important vertical row of the table, and the td table contains cells one by one. The operation effect is as shown in the figure above. These tags: tr, th, td are all indispensable elements that make up the table. The table just now is very elegant. We just want to mark the table. So how does CSS control the color of the table? Let’s look at our next example code and running effect:
’ ’s ’ ’ s ’ s ’ ‑ ’ ‑ ‑ ‑ ‑ ‑ being _ , use a class="datalist" here in the table to define the CSS of the entire table. The body sets the background color and alignment; the dataList sets the table text color, table background color and table font; the datalist caption sets the title. After seeing the above effect, for a large amount of data, the table has a lot of rows and a lot of columns. If each row of the table uses the same color, it will be inconvenient to find the data. And interlaced discoloration can solve this problem. Look at the following example code and operating effect:
<span style="font-size:18px;"><html><head><title>年度收入</title><style><!--table{ caption-side:bottom;}--></style> </head><body> <table summary="This table shows the yearly income for years 2004 through 2007" border="1"> <caption>年度收入 2004 - 2007</caption> <tr> <th></th> <th scope="col">2004</th> <th scope="col">2005</th> <th scope="col">2006</th> <th scope="col">2007</th> </tr> <tr> <th scope="row">拨款</th> <td>11,980</td> <td>12,650</td> <td>9,700</td> <td>10,600</td> </tr> <tr> <th scope="row">捐款</th> <td>4,780</td> <td>4,989</td> <td>6,700</td> <td>6,590</td> </tr> <tr> <th scope="row">投资</th> <td>8,000</td> <td>8,100</td> <td>8,760</td> <td>8,490</td> </tr> <tr> <th scope="row">募捐</th> <td>3,200</td> <td>3,120</td> <td>3,700</td> <td>4,210</td> </tr> <tr> <th scope="row">销售</th> <td>28,400</td> <td>27,100</td> <td>27,950</td> <td>29,050</td> </tr> <tr> <th scope="row">杂费</th> <td>2,100</td> <td>1,900</td> <td>1,300</td> <td>1,760</td> </tr> <tr> <th scope="row">总计</th> <td>58,460</td> <td>57,859</td> <td>58,110</td> <td>60,700</td> </tr></table></body></html></span> The operating effect is as follows:
Analysis Take a look at the above code. The text part contains both odd-numbered lines and even-numbered lines. Everyone can see the attribute values. What is worth mentioning is the altrow here. If this attribute is set, it will cover other colors, and It uses its own color, which achieves the effect of interlaced color change. So let's take a look at how CSS controls the form? The example code and running effect are as follows:
The running effect is as follows:
<span style="font-size:18px;"><html><head><title>年度收入</title><style><!--body{ background-color:#ebf5ff; /* 页面背景色 */ margin:0px; padding:4px; text-align:center; /* 居中对齐（IE有效） */}.datalist{ color:#0046a6; /* 表格文字颜色 */ background-color:#d2e8ff; /* 表格背景色 */ font-family:Arial; /* 表格字体 */}.datalist caption{ font-size:18px; /* 标题文字大小 */ font-weight:bold; /* 标题文字粗体 */}.datalist th{ color:#003e7e; /* 行、列名称颜色 */ background-color:#7bb3ff; /* 行、列名称的背景色 */}--></style> </head><body> <table summary="This table shows the yearly income for years 2004 through 2007" border="1" class="datalist"> <caption>年度收入 2004 - 2007</caption> <tr> <th></th> <th scope="col">2004</th> <th scope="col">2005</th> <th scope="col">2006</th> <th scope="col">2007</th> </tr> <tr> <th scope="row">拨款</th> <td>11,980</td> <td>12,650</td> <td>9,700</td> <td>10,600</td> </tr> <tr> <th scope="row">捐款</th> <td>4,780</td> <td>4,989</td> <td>6,700</td> <td>6,590</td> </tr> <tr> <th scope="row">投资</th> <td>8,000</td> <td>8,100</td> <td>8,760</td> <td>8,490</td> </tr> <tr> <th scope="row">募捐</th> <td>3,200</td> <td>3,120</td> <td>3,700</td> <td>4,210</td> </tr> <tr> <th scope="row">销售</th> <td>28,400</td> <td>27,100</td> <td>27,950</td> <td>29,050</td> </tr> <tr> <th scope="row">杂费</th> <td>2,100</td> <td>1,900</td> <td>1,300</td> <td>1,760</td> </tr> <tr> <th scope="row">总计</th> <td>58,460</td> <td>57,859</td> <td>58,110</td> <td>60,700</td> </tr></table></body></html></span>
Analyze the above example. The text part is a form. It starts with the form logo, which has an input box, a drop-down menu, a radio option, a check box, a text input box, and a button. The running effect is as shown in the picture above. Let's look at the text-like button next. , let’s take a look at the example code and running effect:
The running effect is as follows:
<span style="font-size:18px;"><html><head><title>Member List</title><style><!--.datalist{ border:1px solid #0058a3; /* 表格边框 */ font-family:Arial; border-collapse:collapse; /* 边框重叠 */ background-color:#eaf5ff; /* 表格背景色 */ font-size:14px;}.datalist caption{ padding-bottom:5px; font:bold 1.4em; text-align:left;}.datalist th{ border:1px solid #0058a3; /* 行名称边框 */ background-color:#4bacff; /* 行名称背景色 */ color:#FFFFFF; /* 行名称颜色 */ font-weight:bold; padding-top:4px; padding-bottom:4px; padding-left:12px; padding-right:12px; text-align:center;}.datalist td{ border:1px solid #0058a3; /* 单元格边框 */ text-align:left; padding-top:4px; padding-bottom:4px; padding-left:10px; padding-right:10px;}.datalist tr.altrow{ background-color:#c7e5ff; /* 隔行变色 */}--></style> </head><body> <table class="datalist" summary="list of members in EE Studay"> <caption>Member List</caption> <tr> <th scope="col">Name</th> <th scope="col">Class</th> <th scope="col">Birthday</th> <th scope="col">Constellation</th> <th scope="col">Mobile</th> </tr> <tr> <!-- 奇数行 --> <td>isaac</td> <td>W13</td> <td>Jun 24th</td> <td>Cancer</td> <td>1118159</td> </tr> <tr class="altrow"> <!-- 偶数行 --> <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 class="altrow"> <!-- 偶数行 --> <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 18th</td> <td>Scorpio</td> <td>0658635</td> </tr> <tr class="altrow"> <!-- 偶数行 --> <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 class="altrow"> <!-- 偶数行 --> <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 class="altrow"> <!-- 偶数行 --> <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 class="altrow"> <!-- 偶数行 --> <td>linear</td> <td>W86</td> <td>Aug 18th</td> <td>Leo</td> <td>6398341</td> </tr> <tr> <!-- 奇数行 --> <td>laopiao</td> <td>W41</td> <td>May 17th</td> <td>Taurus</td> <td>1254004</td> </tr> <tr class="altrow"> <!-- 偶数行 --> <td>dovecho</td> <td>W19</td> <td>Dec 9th</td> <td>Sagittarius</td> <td>1892013</td> </tr> <tr> <!-- 奇数行 --> <td>shanghen</td> <td>W42</td> <td>May 24th</td> <td>Gemini</td> <td>1544254</td> </tr> <tr class="altrow"> <!-- 偶数行 --> <td>venessawj</td> <td>W45</td> <td>Apr 1st</td> <td>Aries</td> <td>1523753</td> </tr> <tr> <!-- 奇数行 --> <td>lightyear</td> <td>W311</td> <td>Mar 23th</td> <td>Aries</td> <td>1002908</td> </tr></table></body></html></span>
Analyze the above example, In the above example, we set the border-bottom to 1px, and the other border-top, border-left, and border-right borders to 0. Then we set a color and background color to achieve a text-like button. . For this button, we set all four borders to 0, and set the background color to transparent to achieve a text-like button; through this we can see that clever use of CSS can bring us many surprises. Excel spreadsheet is a very popular software in office software, and we will simulate it on the web page. In our CSS, we can input things at will just like excel in the office, without any cumbersome input boxes. Let’s take a look at the example code and running results:
The running results are as follows:
<span style="font-size:18px;"><html><head><title>表单</title><style><!--form { border: 1px dotted #AAAAAA; padding: 3px 6px 3px 6px; margin:0px; font:14px Arial;}input { color: #00008B; background-color: #ADD8E6; border: 1px solid #00008B;}select { width: 80px; color: #00008B; background-color: #ADD8E6; border: 1px solid #00008B;}textarea { width: 200px; height: 40px; color: #00008B; background-color: #ADD8E6; border: 1px solid #00008B;}--></style> </head><body><form method="post"><p>请输入您的姓名:<br><input type="text" name="name" id="name"></p><p>请选择你最喜欢的颜色:<br><select name="color" id="color"> <option value="red">红</option> <option value="green">绿</option> <option value="blue">蓝</option> <option value="yellow">黄</option> <option value="cyan">青</option> <option value="purple">紫</option></select></p><p>请问你的性别:<br> <input type="radio" name="sex" id="male" value="male">男<br> <input type="radio" name="sex" id="female" value="female">女</p><p>你喜欢做些什么:<br> <input type="checkbox" name="hobby" id="book" value="book">看书 <input type="checkbox" name="hobby" id="net" value="net">上网 <input type="checkbox" name="hobby" id="sleep" value="sleep">睡觉</p><p>我要留言:<br><textarea name="comments" id="comments" cols="30" rows="4"></textarea></p><p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit"></p></form></body></html></span>
form. The color in the table, the color change of alternate rows, the elements in the form, text buttons, a small test is to imitate the office to make an Excel table that can be edited. There is a small example, which is to imitate the Excel in the office to make an editable table. , first of all, the text part is built with a table, and the form is nested inside the table, and each item is set with an id and a name. Finally, there is a button; let’s look at the CSS code. In the table, we set the border of the td cell, and for the input text box, we set its border to none, so the effect achieved is the input border. was canceled and replaced by the border of the table, thus realizing such a little trick. Through this example, we can see that cleverly setting CSS can achieve many unexpected effects. BS study, to be continued...