-----------------------------------------------CSS的表格样式和列表样式--------------------------------------------------
Table样式处理
代码示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格设置</title> <style type="text/css"> .mytable{ border:1px solid #A6C1E4; font-family:Arial; border-collapse: collapse; } table th{ border:1px solid black; background-color:#71c1fb; width:100px; height:20px; font-size:15px; } table td{ border:1px solid #A6C1E4; text-align:center; height:15px; padding-top:5px; font-size:12px; }
.double{ background-color:#c7dff6; } </style> </head> <body>
<table class="mytable"> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>地址</th> <th>生日</th> <th>工资</th> </tr> <tr> <td>李小龙</td> <td>32</td> <td>男</td> <td>香港</td> <td>1955-07-23</td> <td>10000</td> </tr> <tr class="double"> <td>李小龙</td> <td>32</td> <td>男</td> <td>香港</td> <td>1955-07-23</td> <td>10000</td> </tr> <tr> <td>李小龙</td> <td>32</td> <td>男</td> <td>香港</td> <td>1955-07-23</td> <td>10000</td> </tr> <tr class="double"> <td>李小龙</td> <td>32</td> <td>男</td> <td>香港</td> <td>1955-07-23</td> <td>10000</td> </tr> <tr> <td>李小龙</td> <td>32</td> <td>男</td> <td>香港</td> <td>1955-07-23</td> <td>10000</td> </tr> <tr class="double"> <td>李小龙</td> <td>32</td> <td>男</td> <td>香港</td> <td>1955-07-23</td> <td>10000</td> </tr> <tr> <td>李小龙</td> <td>32</td> <td>男</td> <td>香港</td> <td>1955-07-23</td> <td>10000</td> </tr> <tr class="double"> <td>李小龙</td> <td>32</td> <td>男</td> <td>香港</td> <td>1955-07-23</td> <td>10000</td> </tr> </table> </body> </html> |
---------------------------------------------------------------------------------------
列表样式
代码示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>列表样式</title> <style type="text/css"> body{ background-color:#f8d080; font-family:黑体; font-size:15px; } ul{ list-style-type:none;/* 去掉li前面的点 */ } li{ margin:10px; background: url(icon.gif) no-repeat; padding-left:30px; padding-top:5px; height:30px; }
</style> </head> <body> <ul> <li>篮球运动</li> <li>田径运动</li> <li>足球运动</li> <li>游泳运动</li> </ul> </body> </html> |
--------------------------------------------------------------------------------------------
列表菜单制作
代码示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>列表样式</title> <style type="text/css"> body{ background-color:#ffdee0; font-family:黑体; font-size:18px; } ul{ list-style-type:none; } ul li{ border:1px solid #ffff00; width:200px; text-align:center; height:20px; margin-bottom:2px; background-color:#c11136; } li a{ text-decoration:none; color:yellow; } li:hover{ background-color:blue; color:white; border:1px solid black; } li a:hover{ color:white; } a:VISITED { color:red; } </style> </head> <body> <ul> <li><a href="#">学生管理</a></li> <li><a href="#">老师管理</a></li> <li><a href="#">考试管理</a></li> <li><a href="#">考勤管理</a></li> </ul> </body> </html> |
-----------------------------------------------------------------------------------------
列表制作横向菜单
代码示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>列表样式</title> <style type="text/css"> body{ background-color:#ffdee0; font-family:黑体; font-size:15px; } ul{ list-style-type:none; } ul li{ width:100px; text-align:center; height:20px; margin-right:10px; background-color:#c11136; float:left; padding-top:3px; border-bottom:5px solid black; } li a{ display:block; text-decoration:none; color:yellow; } li:hover{ background-color:blue; color:white; border:1px solid yellow; border-bottom:5px solid black;
} li a:hover{ color:yellow; } a:VISITED { color:white; } </style> </head> <body> <ul> <li><a href="#">学生管理</a></li> <li><a href="#">老师管理</a></li> <li><a href="#">考试管理</a></li> <li><a href="#">考勤管理</a></li> </ul> </body> </html> |
