CSS模板是一種設計動漫網站的基本工具。通常,網站的外觀和風格取決于所使用的CSS模板。這些模板可以幫助管理員和開發人員快速設計出一個漂亮、流暢和易于導航的網站。下面我們來介紹一種基于CSS模板的動漫網站。
/* 初始化樣式 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 全局設置 */ body { font-family: "PingFang SC", sans-serif; background-color: #f5f5f5; color: #333; font-size: 14px; } /* 頭部 */ .header { height: 50px; width: 100%; background-color: #222; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; } .logo { font-size: 24px; font-weight: bold; color: #fff; } .nav { display: flex; } .nav a { color: #fff; text-decoration: none; margin-left: 20px; transition: color 0.3s ease; } .nav a:hover { color: #f00; } /* 主體部分 */ .content { width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px; } /* 文章列表 */ .post-list { display: flex; flex-wrap: wrap; } .post { width: calc(33% - 20px); margin: 10px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 6px rgba(0,0,0,0.3); cursor: pointer; transition: box-shadow 0.3s ease; overflow: hidden; } .post:hover { box-shadow: 0 0 12px rgba(0,0,0,0.6); } .post .img { width: 100%; height: 200px; background-size: cover; background-position: center; } .post .title { padding: 10px; font-size: 18px; font-weight: bold; } .post .excerpt { padding: 10px; font-size: 14px; line-height: 1.5; } /* 底部 */ .footer { height: 100px; width: 100%; background-color: #222; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 12px; } .footer p { margin-bottom: 5px; } .footer a { color: #fff; text-decoration: none; transition: color 0.3s ease; } .footer a:hover { color: #f00; }
以上就是一個簡單的CSS模板,用于設計動漫網站。通過這個模板,你可以構建出一個漂亮、流暢且易于導航的動漫網站。