/*CSS3 Style*/ body { font-family: Arial, sans-serif; } header { background-color: #fff; height: 100px; box-shadow: 0 2px 2px #ccc; } h1 { font-size: 36px; } nav { float: left; margin-right: 20px; } nav ul { list-style: none; padding: 0; } nav ul li { display: inline-block; margin-right: 10px; } nav ul li a { color: #000; text-decoration: none; }
以上代码显示了如何使用 CSS3 样式表语言来设计网站首页。其中,header 标签可以使网站头部更具吸引力,而 nav 标签则可以在网站中方便地添加导航菜单。使用 CSS3,您可以自定义字体、字体大小和颜色等属性。
此外,CSS3 还支持各种动画效果,如过渡、旋转和缩放等。这些效果能够使您的页面更加生动有趣,吸引更多访问者。例如,您可以使用 transition 属性来实现页面元素的平滑过渡。
/*CSS3 Transition*/ button { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.5s ease; } button:hover { background-color: #555; }
以上代码展示了如何使用 CSS3 的过渡动画来改变按钮的背景颜色。当鼠标悬停在按钮上时,背景颜色会平滑过渡到 #555。这样的按钮看起来更加生动有趣,也更容易吸引访问者点击。
综上所述,CSS3 是一门非常有用的技术,它可以帮助您设计更加美丽和生动有趣的网站首页。