我需要将蓝色导航栏下方的图像向下移动，以便它与下面的内容主体连接（他们应该在网页内容周围创建一个阴影框的外观）。下面是页面的 HTML。我试图将它向下移动的图像 boy_top.png。有谁知道如何做到这一点？我还包括了“主”“页面”和“菜单”部分的 CSS。蓝色的导航区域附在“菜单”部分，主要内容区域附在“主”部分，它们都封装在“页面”css中。
<div class="page">
<header>
<div style="margin: 20px;">
@* <a href="Home" style="color: white; font-size: 36px; font-weight: bold;text-decoration: none;" onclick="DoFun();">Monet </a>*@
<span href="Home" style="color: white; font-size: 36px; font-weight: bold;text-decoration: none;" onclick="DoFun();">Monet </span>
<span style="color: white; font-size: 18px; "> </span>
</div>
@* </a>*@
@* <div id="logindisplay">
@Html.Partial("_LogOnPartial")
</div>*@
<nav>
<ul id="menu">
<li>@Html.MenuLink("Agents", "Index", "Agent")</li>
<li>@Html.MenuLink("Products", "Index", "Product")</li>
<li>@Html.MenuLink("Product Training", "Index", "Course")</li>
<li>@Html.MenuLink("Continuing Ed", "Index", "ContEdCourse")</li>
<li>@Html.MenuLink("Help", "About", "Home")</li>
</ul>
</nav>
</header>
<img src="../../Content/images/body_top.png" id="topPic" alt="tag"/>
<section id="main">
@RenderBody()
</section>
<footer>
<span style="color: Gray;"> Copyright © 2012 Symetra Life Insurance Company. All rights reserved. Symetra® is a registered service mark of Symetra Life Insurance Company. For Internal Use Only. </span>
</footer>
</div>
CSS
#main
{
background-image: url('../../Content/Images/body_rpt.png');
background-repeat: repeat-y;
clear: both; /*add this so tabs go left! */
padding: 15px 15px 15px 30px; /*30px 30px 15px 30px; */
background-color: #fff;
/*border-radius: 4px 0 0 0;*/
-webkit-border-radius: 4px 0 0 0;
-moz-border-radius: 4px 0 0 0;
}
.page {
width: 83.7em;
margin-left: auto;
margin-right: auto;
}
ul#menu {
/*border-bottom: 1px #5C87B2 solid;*/
background-image: url('../../Content/Images/Nav-Background.gif');
padding: 0 0 2px;
position: relative;
margin: 0;
text-align: right;
}
ul#menu li {
display: inline;
list-style: none;
}
ul#menu li#greeting {
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
color: #fff;
}
ul#menu li a {
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
/*background-color: #e8eef4;*/
color: Navy; /*#034af3; */
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
/*ul#menu li a:hover {
background-color: #fff;
text-decoration: none;
}*/
ul#menu li a:active {
background-color: #a6e2a6;
text-decoration: none;
}
ul#menu li.selected a {
background-color: #fff;
color: #000;
}
/* this one is for the active tab */
.current
{
font-size: 120%;
font-weight: bold;
border-style: double;
}