PHP 和 CSS 不能完全工作

好的，我的网站有问题，我的页眉和页脚受到 css 的影响，但我的 body 没有，我尝试编辑这些值，但它似乎不起作用，但出于某种原因，如果我添加body 类的背景颜色，它的颜色会改变，但位置不会。我卡住了。请帮忙。这是我的 CSS:

#nav ul 
{
    overflow: hidden;
    list-style-type: none;
    margin: 0;
    padding-left: 25%;
    text-align: center;
}
#nav li 
{
    float: left;
    padding-right: 10%;
    background-color: red;
}
#nav a:link, a:visited 
{
    display: block;
    width: 100%;
    font-weight: bold;
    color: #FFFFFF;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}
#nav a:hover, a:active 
{
    background-color: blue;
}

#footer 
{
    width: 50%;
    position: absolute;
    bottom: 0;
    left: 25%
}

.body 
{
    width: 50%;
    left: 25%;
}

这是我的 PHP: header : 标题

<!--<script type="text/javascript">
        var j = Math.floor(8*Math.random());
        var s = new Array();
        s[0]="1";
        s[1]="2";
        s[2]="3";
        s[3]="4";
        s[4]="5";
        s[5]="6";
        s[6]="7";
        s[7]="8";
        s[8]="9";
        k=s[j];
        document.write("<style type='text/css'>body {background-image:url(../images/bg"+k+".jpg);background-attachment:fixed;background-size: 100% 100%;}</style>");
</script>
-->
</head>
<body>
<div id="nav">
<ul>
<li><a href= "home.php">Refugio</a></li>
<li><a href= "addAccommodation.php">Add accommodation</a></li>
<li><a href= "login.php">Log In/Register</a></li>
</ul>
</div>

首页:

<?php
session_unset();
include ('header.php');
?>
<div class="body">
<b>Refugio</b>
<form action= "results.php" method = "post">
Search Accommodation:
<input type="search" name="accomSearch" required>
</br>
Arrival Date:
<input type="date" name="bday">
</br>   
Departure Date:
<input type="date" name="bday"></br>
<input type="submit" value= "Search">
</form>
</div>
<?php
include ('footer.php');
?>

和页脚

<div id = "footer">
<p>&#169&nbspCompany.<br />
If you have a trouble with our service 
<a href="mailto:ellaine@reo.net">Contact Us
</p>
</div>
</body>
</html>

最佳答案

您必须为您的 <div class="body"... 设置包装器设置一些宽度。

该宽度将作为您 body 计算的基础25%

#nav 
{
overflow: hidden;
width:70%;
margin: 0 auto;
  background-color: #E1E1E1;

}
#nav ul 
{
list-style-type: none;
width:100%;
text-align: center;
}
#nav li 
{
float: left;
padding-right: 10%;
background-color: red;
}
#nav a:link, a:visited 
{
display: block;
width: 100%;
font-weight: bold;
color: #FFFFFF;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
#nav a:hover, a:active 
{
background-color: blue;
}

#footer 
{
  clear:both;
width: 70%;
margin 0 auto;
position: absolute;
bottom: 0;

}
.page{
  width:70%;
  margin: 0 auto;
  position:relative;
}
.body 
{
  border:solid 1px red;
  margin:5px auto;
  width:100%;
  position:absolute;
  
}

<html>
<body>

 <div id="nav">
<ul>
<li><a href= "home.php">Refugio</a></li>
<li><a href= "addAccommodation.php">Add accommodation</a></li>
<li><a href= "login.php">Log In/Register</a></li>
</ul>
</div> 
  
  <div class="page">
<div class="body">
  
<b>Refugio</b>
<form action= "results.php" method = "post">
Search Accommodation:
<input type="search" name="accomSearch" required>
<br />
Arrival Date:
<input type="date" name="bday">
<br />   
Departure Date:
<input type="date" name="bday"><br />
<input type="submit" value= "Search">
</form>
    
</div>
</div>
<div id = "footer">
  <div>
<p>&#169&nbspCompany.<br />
If you have a trouble with our service 
<a href="mailto:ellaine@reo.net">Contact Us</a>
</p>
    </div>
</div>
   
</body>
</html>

关于PHP 和 CSS 不能完全工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28703921/

PHP 和 CSS 不能完全工作

上一篇：javascript - 使用 Jquery 更改 css 样式适用于 id，而不适用于类

下一篇：javascript - 通过 DOM 移除 HTML Table 的可见网格