CSS是建立網(wǎng)頁(yè)樣式的重要工具,其中table和li是網(wǎng)頁(yè)中常用的元素。下面我們來分別講解關(guān)于這兩個(gè)元素的CSS樣式。
/*table樣式*/
table{
border-collapse: collapse; /*合并邊框*/
width: 100%; /*設(shè)置寬度為100%*/
border: 1px solid #ddd; /*設(shè)置邊框顏色粗細(xì)*/
font-size: 16px; /*設(shè)置字號(hào)大小*/
}
th, td{
border: 1px solid #ddd; /*設(shè)置表格中th和td的邊框樣式*/
text-align: center; /*設(shè)置文本居中*/
padding: 10px; /*設(shè)置內(nèi)邊距*/
}
th{
background-color: #f6f6f6; /*設(shè)置表頭的背景顏色*/
}
/*li樣式*/
ul li{
list-style-type: none; /*去掉li標(biāo)簽?zāi)J(rèn)的圓點(diǎn)*/
font-size: 16px; /*設(shè)置字號(hào)大小*/
line-height: 30px; /*設(shè)置行高*/
padding: 5px; /*設(shè)置內(nèi)邊距*/
background-color: #f6f6f6; /*設(shè)置背景顏色*/
margin-bottom: 10px; /*設(shè)置下邊距*/
}
ul li:hover{
background-color: #ddd; /*設(shè)置鼠標(biāo)移動(dòng)到li標(biāo)簽上的背景顏色*/
cursor: pointer; /*設(shè)置鼠標(biāo)指針為手型*/
}
以上代碼中,table的樣式主要設(shè)置了表格的邊框顏色、寬度和字體大小等;li的樣式主要設(shè)置了列表項(xiàng)目的背景顏色、字體和內(nèi)邊距等。需要注意的是,table中的th和td是表頭和表格數(shù)據(jù)單元格,它們的樣式相同,但在表結(jié)構(gòu)中具有不同的作用。
上一篇table居中css樣式
下一篇mysql5分鐘前