[CSS] ch01-11. navigation

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; /*오른쪽 하단 코너를 부드럽게*/
}