如何在PHP中創建頂部標題和左側標題？

-1

其中頂部標題和左側標題在整個網頁中都是相同的。

我也創建了相同的，但我堅持在這裏如何顯示動態內容字段中的數據。這裏是我的代碼header.php文件：

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 

<style> 

main2{ 
    font-family:myFirstFont1; 
    font-size:12px;  
} 

.image { 
    position: absolute; 
    left: 17px; 
    top: 159px; 
} 
.image1 { } 
.image2 { } 
.image3 { } 
.main_divs{ 
    display:inline-block; 
    float:left; 
} 
#left{ 
    width:200px; 
    height:750px; 
    position:fixed; 
    margin-top:150px; 
} 
#upper{ 
    width:100%; 
    float:left; 
    position:fixed; 
    display:inline-block 
} 
#logo{ 
    width:352px; 
    margin-top:50px; 
} 
#navigation{ } 
#logo,#navigation{ 
    float:left 
} 
#inner-nav{ 
    float:right; 
    margin-left: 200px; 
} 
.left_parts{ 
    height:50%; 
    border-radius:10px; 
    border:2px solid black; 
    margin-top:10px; 
} 
#left-part1{ 
    background-color:#0093dd; 
} 
#left-part2{ 
    background-color:#bfff00; 
} 

main{ 
    font-family:myFirstFont1; 
    margin-left:30px; 
    font-size:22px; 
} 
main1{ 
    font-family:myFirstFont2; 
} 
</style> 

</head> 

<body> 

<div id="upper" class="main_divs"> 
    <div id="logo"><img src="images/Shoppin online .png" width="325px" height="50"/></div> 
    <div id="navigation"> 
    <div id="inner-nav"> 
    <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td height="35"> 
    <main2><h3>&nbsp;<a href="index.html">HOME </a>&nbsp;&nbsp;|&nbsp;&nbsp; ABOUT US &nbsp;&nbsp;|&nbsp;&nbsp;CONTACT &nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;<img src="images/twitter.png" width="21" height="17" />&nbsp;&nbsp;|&nbsp;&nbsp;<img src="images/youtube.png" width="20" height="11" />;&nbsp;&nbsp;|&nbsp;&nbsp;<img src="images/fb.png" width="10" height="21" />&nbsp;&nbsp;|&nbsp;&nbsp;<img src="images/in.png" width="20" height="14" />&nbsp;&nbsp;|&nbsp;&nbsp;<img src="images/p.png" width="16" height="21" />&nbsp;&nbsp;|&nbsp;&nbsp;<img src="images/setting.png" width="19" height="21" />&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="signup.html">SIGNUP</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="login.php">LOGIN</a></h3> 
    </main2> 
    </td> 
    </tr> 
    <tr> 
    <td height="40"><div class="image2"><input type="text" value="Search" maxlength="80" style="width:580px;height:25px;background-color:#bfff00" class="search"> 
    <div class="text"> 
    <main1><h2 class="t3"></h2></main1> 

    </div> 
    </div> 
    </td> 
    </tr> 
    <tr> 
    <td height="35"><div class="image2"><input type="text" value="Category" name="category" id="category" maxlength="80" style="width:100px;height:25px;background-color:#bfff00" class="search1"> &nbsp;<input type="text" value="Product Name" maxlength="80" style="width:120px;height:25px;background-color:#bfff00" class="search1">&nbsp; <input type="text" value="Brand" maxlength="80" style="width:100px;height:25px;background-color:#bfff00" class="search1">&nbsp; <input type="text" value="Price Range" maxlength="80" style="width:120px;height:25px;background-color:#bfff00" class="search1">&nbsp; <input type="text" value="Color" maxlength="80" style="width:85px;height:25px;background-color:#bfff00" class="search1"></div></td> 
    </tr> 
</table> 
</div> 
    </div> 
</div> 

<div id="left" class="main_divs"> 
<div id="left-part1" class="left_parts">Offers</div> 
<div id="left-part2" class="left_parts">New Arrivals</div> 
</div> 

</body> 
</html>

，當我包括任何頁面header.php文件，並插入內容，它們顯示在網頁的頂部，顯示的header.php。

這裏是我的test.php文件，其中包括header.php。

<?php 
include_once("header/header.php") 
?> 

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Testing</title> 
</head> 

<body> 

tetsdfhgdfkgdfhgdfg 




</body> 
</html>

並且結果顯示像this。

來源

2015-02-10 Dinesh Kumar

您的頭文件中已經有了一個文檔類型聲明，因此在輸出另一個文件之後當然只是無稽之談。這同樣適用於您已經擁有的完整HTML正文內容。 – CBroe 2015-02-10 10:39:25

您需要閱讀一些關於模板基礎知識。 – Seti 2015-02-10 10:41:45

所以我需要刪除這句話：<！DOCTYPE html PUBLIC「 - // W3C // DTD XHTML 1.0 Transitional // EN」「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional。 dtd「> – 2015-02-10 10:43:18

您可以在主文件中定義頁面佈局。讓我們把它的index.php，它是這樣的：

<html> 
<body> 
<div id="container"> 
    <div id="header"><?php include("top_header.php"); ?></div> 
    <div id="left_header"><?php include("left_header.php"); ?></div> 
    <div id="main_content">MAIN CONTENT HERE</div> 
</div> 
</body> 
</html>

的top_header.php可能是例如：

<a href="#link1">Link 1</a> | <a href="#link2">Link 2</a>

兩個PHP文件，應該定義身體，HTML，文檔類型。您在index.php中定義的主佈局和CSS樣式是您所需要的。

來源

2015-02-10 10:51:29 Sahistaja

這裏首先要說的是。

在您的PHP文件中，當您將它包含在主文件中時，再次添加相同的基本HTML標記。

換句話說：

<?php 
include_once("header/header.php") 
?> 

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Testing</title> 
</head> 

<body> 

tetsdfhgdfkgdfhgdfg 

</body> 
</html>

所有這些是不必要的。你可以簡單地運行header.php文件作爲主文件（儘管你可能想重命名它），如果你想保持整齊易讀的源代碼，編寫你的CSS等內聯並不是一個好主意。我建議將它移動到一個新的CSS文件，並在您的PHP文件的頭標記中引用它。

您也可以呼應了HTML使用PHP這樣echo '<h2> this is a test </h2>';

要回答你原來的問題

這裏是一個開始你正在嘗試做的。

* 
 
{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.ClassContainer 
 
{ 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.titleContainer 
 
{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100px; 
 
    background: red; 
 
    
 
} 
 

 
.leftContainer 
 
{ 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 0; 
 
    width: 100px; 
 
    height: 100%; 
 
    background: blue; 
 
} 
 

 
.contentContainer 
 
{ 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 100px; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: yellow; 
 
}

<div class="Classcontainer"> 
 
    <div class="titleContainer" > </div> 
 
    <div class="leftContainer ">  </div> 
 
    <div class="contentContainer"> </div> 
 
</div>

通讀了如何使用include語句在PHP手冊here

好運。

來源

2015-02-10 11:03:43

我會給你一個簡單的例子來做佈局。所以，這是我非常簡單的佈局：

enter image description here

這是你的參考圖像中表現出相同的佈局。我只是用顏色編碼，以便你能理解。上述網頁的HTML代碼如下所示：

<!doctype html> 
<html> 
    <head> 
     <title>My Awesome Website!</title> 

     <style> 
      #wrapper{ 
       width: 1000px; 
       margin: 0 auto; 
      } 

      .header_section{ 
       background-color: red; 

       min-height: 50px; 
      } 

      .left_sidebar_section{ 
       float: left; 
       width: 300px;    
       background-color: rgb(0, 236, 255); 

       min-height: 200px; 
      } 

      .main_contents{ 
       float: right; 
       width: 700px;    
       background-color: rgb(150, 250, 150); 

       min-height: 300px; 
      } 

      #footer{ 
       background-color: rgb(255, 252, 0); 

       min-height: 30px; 
      } 

      .clear{ 
       clear: both; 
      } 
     </style> 
    </head> 

    <body> 
     <!-- The whole wrapper --> 
     <div id="wrapper"> 

      <!-- Header Section --> 
      <div class="header_section"> 
       Logos, top navigations, etc.. etc... 
      </div> 
      <!-- /Header Section --> 

      <!-- Left Sidebar --> 
      <div class="left_sidebar_section"> 
       left sidebar contents goes here.... 
      </div> 
      <!-- /Left Sidebar --> 

      <!-- Main Contents --> 
      <div class="main_contents"> 

       Main content goes here.... 

      </div> 
      <!-- /Main Contents --> 

      <div class="clear"></div> 


      <!-- Footer --> 
      <div id="footer"> 
       Copyright &copy; blah blah.. 
      </div> 
      <!-- /Footer --> 

     </div> 
     <!-- /The whole wrapper --> 
    </body> 
</html>

它頭部分（紅色），您將包括標識，導航等，然後邊欄（藍色），您將顯示側面導航或廣告等。然後頁腳（黃色），您將在其中顯示信用點，頁腳菜單等。以及主內容部分（綠色），這在每個頁面中都會有所不同。理解了這個想法？

現在，我必須將它們分成單獨的文件。因爲頁眉，左邊欄和頁腳在所有頁面中都很常見！因此，我們將它分爲三頁 - header.php,footer.php，然後是主要內容頁面，例如index.php。這裏的分裂代碼：

的header.php

<!doctype html> 
<html> 
    <head> 
     <title>My Awesome Website!</title> 

     <style> 
      #wrapper{ 
       width: 1000px; 
       margin: 0 auto; 
      } 

      .header_section{ 
       background-color: red; 

       min-height: 50px; 
      } 

      .left_sidebar_section{ 
       float: left; 
       width: 300px;    
       background-color: rgb(0, 236, 255); 

       min-height: 200px; 
      } 

      .main_contents{ 
       float: right; 
       width: 700px;    
       background-color: rgb(150, 250, 150); 

       min-height: 300px; 
      } 

      #footer{ 
       background-color: rgb(255, 252, 0); 

       min-height: 30px; 
      } 

      .clear{ 
       clear: both; 
      } 
     </style> 
    </head> 

    <body> 
     <!-- The whole wrapper --> 
     <div id="wrapper"> 

      <!-- Header Section --> 
      <div class="header_section"> 
       Logos, top navigations, etc.. etc... 
      </div> 
      <!-- /Header Section --> 

      <!-- Left Sidebar --> 
      <div class="left_sidebar_section"> 
       left sidebar contents goes here.... 
      </div> 
      <!-- /Left Sidebar -->

footer.php

  <div class="clear"></div> 


      <!-- Footer --> 
      <div id="footer"> 
       Copyright &copy; blah blah.. 
      </div> 
      <!-- /Footer --> 

     </div> 
     <!-- /The whole wrapper --> 
    </body> 
</html>

的index.php

<?php include 'header.php'; ?> 

      <!-- Main Contents --> 
      <div class="main_contents"> 

       Main content goes here.... 

      </div> 
      <!-- /Main Contents --> 

<?php include 'footer.php'; ?>

看我是如何拆分的？現在，如果我想包含一個聯繫頁面，例如contact.php，我只需複製上述index.php的內容並將其添加到新文件中並將其保存爲contact.php！例如：

contact.php

<?php include 'header.php'; ?> 

      <!-- Main Contents --> 
      <div class="main_contents"> 

       Enter your contact details... blah blah... 

      </div> 
      <!-- /Main Contents --> 

<?php include 'footer.php'; ?>

這一切！很簡單，不是嗎？ :)隨意問你是否有疑問。

來源

2015-02-10 11:22:22

如何在PHP中創建頂部標題和左側標題？

回答

相關問題