Question

我需要将图像向下移动到蓝色导航栏下方，以便它与下面的主体内容连接（它们应该创建围绕网页内容的阴影框的显示）.Below是HTML的页。我试图向下移动的图像是boy_top.png。有谁知道如何做到这一点？我还为“主要”“页面”和“菜单”部分添加了CSS。蓝色导航区域附加到“菜单”部分，主要内容区域附加到“主”部分，并且它们都封装在“页面”css中。

enter image description here

    <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;
    }

Answer 1

将图像放入主体内，将主体设置为position：relative，然后将图像设置为position：absolute;顶部：0;左：0;

如果无法将图像放入主体内，请在主体上添加负边距顶部。它有点“hacky”但仍然有效。

使用HTML / CSS向下移动图像

1 个答案: