728x90
반응형
11_nav.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Gradient Menu</title>
<style>
@import "../css/11_nav.css";
ul.navi li {
list-style-type: none; /* 불릿 없앰 */
display: block; /* 영역 만듦 */
width: 8em; /* 너비 */
height: 3em; /* 높이 */
float: left; /* 왼쪽으로 플로팅 */
text-align: center; /* 가운데 정렬 */
font-family: "Lucida Grande", sans-serif; /* 글꼴 */
border-right: 1px #818181 solid; /* 오른쪽에 테두리 */
box-shadow: 1px 1px 1px #bbb; /* 박스 그림자 */
background-color: #c9c9c9; /* 배경색 */
background: -webkit-gradient(linear, left top, left bottom, from(#c9c9c9),
to(#848484), color-stop(0.6, #a1a1a1)); /* 그라데이션 배경 */
background: -moz-linear-gradient(top, #c9c9c9, #a1a1a1, #848484);
}
/* 메뉴 링크 스타일 */
ul.navi li a {
display: block; /* 영역 만듦 */
padding: .8em .5em .5em .5em; /* 안여백 */
text-decoration: none; /* 밑줄 없앰 */
color: #292929; /* 글자색 */
text-shadow: 1px 1px 0px #cccccc; /* 텍스트 그림자 */
}
/* 메뉴 링크 위로 마우스 오버했을 때의 스타일 */
ul.navi li:hover {
background-color: #333333; /* 배경색 */
background: -webkit-gradient(linear, left top, left bottom, from(#333333),
to(#4c4c4c), color-stop(0.6, #474747)); /* 그라데이션 배경 */
background: -moz-linear-gradient(top, #333333, #474747, #4c4c4c);
}
/* 메뉴 링크 위로 마우스 오버한 후 링크 스타일 */
ul.navi li:hover>a {
color: #FFF; /* 글자색 */
text-shadow: 0px 1px 0px #fff; /* 텍스트 그림자 */
}
</style>
</head>
<body>
<div>
<ul class="navi">
<li class="home"><a href="#">Home</a></li>
<li id="html"><a href="#">HTML5</a></li>
<li id="css"><a href="#">CSS3</a></li>
<li id="jquery"><a href="#">JQuery</a></li>
</ul>
</div>
</body>
</html>
11_nav.css
@CHARSET "UTF-8";
/*첫번째 항목의 스타일*/
ul.navi li:first-child {
border-top-left-radius: .5em; /*왼쪽 상단 코너를 부드럽게 */
border-bottom-left-radius: .5em; /*왼쪽 하단 코너를 부드럽게*/
}
/*두번째 항목의 스타일*/
ul.navi li:last-child {
border-top-right-radius: .5em; /*오른족 상단 코너를 부드럽게*/
border-bottom-right-radius: .5em; /*오른쪽 하단 코너를 부드럽게*/
}
728x90
반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] ch02-02. align (정렬) (0) | 2017.08.23 |
|---|---|
| [CSS] ch02-01. font (폰트) (0) | 2017.08.23 |
| [CSS] ch01-10. pseudo (0) | 2017.08.23 |
| [CSS] ch01-09. attr (0) | 2017.08.22 |
| [CSS] ch01-08. group (0) | 2017.08.22 |