Question

大家好，所以我现在正在玩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>

容器是整个网站。然后标题是顶部导航栏。左侧和右侧允许我将文本和图像浮动到右侧和左侧。身体内部的文字。底部导航栏的页脚。

Answer 1

但你可以继续复杂，但更有趣的方式:) 也许，你将面临的第一个问题 - 将页脚压到底部。我找到并使用的一个很好的选择 - 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;
}

Answer 2

结构可能类似

<div class="header">
   <div class="logo">...</div>
   <div class="navbar">...</div>
</div>
<div class="content">
...
</div>
<div class="footer">
   <div class="logo">...</div>
   <div class="info">...</div>
</div>

显然你需要一些css或使用像bootstrap这样的框架。

Answer 3

使用HTML5中的新语义可能会更好。

而不是嵌套<div>'s你可以尝试类似：

<header>
   <img src="logo.svg" alt="company" href="index.html">
   <nav><ul>
     <li><a href="#">Menu Links<a/></li>
   </ul></nav>
</header>

<section id="use id's to position all your elements in the css file">
   <article class="and classes to add repeat articles">
      // contents //
   </article>
</section>

Answer 4

尝试使用Boootstrap UI GridOptions（http://getbootstrap.com/css/#grid-options），它附带响应式css类来帮助您使用这种网格布局。所以你的div看起来像这样：

<div class="row">
    <div class="col-lg-2">
    </div>
    <div class="col-lg-8">
        <div class="pull-left">
            Logo
        </div>
        <div class="pull-right">
            Nav Bar
        </div>
    </div>
    <div class="col-lg-2">
    </div>
</div>
<div class="row">
    <div class="col-lg-2">
    </div>
    <div class="col-lg-8">
        <div class="center-block">
            Body
        </div>
    </div>
    <div class="col-lg-2">
    </div>
</div>...

在anther div中使用div来创建网站的结构

4 个答案: