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