用HTML+css做一个主页面,顶部为导航栏,导航栏左边是首页、最新、连载、咨询四个超链接,导航栏中间是搜索框,导航栏右边是历史记录跟个人中心
时间: 2023-05-11 16:06:11 浏览: 269
可以使用以下代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>主页面</title>
<style>
/* 导航栏样式 */
nav {
background-color: #333;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
nav a {
color: #fff;
text-decoration: none;
margin-right: 20px;
}
nav a:hover {
color: #ccc;
}
/* 搜索框样式 */
.search {
display: flex;
align-items: center;
background-color: #fff;
padding: 5px;
border-radius: 5px;
margin: 0 auto;
width: 300px;
}
.search input[type="text"] {
flex: 1;
border: none;
padding: 5px;
font-size: 16px;
}
.search button {
background-color: #333;
color: #fff;
border: none;
padding: 5px 10px;
border-radius: 5px;
margin-left: 10px;
cursor: pointer;
}
.search button:hover {
background-color: #ccc;
color: #333;
}
/* 历史记录和个人中心样式 */
.history, .profile {
color: #fff;
margin-right: 20px;
}
</style>
</head>
<body>
<nav>
<div>
<a href="#">首页</a>
<a href="#">最新</a>
<a href="#">连载</a>
<a href="#">咨询</a>
</div>
<div class="search">
<input type="text" placeholder="搜索...">
<button>搜索</button>
</div>
<div>
<span class="history">历史记录</span>
<span class="profile">个人中心</span>
</div>
</nav>
</body>
</html>
```
这段代码会生成一个带有导航栏、搜索框、历史记录和个人中心的主页面。
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://img-home.csdnimg.cn/images/20250102104920.png)
![](https://img-home.csdnimg.cn/images/20250102104920.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![docx](https://img-home.csdnimg.cn/images/20241231044901.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![md](https://img-home.csdnimg.cn/images/20250102104920.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)