星座排行html
以下是一個簡單的HTML代碼示例，用於創建一個星座排行的網頁。這個示例展示了如何列出12個星座，並為每個星座添加一些基本的描述。
<!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;
color: #333;
padding: 20px;
}
h1 {
text-align: center;
color: #555;
}
.zodiac {
background-color: #fff;
margin: 10px 0;
padding: 15px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.zodiac h2 {
margin-top: 0;
color: #444;
}
.zodiac p {
margin: 5px 0;
}
</style>
</head>
<body>
<h1>星座排行</h1>
<div class="zodiac">
<h2>牡羊座 (Aries)</h2>
<p>日期: 3月21日 - 4月19日</p>
<p>特點: 熱情、勇敢、衝動</p>
</div>
<div class="zodiac">
<h2>金牛座 (Taurus)</h2>
<p>日期: 4月20日 - 5月20日</p>
<p>特點: 穩重、務實、固執</p>
</div>
<div class="zodiac">
<h2>雙子座 (Gemini)</h2>
<p>日期: 5月21日 - 6月21日</p>
<p>特點: 聰明、善變、好奇</p>
</div>
<div class="zodiac">
<h2>巨蟹座 (Cancer)</h2>
<p>日期: 6月22日 - 7月22日</p>
<p>特點: 情感豐富、保護性強、敏感</p>
</div>
<div class="zodiac">
<h2>獅子座 (Leo)</h2>
<p>日期: 7月23日 - 8月22日</p>
<p>特點: 自信、慷慨、領導力強</p>
</div>
<div class="zodiac">
<h2>處女座 (Virgo)</h2>
<p>日期: 8月23日 - 9月22日</p>
<p>特點: 細心、完美主義、務實</p>
</div>
<div class="zodiac">
<h2>天秤座 (Libra)</h2>
<p>日期: 9月23日 - 10月23日</p>
<p>特點: 公正、社交能力強、猶豫不決</p>
</div>
<div class="zodiac">
<h2>天蠍座 (Scorpio)</h2>
<p>日期: 10月24日 - 11月22日</p>
<p>特點: 神秘、強烈、意志堅定</p>
</div>
<div class="zodiac">
<h2>射手座 (Sagittarius)</h2>
<p>日期: 11月23日 - 12月21日</p>
<p>特點: 樂觀、自由、冒險</p>
</div>
<div class="zodiac">
<h2>摩羯座 (Capricorn)</h2>
<p>日期: 12月22日 - 1月19日</p>
<p>特點: 實際、負責、有野心</p>
</div>
<div class="zodiac">
<h2>水瓶座 (Aquarius)</h2>
<p>日期: 1月20日 - 2月18日</p>
<p>特點: 獨立、創新、人道主義</p>
</div>
<div class="zodiac">
<h2>雙魚座 (Pisces)</h2>
<p>日期: 2月19日 - 3月20日</p>
<p>特點: 敏感、同情心強、富有想像力</p>
</div>
</body>
</html>代碼說明：
- HTML結構：使用了
<div>元素來包裹每個星座的信息，並為每個星座添加了標題（<h2>）和描述（<p>）。 - CSS樣式：通過簡單的CSS樣式，美化了頁面的外觀，設定了背景顏色、字型、邊距等。
- 回響式設計：通過
<meta name="viewport">標籤，確保頁面在行動裝置上也能良好顯示。
你可以將此代碼保存為一個.html檔案，然後在瀏覽器中打開查看效果。