-1

我需要将蓝色导航栏下方的图像向下移动,以便它与下面的内容主体连接(他们应该在网页内容周围创建一个阴影框的外观)。下面是页面的 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; ">&nbsp;&nbsp; </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;
    }
4

1 回答 1

3

将图像放入主体内,将主体设置为位置:相对,然后将图像设置为位置:绝对;顶部:0;左:0;

如果您不能将图像放在主体内,则在主体上添加负边距顶部。这有点“hacky”但仍然有效。

于 2013-01-20T13:33:03.970 回答