这是我为自己设计的个人网页效果图。
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
}
#header {
background-color: #444;
color: #fff;
text-align: center;
padding: 30px;
}
h1 {
font-size: 3em;
margin: 0;
}
#nav {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
.nav-link {
text-decoration: none;
color: #fff;
padding: 10px;
}
#content {
margin: 30px;
background-color: #fff;
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
#footer {
background-color: #444;
color: #fff;
text-align: center;
padding: 10px;
} 网页的主要颜色是黑色和白色,用于突出文字和导航链接。页面整体布局是居中对齐,让用户更容易集中注意力。
头部使用了黑色背景和白色字体,通过居中对齐和大字号突出了标题。导航链接使用了白色字体和黑色背景,鼠标悬停时字体颜色会变成红色,这样用户就可以知道自己选择了哪个页面。
中间的内容区域使用了白色背景和阴影效果,让整个内容看起来更加立体。文字和图片使用常规的字体和大小进行排版,排版整齐美观,易于阅读。
页脚区域同样使用了黑色背景和白色字体,包含了版权信息和社交媒体链接,让用户可以方便的关注作者的其他作品。