[分享]css个人网页及源代码

随着互联网的发展，个人网页的制作也日趋普及，而要想制作出一款优美的个人网页，css样式表的运用是必不可少的。下面将分享我制作的个人网页及其css源代码。我的个人网页主题是“旅行”，因为我热爱旅游，喜欢...

随着互联网的发展，个人网页的制作也日趋普及，而要想制作出一款优美的个人网页，css样式表的运用是必不可少的。下面将分享我制作的个人网页及其css源代码。

我的个人网页主题是“旅行”，因为我热爱旅游，喜欢走遍各地景观和文化。因此，我的网页主页的顶端设计了一个灰色的导航栏用于连接不同的页面。导航栏采用圆角矩形样式，鼠标经过时会有渐变动画效果。

nav {
   background-color: #555;
   border-radius: 10px;
   padding: 10px;
}
nav a {
   color: #fff;
   font-size: 1.5em;
   margin-right: 20px;
   transition: all 0.3s ease;
}
nav a:hover {
   color: #fcd212;
   transform: scale(1.2);
} 

接下来是主页的主体部分，包括一张欧洲城市的精美照片、一段简短的自我介绍以及一个联系方式表单。照片采用了响应式设计以兼容不同的屏幕分辨率。自我介绍段落采用了特别字体和渐变色背景以突出重点。联系方式表单全部采用了圆角矩形样式。

.home {
   width: 80%;
   margin: 30px auto;
}
.home img {
   width: 100%;
   height: auto;
}
.intro {
   font-family: 'Dancing Script', cursive;
   color: #fff;
   background: linear-gradient(to bottom right, #fcd212, #f7971e);
   padding: 20px;
   border-radius: 10px;
   margin-bottom: 50px;
}
.contact-form input {
   display: block;
   width: 100%;
   margin-bottom: 10px;
   padding: 10px;
   border-radius: 5px;
}
.contact-form textarea {
   display: block;
   width: 100%;
   margin-bottom: 10px;
   padding: 10px;
   border-radius: 5px;
}
.contact-form input[type="submit"] {
   background-color: #fcd212;
   color: #fff;
   border: none;
   padding: 10px 20px;
   border-radius: 5px;
}
.contact-form input[type="submit"]:hover {
   background-color: #f7971e;
} 

最后是网页的底部部分，包括版权声明、社交媒体图标和友情链接。这里使用了css图标库提供的icon font以及flexbox布局。

.footer {
   background-color: #fcd212;
   padding: 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.footer p {
   margin: 0;
   font-size: 0.8em;
}
.footer a {
   color: #555;
   margin-right: 10px;
}
.social-icons {
   display: flex;
}
.social-icons a {
   color: #555;
   margin-right: 10px;
   font-size: 1.2em;
}
.social-icons a:hover {
   color: #f7971e;
} 

以上就是我制作的个人网页以及其对应的css样式表源代码。希望对初学者有所启发。