HTML/CSS를 사용하여 이미지 이동

-1

파란색 탐색 바 아래의 이미지를 아래쪽으로 이동하여 아래 내용의 주요 본문과 연결해야합니다 (웹 페이지의 콘텐츠 주위에 음영 처리 된 상자 모양이 나타납니다) . 아래는 페이지의 HTML입니다. 내가 내려 가고있는 이미지는 boy_top.png입니다. 누구든지이 작업을 수행하는 방법을 알고 있습니까? 또한 "기본" "페이지"및 "메뉴"섹션에 CSS를 포함 시켰습니다. 파란색 탐색 영역은 "메뉴"섹션에 연결되며, 기본 컨텐트 영역은 "기본"섹션에 연결되며 모두 "페이지"CSS에 캡슐화됩니다. 그리고, 상대 위치에 이미지를 설정 : 본체 내부HTML/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; 
    }

출처

2013-01-19 NealR

'display : block'을 이미지의 스타일에 추가하십시오. –

안녕하십니까 JSFiddle 또는 이와 비슷한 것으로 만들 수 있습니다. 그러면 실제로 볼 수 있습니다. –

이미지에'display : block' 또는'vertical-align : bottom'을 넣으면됩니다. . – sevenseacat

넣어 이미지 위치에 본체를 설정 절대; 상단 : 0; 왼쪽 : 0;

이미지를 본체 내부에 넣을 수 없으면 본체에 음수 여백을 추가하십시오. 조금 "해킹"이지만 여전히 유효합니다.

출처

2013-01-20 13:33:03 DanV

HTML/CSS를 사용하여 이미지 이동

답변

관련 문제