Question

好吧我的网站有问题，我的页眉和页脚都受到css的影响，但我的身体不是，我已经尝试过编辑这些值，但它似乎没有用，但出于某种原因，如果我添加身体类的背景颜色，颜色改变但位置不改变。我被卡住了。请帮忙。这是我的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：标题：标题

<!--<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>

Answer 1

您必须为<div class="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>

Answer 2

我在css中改变了身体的位置是绝对的并且它起作用了。还要感谢@Alex的帮助，我使用了你的代码

PHP和CSS无法完全运行

2 个答案: