如果你想使用原生HTML、CSS和JS制作自己的导航主页,你可以按照以下步骤进行操作:
先看效果图:
创建HTML文件:首先,创建一个新的HTML文件,并在文件中添加基本的HTML结构。你可以使用声明来指定文档类型,然后在标签中添加
和标签。
添加CSS样式:在
标签中,使用
// 添加点击事件
var menuItems = document.querySelectorAll('nav ul li');
menuItems.forEach(function(item) {
item.addEventListener('click', function() {
alert('你点击了 ' + this.textContent);
});
});
在这个示例代码中,我们创建了一个包含四个菜单项的导航栏。使用CSS样式对导航栏进行了基本的样式设置,包括背景颜色、字体颜色、间距等。使用JavaScript为每个菜单项添加了点击事件,当点击菜单项时,会弹出一个提示框显示被点击的菜单项的文本内容。
你可以将以上代码保存为一个HTML文件,然后在浏览器中打开该文件,即可看到一个简单的导航主页。你可以根据自己的需求和创意,修改和扩展这个基本的示例代码,来实现更复杂和个性化的导航主页。