반응형
- code -
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* 마우스 호버시 색깔 변화 */
li a:hover {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<h2>네비게이션바(Navigation Bar)</h2>
<ul>
<li><a href="#home">메인</a></li>
<li><a href="#news">소개</a></li>
<li><a href="#contact">게시판</a></li>
<li><a href="#about">방명록</a></li>
</ul>
</body>
</html>
결과물
728x90
반응형
'Coding > HTML & CSS' 카테고리의 다른 글
| [HTML & CSS] a, onclick 태그 (새창/팝업/현재창) 열기 (0) | 2020.12.04 |
|---|---|
| [HTML & CSS] 테두리 굴곡(border radius) 주기 (0) | 2020.11.30 |
| [HTML & CSS] 슬라이드(slide) 옆으로 움직이는 방향 (0) | 2020.11.13 |
| [HTML & CSS] 슬라이드(slide) 위로 올라가는 방향 (0) | 2020.11.09 |
| [HTML & CSS] 멋진 리스트 스타일(list style ) (0) | 2020.11.03 |
댓글