如何在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中创建顶部标题和左侧标题？

回答

相关问题