gpt4 book ai didi

html - 如何制作一个顶部有导航栏和下半页左侧有侧边栏的 html 页面?

转载 作者:行者123 更新时间:2023-11-28 06:56:18 25 4
gpt4 key购买 nike

我正在使用 materializecss 和 bootstrap。我想画点像

---------------------------------
---------------------------------
|
|
|
|

基本上,我希望将页面分为两个水平部分。最上面的是顶部导航栏。在底部,左侧部分是左侧水平条,右侧部分呈现另一个网页。

我当前的代码如下:

<html>
<head>
</head>
<body>
<div class="main">
<div class="top">
<nav class="navbar-fixed">
</nav>
</div>
<div class="bottom">
<div class="nav">
<nav id="left-sidebar-nav"">
</nav>
</div>
<div id="page1">
</div>
</div>
</div>
</body>
</html>

但是,侧边栏一直延伸到顶部,所以看起来我将页面分成两个垂直部分而不是水平部分。请帮忙。

最佳答案

好的,您可以使用以下代码获取导航栏:

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">

</div>
</nav>

一旦你有了它,确保删除底部的任何边距,好的,所以在侧边栏上你需要做的是创建你的侧边栏,使其看起来像你想要的样子,并添加绝对定位这样你的 css 看起来像这样:

.sidebar-nav {
position: absolute;
top: 0;
width: 275px;
margin: 0;
padding: 0;
list-style: none;
}

然后您可以使用这些值来让它按照您想要的方式显示和运行

关于html - 如何制作一个顶部有导航栏和下半页左侧有侧边栏的 html 页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33492324/

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