“头部”的高度为 80px,“logo 图片”如图显示在左侧,图片宽 181px,高 45px,垂直居中。 2)“导航菜单条”宽度为100%填充满页面,其余部分宽度为 950px。 3)“导航菜单条”高度 40px,文字字号 14px 加粗,字体微软雅黑,菜单项鼠标悬停时如图 1 所示, 背景变为红色。
时间: 2023-12-06 13:02:45 浏览: 40
可以使用以下HTML和CSS代码实现所需的效果:
```html
<header>
<div class="logo">
<img src="your-logo-url" alt="your-logo" width="181" height="45">
</div>
<nav>
<ul>
<li><a href="#">菜单项1</a></li>
<li><a href="#">菜单项2</a></li>
<li><a href="#">菜单项3</a></li>
<li><a href="#">菜单项4</a></li>
<li><a href="#">菜单项5</a></li>
</ul>
</nav>
</header>
```
```css
header {
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
width: 181px;
height: 45px;
display: flex;
align-items: center;
}
nav {
width: 100%;
height: 40px;
background-color: #f2f2f2;
}
nav ul {
max-width: 950px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
nav ul li {
list-style: none;
}
nav ul li a {
display: inline-block;
padding: 10px 20px;
font-size: 14px;
font-weight: bold;
font-family: "Microsoft YaHei", sans-serif;
color: #333;
}
nav ul li a:hover {
background-color: red;
color: #fff;
}
```
以上代码中,`header`元素固定高度为80px,使用`flex`布局实现“头部”中的“logo图片”和“导航菜单条”的对齐。其中,“logo图片”的宽度为181px,高度为45px,使用`flex`布局实现垂直居中。而“导航菜单条”宽度为100%,高度为40px,使用`max-width`属性限制其最大宽度为950px,从而实现在屏幕较大时居中显示。菜单项使用`flex`布局实现居中对齐,字体使用微软雅黑,字号为14px,加粗。当鼠标悬停于菜单项上时,背景色变为红色,字体颜色变为白色。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](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)
![](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)