HTML是網頁制作的基礎語言,我們可以寫出各種各樣的網頁效果,其中表格常常用來展示數據,HTML的表格也可以使用CSS樣式進行美化,同時還可以添加特效使表格更加生動、豐富。下面是一段使用CSS與JS實現的表格動畫特效的代碼:
/* CSS代碼 */
table {
border-collapse: collapse;
width: 100%;
margin: 50px auto;
}
td, th {
border: 1px solid #ddd;
padding: 8px;
transition: background-color 0.3s ease;
}
th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #04AA6D;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
.highlight {
background-color: yellow;
}
/* JS代碼 */
var table = document.getElementsByTagName('table')[0];
var cells = table.getElementsByTagName('td');
for (var i = 0; i< cells.length; i++) {
cells[i].addEventListener('mouseover', function(){
this.classList.add('highlight');
});
cells[i].addEventListener('mouseout', function(){
this.classList.remove('highlight');
});
}
以上代碼實現了鼠標移到表格單元格上時單元格背景變為黃色,鼠標離開時恢復默認顏色的功能。整段代碼主要包括兩部分:CSS部分定義了表格的樣式,JS部分為表格添加了動畫效果。
通過這段代碼的學習,我們可以更好地理解HTML表格的結構和CSS樣式的應用,也能初步了解JS的DOM操作和事件綁定方法。同時,這段代碼也可以作為我們自己網頁特效設計的參考,用來增強自己網頁的可讀性、可視性和互動性,提高網頁的用戶體驗。
上一篇html特效紅色花瓣代碼
下一篇VUE手機的編輯