算了請你幫我將img和H2單獨出來放在最左上方,然後下面菜單欄需要對其按著放在它下面
时间: 2024-03-23 07:42:54 浏览: 17
好的,可以将CSS代码继续修改,实现你的需求:
```css
#menu {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: #333;
color: #fff;
font-size: 16px;
display: flex; /* 添加这一行,使用flex布局 */
flex-direction: column; /* 添加这一行,将子元素垂直排列 */
}
#img {
padding: 20px;
display: flex; /* 添加这一行,使用flex布局 */
align-items: center; /* 添加这一行,垂直居中对齐子元素 */
}
.img-container img {
max-width: 100%;
height: auto;
max-height: 50px;
}
h2 {
margin: 0;
padding-left: 10px; /* 修改这里,添加左侧内边距 */
font-size: 20px;
}
ul {
list-style-type: none;
margin: 20px 0 0 0; /* 修改这里,添加上侧外边距 */
padding: 0;
}
li {
margin-bottom: 10px;
}
a {
display: block;
padding: 10px;
color: #fff;
text-decoration: none;
}
a:hover {
background-color: #555;
}
```
然后在HTML文件中,将`<h2>`标签和logo的`<div>`标签单独放在一个`<div>`标签内,并将这个`<div>`标签放在菜单栏的最上方。例如:
```html
<div id="menu">
<div class="logo-container">
<div class="img-container">
<img src="images/ivpd.png" alt="logo">
</div>
<h2>BL製造管理系統</h2>
</div>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/">登记数据</a></li>
<li><a href="/history">查询数据</a></li>
<li><a href="/chart">查询图表</a></li>
</ul>
</div>
```
这样就可以实现你描述的效果了。
相关推荐
![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)