[css 3] 그 라 데 이 션

장 커 군

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<title></title>

<script src="http://t.douban.com/js/jquery.min.js" async="true"></script>

<script src="http://t.douban.com/js/do.js"></script>

<style type="text/css">

/* Reset */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}

table{border-collapse:collapse;border-spacing:0}

fieldset,img{border:0}

address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}

ol,ul{list-style:none}

caption,th{text-align:left}

h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}

q:before,q:after{content:''}

abbr,acronym{border:0}



body{padding:10em;font:12px/1.5 arial,sans-serif}



/* Tab */

.tabs{width:100%;overflow:hidden;margin-bottom:20px}

.tabs ul{float:left;-moz-box-shadow:#ddd 3px 3px 3px;-webkit-box-shadow:#ddd 3px 3px 3px}

.tabs li{float:left;margin-left:-1px;border:1px solid #666;border-bottom:1px solid #dfdfdf;

    /*        */

    -moz-border-radius-topleft:4px;

      -moz-border-radius-topright:4px;

    /*    */

      background-image:-moz-linear-gradient(0,

        #ddd 1%,

        #f5f5f5 3%,

        #f5f5f5 100%);



    -webkit-border-top-left-radius:4px;

      -webkit-border-top-right-radius:4px;

      background-image:-webkit-gradient(linear, left top, right top,

        color-stop(0.01, #ddd),

        color-stop(0.03, #f5f5f5),

        color-stop(1, #f5f5f5))

}

.tabs li:first-child{margin:0;background:#f5f5f5}

.tabs li.on{background:#fff;border-bottom:none}

.tabs li a{display:block;*display:inline-block;height:27px;padding:0 20px;text-align:center;line-height:27px;overflow:hidden;color:#333;outline:0}

.tabs li.on a,

.tabs li a:link,.tabs li a:visited{color:#333;text-decoration:none}

.tabs .others{overflow:auto;height:28px;*display:inline-block;border-bottom:1px solid #dfdfdf;text-align:right}

</style>

</head>

<body>

<div class="tabs">

    <ul>

        <li><a href="page1.html">    </a></li>

        <li><a href="page2.html">        </a></li>

        <li class="on"><a href="page3.html">     </a></li>

        <li><a href="page4.html">    </a></li>

    </ul>

    <div class="others">&nbsp;</div>

</div>  

<script>

Do(function () {

    $('.tabs a').click(function (e) {

        e.preventDefault();

        $('.tabs .on').removeClass('on');

        $(this).parent().addClass('on');

    });

});

</script>

</body>

</html>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

초보자를 위한 간단한 카드 호버 애니메이션

html과 css만 사용하여 만든 매우 간단한 카드 호버 애니메이션을 살펴보겠습니다. css 속성을 알고 있다면 이해할 수 있지만 완전히 초보자라면 css의 기초를 배우는 것이 좋습니다. 1단계: 마크업 즉, HTM...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

[css 3] 그 라 데 이 션

좋은 웹페이지 즐겨찾기