Question

这个网站长期潜伏（多次派上用场）但今天我需要发布自己的问题（知道这一天会来）。

首先，我只是在学习HTML，而在为课程作业设计时，我遇到了一个问题。

我想要做的是让页面分开＆＃39;分为两部分，分开我的意思是有一个导航菜单，让我们说一半的标题，然后是另一半的主要内容区域，但我有这个设计，它在所有角落都有圆角，这意味着我是寻找一种方法来创造两个身体＆＃39;类似或类似的标签，允许以下内容;

Mockup http://gyazo.com/ca9c6572ed5af4dd928e02f0dba83fac.png

无论如何得到类似上图的内容？

由于

杰克

Answer 1

正如this answer中所述，您不能拥有多个<body>标记。

要在您的身体内创建部分，您可以使用<div>标记（或其他新的html5标记，如<nav>，<article>等）。

对于你想要的，尝试这样的事情：

<body>
    <div id="nav">
        <!-- Navigation -->
    </div>
    <div id="content">
        <!-- Tutorial -->
    </div>
</body>

然后是你的CSS：

#nav, #content {
    border: 1px solid black;
    border-radius: 10px;
}

这是一个jsFiddle。希望它有所帮助。

Answer 2

html页面只能有一个“正文”。您可能正在寻找的是“div”元素，也称为“HTML文档分割元素”。有关详细信息，请查看

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div

Answer 3

据我所知，你不应该创建两个body标签。而是在一个正文中，您可以添加两个标记，并将您的内容放在div中。如果你想要对div的边界进行舍入，你应该使用一些css代码。

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    #up
    {
    border:2px solid #a1a1a1;
    padding:10px 40px; 
    background:#dddddd;
    width:90%;
    margin:5px;
    border-bottom-left-radius:2em;
    border-bottom-right-radius:2em;
    }
    #down
    {
    border:2px solid #a1a1a1;
    padding:10px 40px;
    margin:5px;
    background:#dddddd;
    width:90%;
    border-top-left-radius:2em;
    border-top-right-radius:2em;
    }
    </style>
    </head>
    <body>

    <div id='up'>
MAIN PART 1
The border-radius property allows you to add rounded corners to elements.
</div>
    <div id='down'>

MAIN PART 2
The border-radius property allows you to add rounded corners to elements.
</div>

    </body>
    </html>

Answer 4

我做过一次。它实际上是ASP.NET中的常见做法，因为它们分段（占位符）和母版页

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <style>
      .body1, .body2{
     margin:0 auto;
     height:200px;
       }
      .body1{
      background-color:blue;
      width:1200px;
       }
      .body2{
      background-color:red;
      width:1200px;
       }

     </style>
   </head>

      <section class="body1"> 1 </section>
      <section class="body2"> 2 </section>

   </html>

HTML ::无论如何要分开＆＃39;身体标签？

4 个答案: