1

我目前正在开发一个项目的前端，现在我正在创建所有视图。我有一个模板，大致如下所示：

<!doctype html>
<html lang="en-GB">

<head>
  <!-- TITLE -->
 <title>@yield('title')</title>
 /*Fonts, meta, css and script references go here too*/
</head>


<body id=@yield('body-id')>

 <!-- HEADER -->
  @section('header')
    <header id="sticky-header">
      /*Logo and some other stuff*/
      @include('navigation')
    </header>
@yield_section

<!--CONTENT-->
<div id="content">
  @yield('content')
</div>


<!--FOOTER-->
<footer id="footer" role="contentinfo">
  @yield('footer')
  /*Copyright stuff*/
    </footer>
  </body>

</html>

我的观点是这样的：

@layout('templates.main')

@section('title')
Graddle.se - Home
@endsection

@section('body-id')
"start-page"
@endsection

<header id="header">
 <div class="social-buttons-container">
  <ul class="social-buttons">
  <li>{{ HTML::image('img/facebook_logo.png', 'Facebook', array('class' => 'social-button')); }}</li>
  <li>{{ HTML::image('img/twitter_logo.png', 'Twitter', array('class' => 'social-button')); }}</li>
   </ul>
  </div>
  @include('navigation')
</header>


@section('content')
The website content goes here! 
@endsection

@section('footer')
Footer stuff!
@endsection

请注意，我将在此页面上有两个标题。这是设计使然。所以我的问题是这样的：

我想插入一个来包裹整个身体来做一些 CSS 的东西。我将代码插入到模板中，它出现了，除了页脚之外，所有东西都被包装了。此外，当我在浏览器和 Chrome 检查器中检查源代码时，它会以奇怪的顺序显示：

如果我检查 chrome 检查器，标记的顺序如下：

<head>
</head>

<body id="start-page">
/*content from the <head> goes here*/

/*Webpage content goes here, sticky-header from the template etc*/

<footer>
Footer stuff
</footer>
</body>
</html>

现在，如果我执行 ctrl-U 并检查源代码，标记显示如下：

<header id="header">
/*inserted by the view*/
</header>

<html>
<head>
/*Header stuff here, as it should be*/
</head>

<body id="start-page">

/*All the content*/

<footer>
Footer content
</footer>
</body>
</html>

虽然页面看起来不错，但一切都在视觉上应该是。所以我的问题是：

  • 如何插入 a 以将整个内容包装在正文中？就像我说的，我不能换页脚。

  • 为什么标记的顺序如此混乱，并且在 chrome 检查器和源代码中显示不同？

我意识到这可能有点不清楚（我删除了中间的一些内容以使示例更清晰，以便更容易理解），请问我是不是！

谢谢！

4

1 回答 1

0

1.如何插入a以将整个内容包裹在body中？就像我说的，我不能换页脚。

我不太明白你说的页脚没有被包裹是什么意思。在您提供的代码中，<footer>标签位于<body>标签内。

2. 为什么标记的顺序如此混乱？

这是因为在您的视图文件中，您没有将<header>标签包装在任何部分中。根据您的视觉需求，您应该将其包装在其中一个header或部分内：content

@section('header')
    @parent <!-- keep what's in the inherited layout file -->

    <header id="header">
        <div class="social-buttons-container">
            <!-- ... -->
        </div>
        @include('navigation')
    </header>
@endsection

3. 在 chrome 检查器和源代码中显示不同？

检查器正在精美地格式化和组织 HTML，因此开发人员可以减少对混乱源代码的担忧。根据谷歌：

元素面板有时是“查看页面源代码”的更好方法。在 Elements 面板中，页面的 DOM 将被很好地格式化，轻松地向您展示 HTML 元素、它们的祖先和后代。很多时候，您访问的页面会缩小或只是丑陋的 HTML，这使得很难看到页面的结构。元素面板是您查看页面真实底层结构的解决方案。

于 2013-01-31T14:22:33.800 回答