[分享]css个人网页效果图

这是我为自己设计的个人网页效果图。

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;
} 

网页的主要颜色是黑色和白色，用于突出文字和导航链接。页面整体布局是居中对齐，让用户更容易集中注意力。

头部使用了黑色背景和白色字体，通过居中对齐和大字号突出了标题。导航链接使用了白色字体和黑色背景，鼠标悬停时字体颜色会变成红色，这样用户就可以知道自己选择了哪个页面。

中间的内容区域使用了白色背景和阴影效果，让整个内容看起来更加立体。文字和图片使用常规的字体和大小进行排版，排版整齐美观，易于阅读。

页脚区域同样使用了黑色背景和白色字体，包含了版权信息和社交媒体链接，让用户可以方便的关注作者的其他作品。