寵物店CSS樣式設計

/* 寵物店主題顏色定義 */
:root {
--primary-color: #ff7f50;   /* 橘色 */
--secondary-color: #3cb371; /* 綠色 */
--tertiary-color: #ffd700;  /* 金色 */
}
/* 導航欄樣式 */
nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--primary-color);
color: #fff;
padding: 10px;
}
nav a {
color: #fff;
text-decoration: none;
margin: 0 20px;
}
/* 主體內容樣式 */
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card {
width: 300px;
margin: 20px;
padding: 10px;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.card h3 {
margin: 10px 0;
font-size: 22px;
}
.card p {
margin: 5px 0;
font-size: 16px;
}
/* 底部樣式 */
footer {
text-align: center;
background-color: var(--secondary-color);
color: #fff;
padding: 10px;
}
footer a {
color: var(--tertiary-color);
text-decoration: none;
margin: 0 10px;
}

以上是一個簡單的寵物店網站的CSS樣式設計，通過一定的樣式設置，讓整個頁面更加美觀和易于使用。其中，自定義了三種主題顏色，可以根據需求進行更改。