| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 |
- 안드로이드 개발 2.0 강좌
- 안드로이드2.0
- 안드로이드폰
- 구글안드로이드
- 스카이 안드로이드폰 시리우스 K양 동영상
- 아이폰 바탕화면
- 구글 안드로이드
- 안드로이드 바탕화면
- 영어
- 안드로이드 배경화면
- 안드로이드2.0개발
- 안드로이드 개발
- 안드로이드개발
- 안드로이드 2.0 개발
- 안드로이드
- Form Stuff
- objective-c
- 하루 한마디 영어
- 구글 안드로이드 개발
- 안드로이드 개발 2.0
- sky 시리우스폰
- 스카이 안드로이드폰 시리우스
- MapView
- SKY 시리우스
- 하루한마디영어
- 안드로이드 개발 강좌
- 인기있는 블로그 만들기
- 스마트폰 배경화면
- 아이폰 배경화면
- android
- Today
- Total
moozi
5/23 레이아웃에 서브메뉴 적용하기 본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TIS정보기술교육센터</title>
<style type="text/css">
*{ margin: 0; padding:0;}
#top{
background-image: url('img/top.jpg');
background-repeat: no-repeat;
width:800px;
height:10px;
}
#header{
background-image: url('img/header.jpg');
background-repeat: no-repeat;
width:800px;
height: 100px;
padding-left: 20px;
}
#nav{
background-image: url('img/header.jpg');
background-repeat: no-repeat;
width:800px;
height: 30px;
}
#section{
background-image: url('img/content.jpg');
background-repeat: repeat;
width:800px;
height: 400px;
}
#bottom{
background-image: url('img/bottom.jpg');
background-repeat: no-repeat;
width:800px;
height: 20px;
}
body{
background-color: #4C320D;
}
#wrap{
margin: auto;
width: 800px; /* 가로사이즈 설정.필수 */
}
#nav>ul>li{
list-style: none;
float:left;
padding-left:20px;
}
#left{
padding-left: 20px;
float:left;
width:635px;
}
#right{
}
#footer{
text-align: center;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
}
</style>
</head>
<body>
<div id="wrap">
<div id="top"></div>
<div id="header">
<h1>TIS정보기술교육센터</h1>
<p>-정부지원IT전문과정 운영</p>
</div>
<div id="nav">
<ul>
<li class="dropdown">
<a href="#" class="dropbtn">교육센터소개</a>
<div class="dropdown-content">
<a href="#">대표인사말</a>
<a href="#">강사소개</a>
<a href="#">F/Q</a>
</div>
</li>
<li>교육센터연혁</li>
<li>교육센터비전</li>
<li>개설과정</li>
</ul>
</div>
<div id="section">
<div id="left">
<h2>TIS정보기술교육센터 소개</h2>
<p>TIS정보기술교육센터에서는 정부지원IT전문교육과정을 운영하고 있습니다.</p>
<img src="img/img01.png">
</div>
<div id="right">
<h3>Quick Menu</h3>
<ul>
<li>강사채용</li>
<li>구인신청</li>
<li>결제안내</li>
<li>교육센터위치</li>
</ul>
</div>
</div>
<div id="bottom"></div>
<div id="footer">
©copyright all rights reserved by TIS정보기술교육센터
</div>
</div>
</body>
</html>
'TIS_2016 > HTML5_2기' 카테고리의 다른 글
| 애니메이션 파일 (0) | 2016.05.23 |
|---|---|
| 5/23 모바일 레이아웃 (0) | 2016.05.23 |
| 5/21 수업시간 작성 코드 (0) | 2016.05.21 |
| 5/20 레이아웃연습 (0) | 2016.05.20 |
| 5/19 수업 예제 (0) | 2016.05.19 |