Question

98.214.131.200/index.php

<html>
<head>
    <title>Peoria Triathlon Club</title>
    <meta  charset=iso-8859-1" />
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="nav">
    <li><a href="http://tri-peoria.org">Home</a></li>
    <li><a href="/forum">Forum</a></li>
    <li><a href="/join">Join</a></li>
    <li><a href="/members">Members</a></li>
    <li><a href="/events">Events</a></li>
    <li><a href="/training">Training</a></li>
    <li><a href="https://www.facebook.com/groups/tripeoria/">Facebook</a></li>
    <ab><a href="/about">Peoria Triathlon Club</a></ab>
</ul>
<ul id=main>
<p>Main</p>
</ul>
</body>
</html>

98.214.131.200/style.css

body {
    background:#000 url(bg.jpg) center top no-repeat;
    background-size: cover;
    color: #c1c1c1;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    margin:0;
}

#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc; 
border-top: 1px solid #ccc;
}

#main{
    display:inline-block;
    float:left;
}

如何让主要div中的内容显示在背景图片下方，并且顶部仍然有导航栏？当前代码可以在http：// 98.214.131.200

上看到

Answer 1

将“主”容器更改为div而不是ul（除非您有令人信服的理由将其设为ul ...您可以随时主ul内的div。
在margin-top css中添加#main属性，将其从导航栏中调低适当数量。

所以在index.php中：

<div id="main">
<p>Main</p>
</div>

在style.css中：

#main {
    margin-top: 240px; /* Adjust as needed */
}

您可以从主css转储display: inline-block，根据您的后续意图，您可能不需要float:left。

您可能还需要从身体的css中删除background-size: cover，否则图片也可能会覆盖您的主要部分。

Answer 2

我无法确切地看到您要实现的目标，但您可以在身体上添加一个“填充顶部”，等于背景图像的高度。

body {padding-top：50px; } //假设你的bg.jpg是50px高度

并检查你的#main上是否确实需要那个浮动。

Answer 3

试试这个

body {
background-color: #000000;
    background-image: url("bg.jpg");
background-position: center top;
    background-repeat: no-repeat;
color: #C1C1C1;
    font-family: Arial,Verdana,Helvetica,sans-serif;
    margin: 0;
}

#main {
    margin-top: 370px;
}

CSS使文本显示在图片下方

3 个答案: