gpt4 book ai didi

html - 如何让导航栏固定在底部而不是顶部

转载 作者:太空宇宙 更新时间:2023-11-03 19:38:49 26 4
gpt4 key购买 nike

这里的问题是我的导航栏固定到顶部,我希望它固定到底部:

<html>
<body>
<center>
<h1>My Resume</h1>
<link rel="stylesheet" type="text/css" href="csstrial.css">
<center>

<div id="nav">
<p class="title"><a href="#">TheCodePress<span class="subtitle">.blogspot.com</span> </a></p>
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">My Blog</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">About</a></li>
</ul>
</div>


<nav>
<ul>
<li><a href="home.html" target='MYHOME'>Home</a></li>
<li><a href="cmon.html" target='MYHOME'>Qualifications</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>


<iframe src="home.html" name="MYHOME" height="550" width="700"
frameborder="0">

这是我的 CSS

#nav
{
background-color:#262626;
width:100%;
height:50px;
box-shadow: 0px 1px 50px #5E5E5E;
position:fixed;
top:0px;
}

.title
{
color:#EDEDED;
font-family:verdana;
font-size:25px;
width:350px;
margin-top:6px;
margin-left:150px;
font-weight:bold;
float:left;
}
.subtitle
{
color:#EDEDED;
font-family:verdana;
font-size:15px;
}

#navigation
{
list-style-type:none;
}
li
{
display:inline;
padding:10px;
}
#nav a
{
font-family:verdana;
text-decoration:none;
color:#EDEDED;
}
#nav a:hover
{
color:#BDBDBD;
}

#body
{
width:850px;
margin:0px auto;
margin-top:80px;
font-family:verdana;
}

body
{
margin:0px;
}

我曾多次尝试改变位置,但都失败了。关于如何做到这一点有什么想法吗?

最佳答案

在您的 CSS 中的 #nav 下,只需更改:

top:0px;

bottom:0px;

这应该可以解决问题

关于html - 如何让导航栏固定在底部而不是顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20647383/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com