HTML5 和 CSS3 迁移即时入门
warning:
这篇文章距离上次修改已过453天，其中的内容可能已经有所变动。
HTML5 和 CSS3 是当前网页设计和开发的主要技术。以下是一个简单的 HTML5 文档示例，它展示了如何使用 HTML5 的一些新特性，比如 <header>、<nav>、<section> 和 <footer> 等语义化标签。CSS3 则用于添加视觉效果和布局，比如圆角、阴影和渐变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 和 CSS3 示例</title>
<style>
body {
font-family: Arial, sans-serif;
}
header {
background-color: #f7f7f7;
padding: 1em;
border-bottom: 1px solid #ddd;
box-shadow: 0 1px 5px #ccc;
border-radius: 10px;
}
nav {
margin: 1em 0;
text-align: center;
}
section {
padding: 1em;
background-color: #f9f9f9;
border-radius: 10px;
box-shadow: 0 1px 5px #ccc;
margin-bottom: 1em;
}
footer {
background-color: #f7f7f7;
padding: 1em;
border-top: 1px solid #ddd;
box-shadow: 0 -1px 5px #ccc;
border-radius: 10px;
}
.gradient {
background: linear-gradient(to bottom, #ffcc00, #ff6600);
}
</style>
</head>
<body>
<header>
<h1>我的网站</h1>
</header>
<nav>
<a href="#">主页</a> |
<a href="#">关于</a> |
<a href="#">联系</a>
</nav>
<section class="gradient">
<h2>最新文章</h2>
<p>这里是一篇文章的内容。</p>
</section>
<footer>
<p>版权所有 © 2023</p>
</footer>
</body>
</html>这个示例展示了如何结合使用 HTML5 和 CSS3 创建一个简单的网页布局。通过使用这些技术，开发者可以更容易地创建现代化的网站，同时也为未来的网页设计和开发奠定基础。
评论已关闭