首页用html ,css 编译一个网页导航,包括人文,数学,英语.科技,发展,并有搜索功能,且看上去合理,导航高度是40px,宽度是屏幕宽度,

用html ,css 编译一个网页导航,包括人文,数学,英语.科技,发展,并有搜索功能,且看上去合理,导航高度是40px,宽度是屏幕宽度,

时间: 2023-10-09 12:11:49 浏览: 89

<!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>

阅读全文