집 >웹 프론트엔드 >CSS 튜토리얼 >반응형 탐색 모음 예제 코드를 생성하기 위해 js+css3을 사용하는 방법에 대한 자세한 설명

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

伊谢尔伦원래의: 2017-07-20 09:45:441849검색

다양한 화면 해상도나 브라우저 창 크기에 따라 탐색 모음의 스타일을 자동으로 변경할 수 있는 반응형 탐색 모음을 만듭니다. 여기서 가장 중요한 것은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：CSS에서 중심 스타일을 구현하기 위한 여러 기술의 장점과 단점에 대한 자세한 설명다음 기사：CSS에서 중심 스타일을 구현하기 위한 여러 기술의 장점과 단점에 대한 자세한 설명