반응형
1. HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>고정형 네비게이션 바</title>
<link href="css/ex09.css" rel="stylesheet">
</head>
<body>
<h1>고정형 네비게이션 바</h1>
<section>section1</section>
<section>section2</section>
<section>section3</section>
</body>
</html>
2. CSS Code
@charset "utf-8";
/* CSS Document */
*{
margin:0 auto;
padding:0;
}
ul, li{
list-style:none;
}
html, body{
width:100%;
height:100%;
}
section{
width:100%;
height:100%;
}
section:nth-of-type(1){
background:gold;
}
section:nth-of-type(2){
background:silver;
}
section:nth-of-type(3){
background:pink;
}
h1{
position:fixed;
background:black;
color:white;
left:0;
top:0;
right:0;
}
3. HTML / CSS 파일
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190623 Basic Study 55(Transform 3차원) (0) | 2019.06.23 |
|---|---|
| HTML5 - 190623 Basic Study 54(Transform 2차원) (0) | 2019.06.23 |
| HTML5 - 190622 Basic Study 52(유동형 레이아웃 구조) (0) | 2019.06.22 |
| HTML5 - 190622 Basic Study 51(고정형 레이아웃 구조) (0) | 2019.06.22 |
| HTML5 - 190622 Basic Study 50(이미지 슬라이드 - 상하좌우) (0) | 2019.06.22 |
