用html ,css 编译一个网页导航,包括人文,数学,英语.科技,发展,并有搜索功能,且看上去合理,导航高度是40px,宽度是屏幕宽度,
时间: 2023-10-09 07:11:49 浏览: 81
用html实现一个简单的导航
<!DOCTYPE html>
<html>
<head>
<title>网页导航</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
nav {
background-color: #333;
height: 40px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
box-sizing: border-box;
color: #fff;
}
nav a {
color: #fff;
text-decoration: none;
margin-right: 20px;
font-size: 16px;
}
nav form {
display: flex;
align-items: center;
}
nav form input[type="text"] {
padding: 5px 10px;
border-radius: 5px;
border: none;
margin-right: 10px;
font-size: 16px;
}
nav form button {
background-color: #fff;
color: #333;
border: none;
padding: 5px 10px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
}
nav form button:hover {
background-color: #333;
color: #fff;
}
</style>
</head>
<body>
<nav>
<div>
<a href="#">人文</a>
<a href="#">数学</a>
<a href="#">英语</a>
<a href="#">科技</a>
<a href="#">发展</a>
</div>
<form>
<input type="text" placeholder="搜索...">
<button type="submit">搜索</button>
</form>
</nav>
</body>
</html>
阅读全文