如何在PHP中制作顶部标题和左标题？
我需要开发一个像this
这样的头文件
其中顶部页眉和左页眉在整个网页中都是相同的。
我也创建了同样的东西，但我在这里坚持如何在动态内容字段中显示数据。 这是我的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> <a href="index.html">HOME </a> | ABOUT US | CONTACT | <img src="images/twitter.png" width="21" height="17" /> | <img src="images/youtube.png" width="20" height="11" />; | <img src="images/fb.png" width="10" height="21" /> | <img src="images/in.png" width="20" height="14" /> | <img src="images/p.png" width="16" height="21" /> | <img src="images/setting.png" width="19" height="21" /> | <a href="signup.html">SIGNUP</a> | <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"> <input type="text" value="Product Name" maxlength="80" style="width:120px;height:25px;background-color:#bfff00" class="search1"> <input type="text" value="Brand" maxlength="80" style="width:100px;height:25px;background-color:#bfff00" class="search1"> <input type="text" value="Price Range" maxlength="80" style="width:120px;height:25px;background-color:#bfff00" class="search1"> <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。
3 个答案:
答案 0 :(得分：1)
您可以在主文件中定义页面布局。我们称之为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文件中定义body，html，doctype。您在index.php中定义的主要布局和CSS样式就是您所需要的。
答案 1 :(得分：0)
这里要提到的第一件事。
在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文件的head标签中引用它。
您也可以使用PHP来回显HTML echo '<h2> this is a test </h2>';
回答原始问题
这是你要做的事情的开始。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
*
{
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>
阅读如何在PHP手册here
中使用include语句 祝你好运。答案 2 :(得分：0)
我将举一个简单的例子来做布局。所以，这是我非常简单的布局：
它与您在参考图像中显示的布局相同。我只是用颜色编码，这样你就会理解。上面的页面的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 © 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 © 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'; ?>
这就是全部！很简单不是吗？ :)随意问你是否有疑问。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？