网页架构实例

编写一段 html 代码。体现 H5结构性标签，编写一个网页架构的页面。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页架构示例</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 0;}header, nav, section, article, aside, footer {padding: 20px;margin: 10px;}header {background-color: #4CAF50;color: white;text-align: center;}nav {background-color: #f1f1f1;}nav ul {list-style-type: none;padding: 0;}nav ul li {display: inline;margin-right: 10px;}section {display: flex;}article {flex: 3;background-color: #f9f9f9;}aside {flex: 1;background-color: #e9e9e9;}footer {background-color: #333;color: white;text-align: center;}</style>
</head>
<body><header><h1>网站标题</h1><p>网站副标题或描述</p></header><nav><ul><li><a href="#">首页</a></li><li><a href="#">关于我们</a></li><li><a href="#">服务</a></li><li><a href="#">联系</a></li></ul></nav><section><article><h2>主要内容</h2><p>这里是主要内容区域。</p></article><aside><h2>侧边栏</h2><p>这里是侧边栏内容。</p></aside></section><footer><p>版权所有 © 2024 网站名称</p></footer>
</body>
</html>

编写JavaScript 鼠标事件脚本动态设置菜单样式。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网站导航示例</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 0;}nav {background-color: #333;}nav ul {list-style-type: none;margin: 0;padding: 0;}nav ul li {display: inline-block;position: relative;}nav ul li a {color: white;text-decoration: none;padding: 10px 20px;display: block;}nav ul li a:hover, nav ul li a.active {background-color: #4CAF50;}nav ul li ul {display: none;position: absolute;top: 100%;left: 0;background-color: #333;list-style-type: none;padding: 0;}nav ul li ul li {display: block;}nav ul li:hover ul {display: block;}</style>
</head>
<body><nav><ul><li><a href="#" class="nav-item">主页</a></li><li><a href="#" class="nav-item">产品</a><ul><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li></ul></li><li><a href="#" class="nav-item">服务</a></li><li><a href="#" class="nav-item">关于我们</a></li><li><a href="#" class="nav-item">联系我们</a></li></ul></nav><script>document.querySelectorAll('.nav-item').forEach(item => {item.addEventListener('mouseenter', () => {item.classList.add('active');});item.addEventListener('mouseleave', () => {item.classList.remove('active');});});</script>
</body>
</html>