2014-07-14 2 views
0

HTML :메모장 ++되지 목록과 이미지를 보여주는

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="main.css"> 
</head> 
<body> 
    <div class="nav"> 
     <ul> 
       <li><a href="#">Rooms</a></li> 
       <li><a href="#">Food</a></li> 
       <li><a href="#">Events</a></li> 
       <li><a href="#">Offers</a></li> 
     </ul>  
    </div> 
    <div class="jumbotron"> 
     <h1> Welcome</h1> 
     <p>Enjoy your stay</p> 
    </div> 
</body> 
</html> 

CSS :

.nav li{ 
    color: #5a5a5a; 
    font-size: 11px; 
    font-weight: bold; 
    padding: 14px 10px; 
    text-transform: uppercase; 
    display:inline; 
    list-style-type:none; 
    } 

.jumbotron{ 
    background-image:url('http://4.bp.blogspot.com/-NPN-yWZyRIM/T4jMz_3o0SI/AAAAAAAAAAA/LGEgW7642Rs/s1600/Greenlake_Room-Greenlake-01-1061468546-O.jpg'); 
    height:300px; 
    } 

것은 내가 어떤 인터넷 브라우저에서 실행을 클릭하면, 내 목록 및 배경 이미지가 표시되지 않습니다 ++ 메모장을 사용. 제발 초보자입니다.

+0

당신의 코드를 실행할 때 작동하기 때문입니다. 이것을 확인하십시오 http://fiddle.jshell.net/dkLft/ – Haris

+0

메모장이나 브라우저를 사용하여 코드를여시겠습니까? 아니면 둘다 ? –

답변

1

코드가 완벽합니다. 파일을 실행하기 전에 HTML 파일로 저장했는지 확인하고 CSS가 올바른 위치, 경우에 따라 html이 저장된 위치에 저장되었는지 확인하십시오 . 또한 로컬 PC에 이미지를 다운로드하는 것이 더 좋을 것입니다. 이미지를 가져오고 가져올 필요가 없으므로 사이트를 더 빨리로드하므로 메모장을 사용하지 않고 페이지를 보려고 했습니까?