반응형
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Quiz 5 : Anchor Navigation</title>
<style type="text/css">
html {width:100%; height:100%;}
body {position:relative; width:770px; height:370px; margin:0 auto; margin-top:-200px; top:50%; padding:15px; border:1px solid #000;}
h1 {position:relative; margin:0; padding:0;}
ol {position:relative; list-style:none; margin:0; padding:0; overflow:hidden;}
ol li {margin:0 15px 0 0; float:left;}
ol li a {display:block; width:138px; height:35px; padding:15px 0 0 0; background:#6DAE18; text-align:center; text-decoration:none; color:#FFF; font-weight:bold; float:left;}
ol li a:focus,
ol li a:active,
ol li a:hover {background:#000; text-decoration:underline; color:#FFF;}
#body {position:relative; width:760px; height:250px; margin:10px 0; background:#F4F4F4; overflow:hidden; overflow-x:auto;}
#content {position:relative; width:3800px; overflow:hidden;}
#content .section {position:relative; width:720px; padding:20px; height:210px; float:left;}
#footer {position:relative; width:780px; height:20px; padding:20px 0 0 0; margin:-30px 0 0 0; background:#FFF;}
</style>
</head>
<body>
<div id="header">
<h1>Anchor Navigation</h1>
</div>
<ol id="navigation">
<li><a href="#s1">Menu A</a></li>
<li><a href="#s2">Menu B</a></li>
<li><a href="#s3">Menu C</a></li>
<li><a href="#s4">Menu D</a></li>
<li><a href="#s5">Menu E</a></li>
</ol>
<div id="body">
<div id="content">
<div id="s11" class="section">
<p>앵커 네비게이션에 오신것을 환영합니다.</p>
</div>
<div id="s2" class="section">
<p>이 페이지는 앵커를 이용해서 탐색할 수 있습니다.</p>
</div>
<div id="s3" class="section">
<p>자바스크립트를 사용하지 않고도 간단한 인터렉션이 가능하다는 것을 보여줍니다.</p>
</div>
<div id="s4" class="section">
<p>웹 표준을 준수하고 접근성도 뛰어나죠.</p>
</div>
<div id="s5" class="section">
<p>콘텐츠의 높이가 브라우저의 뷰포트 보다 작고 높이가 고정된 상황에서 적절하게 사용할 수 있습니다.</p>
</div>
</div>
</div>
<div id="footer">
<address>
<abbr title="Xpress Engine">XE</abbr> Open <abbr title="User Interface">UI</abbr> Project by <a href="http://naradesign.net/">Naradesign</a>.
</address>
</div>
</body>
</html>
출처 http://naradesign.net
반응형
'웹' 카테고리의 다른 글
| 동적 div 생성 (0) | 2009.10.29 |
|---|---|
| drag drop div (0) | 2009.10.29 |
| div 영역 조절 (0) | 2009.10.29 |
| div 라운드 처리 (0) | 2009.10.28 |
| div 라운드 처리 (이미지 없이) (0) | 2009.10.28 |