본문 바로가기
Python_WEB/HTML

HTML5 - 190623 Basic Study 59(풀화면 동영상 - 서브메뉴)

AnKiWoong 2019. 6. 23. 18:17
반응형

1. 추천 Site

대상주식회사 - https://www.daesang.com/kr/#DAESANG

 

대상주식회사

건강한 식문화로 행복한 미래를 창조하는 기업 - 대상주식회사

www.daesang.com

 

2. Webm Sample

Wildlife.webm
2.41MB

 

3. HTML Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Full Video Site</title>
<link href="css/ex05.css" rel="stylesheet">
<link href="css/reset.css" rel="stylesheet">
</head>

<body>
<header>
<div id="wrap_head">
  <h1>Company Logo</h1>
  <nav>
    <ul>
      <li>Menu-1
        <ol>
          <li>SubMenu-1</li>
          <li>SubMenu-2</li>
          <li>SubMenu-3</li>
          <li>SubMenu-4</li>
          <li>SubMenu-5</li>
          <li>SubMenu-6</li>
          <li>SubMenu-7</li>
        </ol>
      </li>
      <li>Menu-2
        <ol>
          <li>SubMenu-1</li>
          <li>SubMenu-2</li>
        </ol>
      </li>
      <li>Menu-3
        <ol>
          <li>SubMenu-1</li>
          <li>SubMenu-2</li>
          <li>SubMenu-3</li>
        </ol>
      </li>
      <li>Menu-4
        <ol>
          <li>SubMenu-1</li>
          <li>SubMenu-2</li>
          <li>SubMenu-3</li>
        </ol>
      </li>
    </ul>
  </nav>
</div>
<!-- wrap head -->
</header>
<video autoplay preload loop muted>
  <source src="img/Wildlife.webm" type="video/webm">
</video>
</body>
</html>

 

4. CSS Code

@charset "utf-8";
/* CSS Document */
`
html,body{
	width:100%;
	height:100%;
}
video{
	width:100%;
	height:100%;
	object-fit:fill;
}
header{
	position:fixed;
	width:100%;
	/* 위치상단으로 고정 */
	left:0;
	top:0;
	height:100px;
	/* left:0; right:0; - width 100% */
	/* top:0; bottom:0; - height 100% */
	/* left:0; right:0; top:0; bottom:0; - width 100% height 100% */
	background:none;
	color:white;
	font-size:16px;
	border:1px solid blue;
}

#wrap_head{
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	border:1px solid red;
}
#wrap_head h1{
	position:absolute;
	left:10px;
	top:20px;
}
#wrap_head nav{
	border:1px solid red;
	margin-left:400px;
	margin-top:20px;
	}
#wrap_head nav ul{
	overflow:hidden;
}
#wrap_head nav ul li{
	float:left;
	padding:20px;
}
header:hover{
	background:white;
	color:black;
	cursor:pointer;
}
header{
	z-index:999;
}
#wrap_head ol{
	display:none;
	width:100%;
	position:absolute;
	height:50px;
	left:0;
	top:100px;
	border:1px solid blue;
}
#wrap_head ul>li:hover ol{
	display:block;
	background:white;
	color:black;
}
#wrap_head ol li{
	float:left;
	padding:10px;
}
#wrap_head ul li:nth-child(1)>ol{
	padding-left:200px;
	}
#wrap_head ul li:nth-child(2)>ol{
	padding-left:500px;
	}
#wrap_head ul li:nth-child(3)>ol{
	padding-left:600px;
	}
#wrap_head ul li:nth-child(4)>ol{
	padding-left:700px;
	}
#wrap_head ul>li{
	padding-bottom:50px !important;
}

 

5. HTML / CSS 파일

ex05.html
0.00MB
ex05.css
0.00MB

 

6. 미리보기

반응형
저작자표시 비영리 동일조건

'Python_WEB > HTML' 카테고리의 다른 글

HTML5 - 190623 Basic Study 61(세로 네비게이션 바)  (0) 2019.06.23
HTML5 - 190623 Basic Study 60(풍선 도움말)  (0) 2019.06.23
HTML5 - 190623 Basic Study 58(박스 그림자 / 테두리 동적효과)  (0) 2019.06.23
HTML5 - 190623 Basic Study 57(Rotation Circle)  (0) 2019.06.23
HTML5 - 190623 Basic Study 56(3차원 회전 주사위)  (0) 2019.06.23

'Python_WEB/HTML' Related Articles

티스토리툴바