随着互联网的发展,个人网页的制作也日趋普及,而要想制作出一款优美的个人网页,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样式表源代码。希望对初学者有所启发。