请编写javascript/css代码,设计一个网页的navigation bar,要求最左侧是网站Logo,然后右侧是搜索输入框,再右侧是菜单
时间: 2024-02-25 16:56:58 浏览: 23
以下是一个简单的 HTML、CSS 和 JavaScript 代码示例,实现了一个简单的网页导航栏,其中包含网站 Logo、搜索框和菜单:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Navigation Bar</title>
<style>
/* 导航栏容器 */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
padding: 10px;
}
/* Logo */
.navbar-logo {
font-size: 24px;
font-weight: bold;
}
/* 搜索框 */
.navbar-search {
flex: 1;
margin: 0 10px;
padding: 5px;
border-radius: 5px;
border: none;
}
/* 菜单 */
.navbar-menu {
display: flex;
}
.navbar-menu-item {
margin: 0 10px;
}
</style>
</head>
<body>
<header class="navbar">
<div class="navbar-logo">My Website</div>
<form class="navbar-search">
<input type="text" placeholder="Search...">
</form>
<nav class="navbar-menu">
<a href="#" class="navbar-menu-item">Home</a>
<a href="#" class="navbar-menu-item">About</a>
<a href="#" class="navbar-menu-item">Contact</a>
</nav>
</header>
</body>
</html>
```
上面的代码中使用了 flex 布局,将导航栏分为三个部分:左侧的 Logo、中间的搜索框和右侧的菜单。其中,Logo 和菜单都使用了 `<div>` 元素,搜索框使用了 `<form>` 和 `<input>` 元素。CSS 样式定义了导航栏容器、Logo、搜索框和菜单的样式。JavaScript 可以用来处理搜索框输入等相关的事件。