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

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

时间: 2023-10-07 18:07:14 浏览: 81

<!DOCTYPE html> <html> <head> <title>网页导航</title> <style> body { margin: 0; padding: 0; } nav { background-color: #333; height: 40px; width: 100%; display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; z-index: 1; } nav a { color: #fff; text-decoration: none; margin: 0 10px; font-size: 18px; font-weight: bold; letter-spacing: 1px; padding: 10px 20px; border-radius: 5px; transition: background-color 0.3s ease; } nav a:hover { background-color: #666; } .container { margin-top: 60px; display: flex; justify-content: center; align-items: center; } .search { margin-top: 20px; display: flex; justify-content: center; align-items: center; } input[type="text"] { padding: 10px; border-radius: 5px; border: none; box-shadow: 0 0 5px #ccc; width: 300px; margin-right: 10px; } input[type="submit"] { padding: 10px 20px; background-color: #333; color: #fff; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } input[type="submit"]:hover { background-color: #666; } </style> </head> <body> <nav> <a href="#">人文</a> <a href="#">数学</a> <a href="#">英语</a> <a href="#">科技</a> <a href="#">发展</a> </nav> <div class="container"> <h1>欢迎来到网页导航</h1> </div> <div class="search"> <form> <input type="text" placeholder="请输入搜索内容"> <input type="submit" value="搜索"> </form> </div> </body> </html>

阅读全文