本篇文章為大家展示了html5中實(shí)現(xiàn)table表格中的斜線表頭效果有哪些做法,代碼簡(jiǎn)明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。
創(chuàng)新互聯(lián)建站主營(yíng)臨夏網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶APP開(kāi)發(fā)公司,臨夏h5重慶小程序開(kāi)發(fā)搭建,臨夏網(wǎng)站營(yíng)銷推廣歡迎臨夏等地區(qū)企業(yè)咨詢
table表格,這個(gè)東西大家肯定都不陌生,代碼中我們時(shí)常都能碰到,那么給table加一個(gè)斜線的表頭有時(shí)是很有必要的,但是到底該怎么實(shí)現(xiàn)這種效果呢?
我總結(jié)了以下幾種方法:
1、最最最簡(jiǎn)單的做法
直接去找公司的UI,讓她做一張圖片,作為背景圖片放到這里,然后撐滿就可以了。是不是很簡(jiǎn)單?。?!
2、相當(dāng)簡(jiǎn)單的做法
其實(shí)了解css3的朋友,一看到這個(gè)效果,腦子中瞬間出現(xiàn)的就是transform這個(gè)屬性,是的,這個(gè)確實(shí)可以,也很簡(jiǎn)單,就是有一個(gè)問(wèn)題要注意瀏覽器的兼容性問(wèn)題,大家心里要要時(shí)刻保持著危機(jī)意識(shí)(IE還存在呢),如果你們公司的要求是只兼容chrome,那么,這個(gè)方法很適合你。
3、十分簡(jiǎn)單的做法
.biaoTou { border-top: 200px #199fff solid; /*上邊框?qū)挾鹊扔诒砀竦谝恍行懈?/ border-left: 200px #ff8838 solid; /*左邊框?qū)挾鹊扔诒砀竦谝恍械谝桓駥挾?/ }
<td width="200"> <p class="biaoTou"> </p> </td>
這種方法也很簡(jiǎn)單,按照上面的格式寫下來(lái)就好了。但是這種寫法有個(gè)明顯的問(wèn)題:這種其實(shí)就是利用兩種顏色的不同的border劃分表頭的斜線的,斜線兩邊的顏色不能相同,如果是做一些促銷活動(dòng)之類的表格時(shí)可以用這種方法。但是如果我們需要斜線兩邊的顏色一樣時(shí),這種做法是不適用的。慎用。
4、很簡(jiǎn)單的做法
這種效果其實(shí)還可以用css3的另一個(gè)新的標(biāo)簽canvas。將其作為畫布畫一條斜線是一種十分簡(jiǎn)單的做法,就不詳細(xì)解釋了,但是也有一個(gè)問(wèn)題,就是老生常談的兼容性問(wèn)題了,如果只是兼容chrome,你想怎么辦都行(為什么我們公司一直要考慮可惡的IE,我也想只做兼容谷歌的項(xiàng)目?。?。
5、不簡(jiǎn)單的做法
那就是js做法了
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>斜線表頭</TITLE> <meta http-equiv="content-type" content="charset=gbk"> </HEAD> <body leftmargin=0 topmargin=0> <br> <p height="300">header</p> <hr> <TABLE border=0 bgcolor="000000" cellspacing="1" width=400 style="margin-left: 100px;"> <TR bgcolor="FFFFFF"> <TD width="111" height="52"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td id="td1"></td> <td>成績(jī)</td> </tr> <tr> <td>姓名</td> <td id="td2"></td> </tr> </table></TD> <TD width="81">數(shù)學(xué)</TD> <TD width="96">英語(yǔ)</TD> <TD width="99">C語(yǔ)言</TD> </TR> <TR bgcolor="FFFFFF"> <TD>張三</TD> <TD>55</TD> <TD>66</TD> <TD>77</TD> </TR> <TR bgcolor="FFFFFF"> <TD>李四</TD> <TD>99</TD> <TD>68</TD> <TD>71</TD> </TR> <TR bgcolor="FFFFFF"> <TD>王五</TD> <TD>33</TD> <TD>44</TD> <TD>55</TD> </TR> </TABLE> <script type="text/javascript"> function a(x, y, color) { document .write("<img border='0' style='position: absolute; left: " + (x) + "; top: " + (y) + ";background-color: " + color + "' src='px.gif' width=1 height=1>") } function getTop(tdobj) { vParent = tdobj.offsetParent; t = tdobj.offsetTop; while (vParent.tagName.toUpperCase() != "BODY") { t += vParent.offsetTop; vParentvParent = vParent.offsetParent; } return t; } function getLeft(tdobj) { vParent = tdobj.offsetParent; t = tdobj.offsetLeft; while (vParent.tagName.toUpperCase() != "BODY") { t += vParent.offsetLeft; vParentvParent = vParent.offsetParent; } return t; } function line(x1, y1, x2, y2, color) { var tmp if (x1 >= x2) { tmp = x1; x1 = x2; x2 = tmp; tmp = y1; y1 = y2; y2 = tmp; } for ( var i = x1; i <= x2; i++) { x = i; y = (y2 - y1) / (x2 - x1) * (x - x1) + y1; a(x, y, color); } } //line(1,1,100,100,"000000"); line(getLeft(td1), getTop(td1), getLeft(td1) + td1.offsetWidth, getTop(td1) + td1.offsetHeight, '#000000'); line(getLeft(td2), getTop(td2), getLeft(td2) + td2.offsetWidth, getTop(td2) + td2.offsetHeight, '#000000'); </script> </BODY> </HTML>
上述內(nèi)容就是html5中實(shí)現(xiàn)table表格中的斜線表頭效果有哪些做法,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)站標(biāo)題:html5中實(shí)現(xiàn)table表格中的斜線表頭效果有哪些做法
鏈接地址:http://m.rwnh.cn/article14/jgppde.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供靜態(tài)網(wǎng)站、微信小程序、做網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)