반응형
자주 사용하는 메뉴바 디자인 기록
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/common/reset.css">
<link rel="stylesheet" href="/css/common/common.css">
<title>MenuBar</title>
</head>
<body id="bodyWrap">
<header class="headerWrap">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
</ul>
</nav>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>.headerWrap {
width: 100%;
height: 50px;
text-align: center;
background-position: center;
background-size: cover;
background-color: #000000;
position: fixed;
z-index: 1;
}
nav{
font-size: 1.2rem;
position: relative;
}
nav ul{
text-align: center;
margin: 0 auto;
width: auto;
}
nav ul li{
display: inline-block;
}
nav ul li a{
line-height: 50px;
}
nav ul li a{
color: #FFFFFF;
text-align: center;
padding: 15px 20px;
box-sizing: border-box;
}
li a:hover{
color: #ffdd34;
}
main {
height: 4000px;
background-color: yellowgreen;
}main 은 스크롤시 메뉴바가 고정되는지 확인을 위해서.
반응형
'공부방 > Programming' 카테고리의 다른 글
| reset.css (0) | 2023.02.10 |
|---|---|
| git 명령어 모음 (0) | 2023.02.01 |
| [Git] git Error fatal: The current branch master has no upstream branch.To push the current branch and set the remote as upstream, use (0) | 2023.01.09 |
| ERROR E325: ATTENTION (0) | 2022.12.28 |
| 6/8 css3 selecter 선택자 태그 (0) | 2020.08.27 |