2017-08-28 8 views
1

私はhtmlを学ぶようになり、www.w3schools.comのようなページを作成することになりました。したがって、サイドバー(左側)が必要です。このサイドバーからリンクをクリックすると、同じページのメインウィンドウで対応するページが開きます。HTMLレイアウト - 同じページの一部にリンクが開かれています

以下はコードです(実際には私は一部のother siteからコピーしました)。

 body { 
      margin:0; 
      padding:0; 
      font-family: Sans-Serif; 
      line-height: 1.5em; 
     } 

     #header { 
      background: #ccc; 
      height: 100px; 
     } 

     #header h1 { 
      margin: 0; 
      padding-top: 15px; 
     } 

     main { 
      padding-bottom: 10010px; 
      margin-bottom: -10000px; 
      float: left; 
      width: 100%; 
     } 

     #nav { 
      padding-bottom: 10010px; 
      margin-bottom: -10000px; 
      float: left; 
      width: 230px; 
      margin-left: -100%; 
      background: #eee; 
     } 

     #footer { 
      clear: left; 
      width: 100%; 
      background: #ccc; 
      text-align: center; 
      padding: 4px 0; 
     } 

     #wrapper { 
      overflow: hidden; 
     } 

     #content { 
      margin-left: 230px; /* Same as 'nav' width */ 
     } 

     .innertube { 
      margin: 15px; /* Padding for content */ 
      margin-top: 0; 
     } 

     p { 
      color: #555; 
     } 

     nav ul { 
      list-style-type: none; 
      margin: 0; 
      padding: 0; 
     } 

     nav ul a { 
      color: darkgreen; 
      text-decoration: none; 
     } 

    </style> 

</head> 

<body>  

    <header id="header"> 
     <div class="innertube"> 
      <h1>Welcome to HTML World</h1> 
     </div> 
    </header> 

    <div id="wrapper"> 

     <main id="main"> 
      <div id="content"> 
       <div class="innertube"> 
        <h1>Open Google Page here</h1> 
       </div> 
      </div> 
     </main> 

     <nav id="nav"> 
      <div class="innertube"> 
       <h3>Left heading</h3> 
       <ul> 
        <li><a href="http://www.google.com" target="main">google</a></li> 
        <li><a href="#">Link 2</a></li> 
       </ul> 
      </div> 
     </nav> 

    </div> 

    <footer id="footer"> 
     <div class="innertube"> 
      <p>Footer...</p> 
     </div> 
    </footer> 

誰かが同じウィンドウのメインページでGoogleページを開く方法を教えてください。新しいタブで開くたびに私はグーグルで、ページレイアウトを提供するすべてのサイトを見つけましたが、相互接続は見つかりませんでした。

w3の学校に似た他の実例のコードも良いです。私はそこから学ぶでしょう。

ありがとうございます。

答えて

1

私はあなたの質問を理解できたので、おそらくiframeを使用してみるべきです。

関連する問題