色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

動漫網站css模板

江奕云2年前8瀏覽0評論

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模板,用于設計動漫網站。通過這個模板,你可以構建出一個漂亮、流暢且易于導航的動漫網站。