星座排行 html
以下是一個簡單的HTML代碼示例，用於展示星座排行的表格：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>星座排行</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
color: #333;
}
table {
width: 80%;
margin: 0 auto;
border-collapse: collapse;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f8f8f8;
font-weight: bold;
}
tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h1>星座排行</h1>
<table>
<thead>
<tr>
<th>排名</th>
<th>星座</th>
<th>日期範圍</th>
<th>特點</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>牡羊座</td>
<td>3月21日 - 4月19日</td>
<td>熱情、勇敢、衝動</td>
</tr>
<tr>
<td>2</td>
<td>金牛座</td>
<td>4月20日 - 5月20日</td>
<td>穩重、務實、固執</td>
</tr>
<tr>
<td>3</td>
<td>雙子座</td>
<td>5月21日 - 6月21日</td>
<td>聰明、靈活、善變</td>
</tr>
<tr>
<td>4</td>
<td>巨蟹座</td>
<td>6月22日 - 7月22日</td>
<td>敏感、體貼、情緒化</td>
</tr>
<tr>
<td>5</td>
<td>獅子座</td>
<td>7月23日 - 8月22日</td>
<td>自信、慷慨、自負</td>
</tr>
<tr>
<td>6</td>
<td>處女座</td>
<td>8月23日 - 9月22日</td>
<td>細緻、謹慎、挑剔</td>
</tr>
<tr>
<td>7</td>
<td>天秤座</td>
<td>9月23日 - 10月23日</td>
<td>公正、優雅、猶豫</td>
</tr>
<tr>
<td>8</td>
<td>天蠍座</td>
<td>10月24日 - 11月22日</td>
<td>神秘、堅韌、嫉妒</td>
</tr>
<tr>
<td>9</td>
<td>射手座</td>
<td>11月23日 - 12月21日</td>
<td>樂觀、自由、粗心</td>
</tr>
<tr>
<td>10</td>
<td>摩羯座</td>
<td>12月22日 - 1月19日</td>
<td>踏實、負責、保守</td>
</tr>
<tr>
<td>11</td>
<td>水瓶座</td>
<td>1月20日 - 2月18日</td>
<td>獨立、創新、叛逆</td>
</tr>
<tr>
<td>12</td>
<td>雙魚座</td>
<td>2月19日 - 3月20日</td>
<td>浪漫、敏感、逃避</td>
</tr>
</tbody>
</table>
</body>
</html>代碼說明：
- HTML結構：使用了
<table>標籤來創建表格，表格包含表頭（<thead>）和表體（<tbody>）。 - CSS樣式：通過內聯樣式對表格進行美化，包括字型、背景色、框線、陰影等。
- 內容：表格中列出了12個星座的排名、名稱、日期範圍和特點。
使用方法：
將上述代碼保存為一個.html檔案，使用瀏覽器打開即可查看效果。可以根據需要修改表格內容或樣式。