web开发:html+css(前端必备教程html5及css3)
HTML5 和 CSS3 是现代网页开发中的两个重要技术。以下是一些基本的 HTML5 和 CSS3 示例代码。
HTML5 示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Example</title>
</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>
<article>
<h2>Article Title</h2>
<p>This is an example paragraph...</p>
</article>
<article>
<h2>Another Article Title</h2>
<p>This is another example paragraph...</p>
</article>
</section>
<footer>
<p>Copyright © 2023 My Website</p>
</footer>
</body>
</html>CSS3 示例代码:
body {
font-family: Arial, sans-serif;
}
header {
background-color: #f7f7f7;
padding: 20px;
text-align: center;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
display: inline;
margin-right: 10px;
}
nav a {
text-decoration: none;
color: #000;
}
section article {
background-color: #f9f9f9;
padding: 20px;
margin-bottom: 20px;
}
footer {
background-color: #eee;
padding: 10px;
text-align: center;
margin-top: 20px;
}这些代码示例展示了如何使用 HTML5 的语义元素和 CSS3 的一些基本样式特性来创建一个简单的网页布局。在实际开发中，你可以根据具体需求添加更多的交互和视觉效果。
评论已关闭