请使用html加css加PHP加js写一个导航页
时间: 2024-04-26 14:22:40 浏览: 10
好的,以下是一个使用 HTML、CSS、PHP 和 JavaScript 的导航页示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>导航页</title>
<style>
/* 导航链接样式 */
.nav-link {
display: block;
padding: 10px;
margin: 10px;
background-color: #eee;
color: #333;
text-decoration: none;
border-radius: 5px;
box-shadow: 2px 2px 5px #ccc;
transition: background-color 0.2s ease-in-out;
}
.nav-link:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<h1>欢迎来到导航页</h1>
<?php
// 定义导航链接数组
$links = array(
"Google" => "https://www.google.com/",
"Baidu" => "https://www.baidu.com/",
"GitHub" => "https://github.com/",
"CSDN" => "https://www.csdn.net/"
);
// 循环输出导航链接
foreach ($links as $name => $url) {
echo "<a class=\"nav-link\" href=\"{$url}\">{$name}</a>";
}
?>
<script>
// 弹出提示框
alert("欢迎来到导航页!");
</script>
</body>
</html>
```
这个导航页在 HTML 中定义了一个导航链接样式,使用 CSS 对链接进行美化。在 PHP 中定义了一个导航链接数组 `$links`,使用循环输出每个链接。同时,在页面加载时使用 JavaScript 弹出一个欢迎提示框。