【html/html5/css/css3知识点】
HTML5 引入了一些新的语义元素，例如 <header>, <nav>, <section>, <article>, <aside> 和 <footer>，它们有助于改善代码的可读性和可维护性。
CSS3 引入了许多新特性，例如边框、阴影、圆角、渐变、变换等，以及选择器的增强，这些使得页面的样式更加丰富多样。
下面是一个简单的HTML和CSS3的示例代码，展示如何使用HTML5元素和CSS3特性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 and HTML5 Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: skyblue;
border-radius: 10px; /* 圆角 */
box-shadow: 5px 5px 10px #888; /* 阴影 */
transition: transform 0.3s ease; /* 变换动画 */
}
.box:hover {
transform: rotate(360deg); /* 鼠标悬停时旋转 */
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<div class="box"></div>
</section>
<footer>
<p>Copyright © 2023 My Website</p>
</footer>
</body>
</html>这个示例中，我们使用了HTML5的<header>, <nav>, <section>, 和 <footer>元素，以及CSS3的border-radius属性来制作圆角，box-shadow属性来添加盒子阴影，以及transition属性和:hover伪类来实现鼠标悬停时的变换动画效果。
评论已关闭