gpt4 book ai didi

javascript - 在另一个 div 中使用 div 来创建网站的结构

转载 作者:太空宇宙 更新时间:2023-11-03 23:05:24 25 4
gpt4 key购买 nike

大家好,我现在正在玩弄 html 和 Divs,并试图创建一个我发现的网站的模仿物。尝试在中获得尽可能多的练习

这是我目前正在尝试模仿的网站。 Link

据我所知,它应该看起来像这样:

 -----------------------------------------------
| | | |
|-----------------------------------------------
| |Logo Nav Bar| |
|-----------------------------------------------
| | | |
| | | |
| | Body | |
| | | |
| | | |
|-----------------------------------------------
| |Logo Info | |
|-----------------------------------------------
| | | |
-----------------------------------------------

抱歉画得不好 :) 但如果可能的话,请有人告诉我如何使用基本的 div 布局创建这样的东西。

通常当我之前创建了一些简单的网站时。一直都是简单的div比如

<div class="logo">
.......
</div>

然后在外面打开另一个 div。再次感谢所有的帮助

P.s 这是我尝试使用但不确定是否正确的代码:

<div class="Container">
<div class="Header">
<div class="Left">
<div class="Right">
<div class="Body">
<div class="Footer">
</div>
</div>
</div>
</div>
</div>
</div>

容器是整个站点。然后标题是顶部导航栏。左侧和右侧允许我将文本和图像 float 到右侧和左侧。其中的文本正文。底部导航栏的页脚。

最佳答案

但是你可以继续复杂但更有趣的方式:)而且,也许,您将面临的第一个问题是将页脚压到底部。我发现并使用了一个不错的选择 - flex。

HTML

<body>
<div class="wrap">
<header>...</header>
content...
</div>
<footer>...</footer>
</body>

CSS

body {
display: flex;
min-height: 100vh;
flex-direction: column;
padding: 0px;
margin: 0px;
}

.wrap{
flex: 1 0 auto;
}

关于javascript - 在另一个 div 中使用 div 来创建网站的结构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34925163/

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