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

このページには 2 つのヘッダーがあることに注意してください。これは仕様によるものです。だから私の問題はこれです：

全身をラップして css-stuff を行うために a を挿入したかったのです。コードをテンプレートに挿入すると表示され、フッター以外はすべてラップされました。また、ブラウザと 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. コンテンツ全体を body でラップするために a を挿入するにはどうすればよいですか? 私が言ったように、フッターをラップすることはできません。

フッターがラップされていないという意味がよくわかりません。あなたが提供したコードでは、<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 パネルは、ページの「ソースを表示」するためのより良い方法である場合があります。Elements パネル内では、ページの DOM がきれいにフォーマットされ、HTML 要素、その祖先、およびその子孫を簡単に表示できます。アクセスするページの HTML が縮小されているか、単純に醜いため、ページがどのように構造化されているかがわかりにくくなっていることがよくあります。Elements パネルは、ページの実際の基本構造を表示するためのソリューションです。

于 2013-01-31T14:22:33.800 に答える