家族网站css模板-家族网站源码

家族网站 CSS 模板设计可以根据不同的需求和风格进行定制。以下是一个基本的 CSS 模板设计,可以在此基础上进行修改和定制。
```css
/* 通用样式表 */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
/* 页面标题样式表 */
h1 {
font-size: 36px;
margin-top: 24px;
margin-bottom: 32px;
}
/* 页面主体样式表 */
.container {
max-width: 500px;
margin: 0 auto;
padding: 24px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
/* 导航栏样式表 */
.nav {
display: flex;
justify-content: space-between;
padding: 16px;
background-color: #fff;
color: #333;
}
.nav a {
color: #333;
text-decoration: none;
}
.nav a:hover {
background-color: #e8e8e8;
}
/* 文章列表样式表 */
.page-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.page-list li {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
}
.page-list li:last-child {
margin-bottom: 0;
}
/* 评论列表样式表 */
.comment-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.comment-list li {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
}
.comment-list li:last-child {
margin-bottom: 0;
}
/* 图片列表样式表 */
.image-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.image-list li {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
}
.image-list li:last-child {
margin-bottom: 0;
}
/* 搜索样式表 */
.search {
width: 300px;
margin: 0 auto;
padding: 24px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
border-radius: 4px;
color: #333;
font-size: 24px;
}
.search input[type="text"],
.search input[type="password"] {
display: block;
width: 100%;
padding: 16px;
margin-bottom: 24px;
border: none;
border-radius: 4px;
font-size: 16px;
}
.search input[type="submit"] {
background-color: #4CAF50;
color: #fff;
padding: 16px 24px;
border: none;
border-radius: 4px;
cursor: pointer;
}
```
这个 CSS 模板设计包含了一些基本的样式,如页面标题、导航栏、文章列表、评论列表、图片列表和搜索样式表。可以根据需要进行修改和定制。