问答社区

原创作者: 图龙网络科技发布时间： 2023-09-23 229.8K 人阅读

根据我用AI智能创建的响应式导航菜单的HTML、CSS和JavaScript代码示例

太极混元发布于 2个月前分类：语言编程

谁说AI智能语言模型不可以写代码？再说我撕乱谁的嘴巴......

以下是根据我的要求创建的响应式导航菜单的HTML、CSS和JavaScript代码示例：

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>探索我的专业网站</title>
<style>
/* CSS部分 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}

.navbar {
background-color: #007bff;
overflow: hidden;
}

.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.navbar a:hover {
background-color: #0056b3;
}

.carousel {
width: 100%;
margin: auto;
overflow: hidden;
}

.carousel img {
width: 100%;
display: none;
}

.content-block {
background-color: white;
padding: 20px;
margin: 20px 0;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: box-shadow 0.3s;
}

.content-block:hover {
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.button {
background-image: linear-gradient(to right, #007bff, #0056b3);
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 8px;
}

footer {
background-color: #007bff;
color: white;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>

<header>
<h1>探索我的专业网站</h1>
<div class="navbar">
<a href="#home">首页</a>
<a href="#services">服务</a>
<a href="#team">团队</a>
<a href="#contact">联系方式</a>
</div>
</header>

<div class="main-content">
<div class="content-block">
<h2>服务一</h2>
<p>这里是服务一的描述性文本。</p>
<button class="button" onclick="showAlert()">了解更多</button>
</div>
<div class="content-block">
<h2>服务二</h2>
<p>这里是服务二的描述性文本。</p>
<button class="button" onclick="showAlert()">了解更多</button>
</div>
<div class="content-block">
<h2>服务三</h2>
<p>这里是服务三的描述性文本。</p>
<button class="button" onclick="showAlert()">了解更多</button>
</div>
</div>

function showAlert() {
alert('感谢您的关注！');
}

function showNextImage() {
images[currentIndex].style.display = 'none';
currentIndex = (currentIndex + 1) % totalImages;
images[currentIndex].style.display = 'block';
}

setInterval(showNextImage, 3000); // Change image every 3 seconds
</script>

</body>
</html>
```

请将 `image1.jpg`, `image2.jpg`, `image3.jpg` 替换为实际的图片文件路径。以上代码创建了一个基本的网页布局，包括一个导航栏、一个图片轮播组件、三个内容块和一个页脚。CSS用于样式设置，包括颜色方案、悬浮效果和按钮样式。JavaScript用于实现图片轮播和按钮点击弹出对话框的功能。