整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
html的文件結(jié)構(gòu)大家都是知道的了，總體分為head和body部分
我們要實(shí)現(xiàn)變色，在head部分實(shí)現(xiàn)格式
<style>
.tablex {border-collapse: collapse;}
.tablex tr {}
.tablex tr td {text-align:center; line-height:30px;}
.tablex tr td:hover { background-color:#f00; color:#fff;}
</style>
然后在body部分，使用table時(shí)候，注明class="tablex".這樣的話，就實(shí)現(xiàn)了我們所說(shuō)的效果了。
附上完整代碼：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>測(cè)試鼠標(biāo)移到到表格單元格背景顏色改變的</title>
<style>
.table1 {border-collapse: collapse;}
.table1 tr {}
.table1 tr td {text-align:center; line-height:30px;}
.table1 tr td:hover { background-color:#006030; color:#006030;}
</style>
</head>
<body>
<table class="table1" width="70%" border="1">
<tr>
<td>測(cè)試</td>
<td>測(cè)試</td>
<td>測(cè)試</td>
<td>測(cè)試</td>
</tr>
<tr>
<td>測(cè)試</td>
<td>測(cè)試</td>
<td>測(cè)試</td>
<td>測(cè)試</td>
</tr>
<tr>
<td>測(cè)試</td>
<td>測(cè)試</td>
<td>測(cè)試</td>
<td>測(cè)試</td>
</tr>
<tr>
<td>測(cè)試</td>
<td>測(cè)試</td>
<td>測(cè)試</td>
<td>測(cè)試</td>
</tr>
<tr>
<td>測(cè)試</td>
<td>測(cè)試</td>
<td>測(cè)試</td>
<td>測(cè)試</td>
</tr>
</table>
</body>
</html>
在任何一個(gè)瀏覽器中運(yùn)行，效果如下
南大盛聯(lián)20年來(lái)一直致力于高端IT培訓(xùn)--打造高級(jí)軟件人才實(shí)戰(zhàn)培訓(xùn)專(zhuān)家，學(xué)生對(duì)我們的認(rèn)可是我們一直前進(jìn)的動(dòng)力；項(xiàng)目團(tuán)隊(duì)全球招聘，特聘來(lái)自海外的老師進(jìn)行任教，采用100%商業(yè)項(xiàng)目進(jìn)行實(shí)戰(zhàn)培訓(xùn)，線上線下同步進(jìn)行。
課程全部緊隨市場(chǎng)需求進(jìn)行設(shè)計(jì)，并且動(dòng)態(tài)進(jìn)行調(diào)整；7天免費(fèi)試聽(tīng)，0首付開(kāi)始學(xué)習(xí)，學(xué)完后進(jìn)行100%推薦就業(yè)，不滿意工作崗位2次推薦。
選定一個(gè)平臺(tái)，認(rèn)識(shí)一群志同道合的朋友，你的未來(lái)人生路必定不一樣。
目前已經(jīng)開(kāi)設(shè)下面這些培訓(xùn)項(xiàng)目
Java培訓(xùn)
安卓培訓(xùn)
JavaWeb培訓(xùn)
Linux培訓(xùn)
云服務(wù)器布置培訓(xùn)
HTML5培訓(xùn)
SEO培訓(xùn)
視頻剪輯培訓(xùn)
UI培訓(xùn)
歡迎您們分享給自己愿意分享的朋友，大家一起來(lái)進(jìn)步；相互轉(zhuǎn)告，咨詢，學(xué)習(xí)。
南大盛聯(lián)培訓(xùn)理念：我懂，我也能讓你懂。
格語(yǔ)法:
注意：顏色使用格式有三種：rgb(x,x,x) #xxxxxx colorname
<table width=""></table>指定表格的寬度大小(使用數(shù)字pixel或%)
<table border=""></table>設(shè)定表格邊框大小(使用數(shù)字pixel)
<table align=""></table>表格位置,置左,為默認(rèn)值
align屬性:left(左對(duì)齊表格，默認(rèn)值)、right(右對(duì)齊表格)、center(居中對(duì)齊表格)
<table bgcolor=""></table>設(shè)定表格的背景顏色
<table cellpadding=""></table>指定內(nèi)容與網(wǎng)格線之間的間距(使用數(shù)字pixel或%)
<table cellspacing=""></table>指定網(wǎng)格線與網(wǎng)格線之間的距離(使用數(shù)字pixel或%)
<table border="1" cellspacing="0" cellpadding="0">
通常表格, 這兩個(gè)參數(shù)都設(shè)置為 0 。
<table rules="rows"></table>規(guī)定內(nèi)側(cè)邊框的哪個(gè)部分是可見(jiàn)的。(兼容性差)
rules屬性:none 沒(méi)有線條。
groups 位于行組和列組之間的線條。
rows 位于行之間的線條。
cols 位于列之間的線條。
all 位于行和列之間的線條。
<table summary="Monthly savings for the Flintstones family"></table>
定義了表格內(nèi)容的摘要：
表格結(jié)構(gòu)：
在使用表格進(jìn)行布局時(shí), 可以將表格劃分為頭部、主體和頁(yè)腳, 具體如下所示：
<thead></thead>：用于定義表格的頭部, 必須位于<table></table>標(biāo)記中, 一般包含網(wǎng)頁(yè)的logo和導(dǎo)航等頭部信息。
<tfoot></tfoot>：用于定義表格的頁(yè)腳, 位于<table></table>標(biāo)記中<thead></thead>標(biāo)記之后, 一般包含網(wǎng)頁(yè)底部的企業(yè)信息等。
<tbody></tbody>：用于定義表格的主體, 位于<table></table>標(biāo)記中<tfoot></tfoot>標(biāo)記之后, 一般包含網(wǎng)頁(yè)中除頭部和底部之外的其他內(nèi)容。
注意：在沒(méi)有<tbody></tbody>比較的情況下, 瀏覽器會(huì)自動(dòng)添加<tbody></tbody>標(biāo)記。
<table bordercolor=""></table>設(shè)定表格邊框的顏色
<table cols=""></table>指定表格的欄數(shù)
<table height=""></table>指定表格的高度大小(使用數(shù)字)
<table background=""></table>背景圖片的URL=就是路徑網(wǎng)址(默認(rèn)是repeat：水平和垂直方向重復(fù))
<table bordercolordark=""></table>設(shè)定表格暗邊框的顏色
<table bordercolorlight=""></table>設(shè)定表格亮邊框的顏色
<tr align=""></tr> 定義表格行的內(nèi)容對(duì)齊方式。
align屬性值:right、left、center、justify、char
<tr bgcolor=""></tr> 規(guī)定表格行的背景顏色。
<tr valign=""></tr> 規(guī)定表格行中內(nèi)容的垂直對(duì)齊方式。
valign屬性值right、left、center、justify、char
<td colspan=""></td>指定儲(chǔ)存格合并欄的欄數(shù)(使用數(shù)字)
<td rowspan=""></td>指定儲(chǔ)存格合并列的列數(shù)(使用數(shù)字)
<td align=""></td> 調(diào)整表格字段之左右對(duì)齊
<td bgcolor=""></td> 設(shè)定表格字段之背景顏色
<td colspan="" rowspan=""></td> 表格字段的合并
<td valign=""></td> 調(diào)整表格字段之上下對(duì)齊
<td width=""></td> 調(diào)整表格字段寬度
<td nowrap="nowrap"></td> 規(guī)定表格單元格中的內(nèi)容不換行(注意只有一個(gè)值:nowrap)
<caption></caption>為表格加上標(biāo)題
<caption align="">設(shè)定表格標(biāo)題位置
align屬性:left, center(默認(rèn)值), right
<th></th> 定義表頭(粗體居中)
細(xì)表格邊框
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="158" height="68">
<tr>
<td width="158" height="68"></td>
</tr>
</table>表格創(chuàng)建后瀏覽器會(huì)自動(dòng)添加<tbody>標(biāo)簽
tml代碼里，表示顏色一般用兩種方法，一種是直接寫(xiě)出顏色的英文，另一種是前面寫(xiě)個(gè)“#”后面再寫(xiě)6個(gè)數(shù)字字母。
先說(shuō)第一種表示方法，這個(gè)很簡(jiǎn)單，如果要表示黑色直接就是black，紅色就red，藍(lán)色就blue。具體的我們看下面圖1，圖2
圖1
圖2
現(xiàn)在來(lái)說(shuō)第二種，這也是我們這個(gè)文章要重點(diǎn)說(shuō)的，因?yàn)檫@個(gè)也是最經(jīng)常用的表示方法，很多人看到這個(gè)又是字?jǐn)?shù)又是字母的就糊涂了，今天我們來(lái)詳細(xì)的把它講清楚。先用圖片來(lái)說(shuō)明一下，先看下面圖3
圖3
圖3里的#000000表示的是黑色，#ff0000表示紅色，#00ff00表示綠色，所以說(shuō)這個(gè)效果是和圖1一樣的。那要怎么理解這種表示顏色的方法呢，我們?cè)賮?lái)列出幾個(gè)顏色和它的表示法：
紅色：#ff0000，綠色：#00ff00，藍(lán)色：#0000ff， 大家仔細(xì)看一下就可發(fā)現(xiàn)，這個(gè)和我們平常說(shuō)的RGB格式來(lái)表示顏色是一樣的，相當(dāng)于紅綠藍(lán)三個(gè)光，而f是十六進(jìn)制中的0,1,2,.....e,f中的f了 。f是里面的最大值了，ff代表該顏色光的值達(dá)到最大，所以#ff0000是紅色，#880000表示的也是紅色，只是沒(méi)有#ff0000這個(gè)那么紅了。其他的也是同理。所以#000000代表三個(gè)顏色光的值都為0，沒(méi)有任何光了，那就是黑色了，相反#ffffff代表三個(gè)顏色光的值都達(dá)到最大，混合在一起就成白色。我們也知道紅光和藍(lán)光混在一起是紫色的，所以#ff00ff表示的是紫色，同樣#ffff00表示的是黃色。講到這里相信大家應(yīng)該都明白了怎樣用這種方法表示顏色了吧，如果要表示一種顏色，只要把相應(yīng)的值增加或減小或者添加另一個(gè)顏色，這樣就可以得到千千萬(wàn)萬(wàn)種顏色了。
這兩種表示顏色的方法都講完了，尤其是第二種方法，大部分情況都是用這種方法來(lái)表示html里面的顏色的。如果大家有什么更好的更容易理解的想法，可以點(diǎn)擊關(guān)注【點(diǎn)點(diǎn)有你】一起來(lái)討論一下哦
最后，如果您覺(jué)得我寫(xiě)的這些文章對(duì)您有幫助的話，您可以根據(jù)您的情況隨意給點(diǎn)賞金，我相信一分也是愛(ài)也是支持，下面兩圖是我的支付寶和微信收款碼。當(dāng)然寫(xiě)文章不是一定要讓您給賞金的，有您的支持和贊助，我會(huì)有更多動(dòng)力來(lái)寫(xiě)文章和大家分享的，再次感謝您的支持和理解！
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
