div+css를 사용하여 첫 번째 수준 탐색 만들기-CSS 튜토리얼-php.cn

div+css를 사용하여 첫 번째 수준 탐색 만들기

零下一度

풀어 주다： 2017-04-28 11:01:37

원래의

1931명이 탐색했습니다.

이 글에서는 주로 간단한 네비게이션 바를 만드는 방법을 공유합니다. 특정 참조 값이 있으므로 아래 편집기를 사용하여 살펴보겠습니다.

오늘은 간단한 탐색 모음을 만드는 방법을 공유하겠습니다.

1단계: CSS 스타일 시트 소개 nav ID를 사용하여 새 A 레이어를 만들고

,
, 태그를 사용하여 완성된 효과를 만듭니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/yiji.css"/>
    </head>
    <body>
        <p id="nav">
            <ul>
                <li><a href="">首页</a></li>
                
                <li><a href="">首页</a></li>
                
                <li><a href="">首页</a></li>
                
                <li><a href="">首页</a></li>
                
                <li><a href="">首页</a></li>
            </ul>
        </p>
    </body>
</html>

로그인 후 복사

두 번째 단계는 CSS 스타일을 설정하는 것입니다.

1. nav 속성을 설정합니다<🎜. >

#nav{
    width: 500px;
    height: 50px;
    border: 1px solid red;
}

로그인 후 복사

의 표시 효과는 다음과 같습니다.

앞의 점을 지웁니다.

#nav ul{
    list-style: none;
}

로그인 후 복사

#nav ul li a{ width: 98px; height: 50px; float: left; border: 1px solid red; text-align: center; line-height: 50px; text-decoration: none; }
로그인 후 복사
<🎜에 포함된 태그의 속성을 설정합니다. >

4 .마우스 오버 효과 설정

rreee최종 효과:

HTML 코드 부분 완성:

#nav ul li a:hover{
    background-color: #ABCDEF;
}

로그인 후 복사

CSS 스타일 코드 부분 완성:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/yiji.css"/>
    </head>
    <body>
        <p id="nav">
            <ul>
                <li><a href="">首页</a></li>
                 
                <li><a href="">首页</a></li>
                 
                <li><a href="">首页</a></li>
                 
                <li><a href="">首页</a></li>
                 
                <li><a href="">首页</a></li>
            </ul>
        </p>
    </body>
</html>

로그인 후 복사

위 내용은 div+css를 사용하여 첫 번째 수준 탐색 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!