如何使用HTML和CSS在导航菜单内垂直向下移动图像
minTwin
当前，网页中有功能可切换的导航菜单。图像也嵌入在导航菜单中，位于文本下方。
最好将图像重新定位在导航菜单的最底部，以消除其下方的空白区域。什么是实现这一目标的最佳方法？
这是背景图片。
的HTML
<html>
<div id="sideNav">
<nav>
<ul>
<li><a href="#banner">HOME</a></li>
<li><a href="#">COVID-19</a></li>
<li><a href="#service">SERVICES</a></li>
<li><a href="#reviews">REVIEWS</a></li>
<li><a href="#footer">CONTACT</a></li>
</ul>
<div id="nav_pic">
<img src ="images/nav_lotus.JPEG">
</div>
</nav>
</div>
</html>
的CSS
#sideNav{
width: 200px; /*changes the width of sideNav*/
height: 100vh;
position: fixed;
right: -250px; /*make side bar intially hidden*/
top:0;
background: #009688;
z-index: 2;
transition: 0.33s;
}
.nav ul li{
list-style: none;
margin: 45px 15px;
}
.nav ul li a{
text-decoration: none;
color: #fff;
font-family: 'Raleway', sans-serif;
}
.nav_pic{
vertical-align: bottom;
}
王伟
向nav容器添加伸缩样式。
nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何向下移动Wordpress主题导航菜单
- 2
如何在Microsoft Word 2013中使用向上和向下箭头向上或向下移动图像？
- 3
向下移动图像
- 4
Bootstrap 3导航栏折叠菜单会迫使图像向下移动，而导航栏固定顶部可能吗？
- 5
如何使用CSS平稳地上下移动图像？
- 6
如何使用 HTML、CSS 和 JQuery 创建 CNN 菜单导航
- 7
如何使用CSS垂直移动图像
- 8
向上和向下移动HTML表格的行
- 9
如何使用jquery悬停使Div可向上和向下移动
- 10
滚动视图中的内容根据导航菜单的高度值向下移动
- 11
HTML / CSS图像导航菜单
- 12
HTML CSS导航菜单定位文本和图像
- 13
我的CSS导航栏不会向上或向下移动，并且在我尝试
- 14
CSS浮动向下移动内容
- 15
打开弹出窗口后，如何防止菜单栏向下移动？
- 16
如何将主菜单移至右上角并向下移动至文本？
- 17
使用侧边栏菜单时，UITableView会无意地向下移动约1英寸
- 18
如何向下移动颜色条标签？
- 19
使用XSLT向下移动节点
- 20
R Markdown：将图像放在HTML的右上角，并将标题向下移动
- 21
R Markdown：将图像放在HTML的右上角，并将标题向下移动
- 22
菜单使用引导程序在移动版本中向下推图像？
- 23
如何使用 HTML 和 JS 移动图像
- 24
Bootstrap导航栏在滚动时不向下移动
- 25
导航栏中的链接没有向下移动？
- 26
当窗口变小时向下移动导航栏的部分
- 27
如果按钮内的文本太长，则HTML按钮会在正文中向下移动
- 28
如何使用setInterval和clearInterval在向右和向下移动后沿对角线向左移动文本（返回以开始）
- 29
如何仅使用CSS和HTML将响应式导航栏菜单居中？
我来说两句