반응형 탐색 모음 예제 코드를 생성하기 위해 js+css3을 사용하는 방법에 대한 자세한 설명-CSS 튜토리얼-php.cn

반응형 탐색 모음 예제 코드를 생성하기 위해 js+css3을 사용하는 방법에 대한 자세한 설명

伊谢尔伦

풀어 주다： 2017-07-20 09:45:44

원래의

1816명이 탐색했습니다.

다양한 화면 해상도나 브라우저 창 크기에 따라 탐색 모음의 스타일을 자동으로 변경할 수 있는 반응형 탐색 모음을 만듭니다. 여기서 가장 중요한 것은 CSS3 미디어 쿼리입니다.

또한 ie6-ie8은 CSS3 미디어 쿼리를 지원하지 않으므로 ie6-ie8에 대한 특별한 처리가 필요하며 기본 스타일을 유지하도록 해야 합니다. 이는 레이아웃과 스타일에서 고려해야 합니다. 이 시점에서.

먼저 레이아웃을 살펴보세요.

<p class="navBar">
    <p class="nav">
        <ul id="menu">
            <li class="current"><a href="#">首页</a></li>
            <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>
            <li><a href="#">公开课</a></li>
        </ul>
        <p class="hot">
            <a href="#">钢铁侠3</a>
            <a href="#">中国合伙人</a>
            <a href="#">盛夏晚晴天</a>
            <a href="#">陆贞传奇</a>
        </p>
        <!--判断浏览器是否是IE9,IE10或者是非IE浏览器-->
        <!--[if (gt IE 8) | !(IE)]><!-->
        <h1 class="title" id="title">
            <a href="#"></a>
            <span class="btn" id="btn"></span>
        </h1>
        <!--<![endif]-->
    </p>
</p>

로그인 후 복사

html 부분에도 조건부 주석이 필요합니다. 브라우저가 ie6-8인 경우 html 태그에 "ie6-8" 클래스를 마운트합니다. 테이블 내부 및 외부 처리를 용이하게 합니다.

<!DOCTYPE html>
<!--[if lt IE 9]><html class="ie6-8"><![endif]-->
<html>
...

로그인 후 복사

다음 단계는 먼저 전체 스타일을 처리하고 ie6-ie8

* {margin: 0; padding: 0;}
body {font: 14px/22px "宋体", arial, serif;}
.navBar {margin-top: 80px; width: 100%; height: 38px; background: #333;}
.nav {margin: 0 auto; border: 0px solid #ccc;}
.nav ul {list-style: none; width: auto;}
.nav ul li {height: 38px; text-align: center;}
.nav ul li a {display: block; font-size: 16px; color: #fff; text-decoration: none; line-height: 39px;}
.ie6-8 .nav {width: 1000px; height: 38px;}
.ie6-8 .nav ul li {float: left;}
.ie6-8 .nav ul li a {padding: 0 30px 0 30px;}
.ie6-8 .nav ul li.current {background: #f60;}
.ie6-8 .nav ul li:hover a {color: #f60;}
.ie6-8 .nav ul li a:hover {_color: #f60;}/*IE6 Hack*/
.ie6-8 .nav ul li.current:hover a {color: #fff;}
.ie6-8 .nav .hot {float: left; margin-left: 20px; padding-top: 8px;}
.ie6-8 .nav .hot a {padding: 0 5px 0 5px; font-size: 12px; color: #fff; text-decoration: none;}
.ie6-8 .nav .hot a:hover {color: #f60; text-decoration: underline;}
.ie6-8 .nav .title {display: none;}

로그인 후 복사

ok를 사용합니다.

화면 너비가 1000px보다 큰 경우:

@media screen and (min-width: 1000px) {
    .nav {width: 1000px; height: 38px;}
    .nav ul li {float: left; width: auto;}
    .nav ul li a {padding: 0 30px 0 30px;}
    .nav ul li.current {background: #f60;}
    .nav ul li:hover a {color: #f60;}
    .nav ul li.current:hover a {color: #fff;}
    .nav .hot {margin-left: 20px; padding-top: 8px;}
    .nav .hot a {padding: 0 5px 0 5px; font-size: 12px; color: #fff; text-decoration: none;}
    .nav .hot a:hover {color: #f60; text-decoration: underline;}
    .nav .title {display: none;}
}

로그인 후 복사

화면 너비가 640px에서 1000px 사이인 경우:

@media screen and (min-width: 640px) and (max-width: 1000px) {
    .nav {width: auto; height: 38px;}
    .nav ul li {float: left; width: 14%; min-width: 50px;}
    .nav ul li.current {background: #f60;}
    .nav ul li:hover a {color: #f60;}
    .nav ul li.current:hover a {color: #fff;}
    .nav .hot {display:none;}
    .nav .title {display: none;}
}

로그인 후 복사

화면 너비가 640px보다 작은 경우:

@media screen and (max-width: 640px) {
    .navBar {margin-top: 0; height: auto; background: #444;}
    .nav {width: auto; height: auto;}
    .nav ul li {margin-top: 1px; width: 100%; min-width: 100px;background: #333;}
    .nav ul li a:active {background: #f60;}
    .nav .hot {display:none;}
    .nav .title {position: relative; width: 100%; height: 38px; border-top: 1px solid #444; background: #333; text-align: center; font:normal 20px/35px "Microsoft YaHei", arial, serif; letter-spacing: 2px;}
    .nav .title a {color: #f60; text-decoration: none;}
    .nav .title .btn {position: absolute; right: 10px; top: 0; width: 34px; height: 34px; padding: 2px; background: url(btn.png) center center no-repeat; cursor: pointer;}
}

로그인 후 복사

좋아, 레이아웃 및 스타일 제어가 완료되었습니다

아래에서 js를 살펴보겠습니다. 하지만 js에 대한 자세한 내용은 다루지 않겠습니다. 핵심 코드를 게시해 보겠습니다.

이 코드 부분은 애니메이션 효과를 생성하는 데 사용됩니다.

var move = function (obj, target) {
    var timer;
    clearInterval(timer);
    timer = setInterval(function () {
        var speed = (target - obj.offsetTop)/3;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        if (Math.abs(obj.offsetTop - target) < 4) {
            clearInterval(timer);
            obj.style.marginTop = target + "px";
        } else {
            obj.style.marginTop = obj.offsetTop + speed + "px";
        }
    }, 30);
    }

로그인 후 복사

위 내용은 반응형 탐색 모음 예제 코드를 생성하기 위해 js+css3을 사용하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!