지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

HTML5 디자인 웹 페이지 라바 램프 탐색(탐색 모음) 플러그인이 완전한 소스 코드와 함께 추가되었습니다.

WBOY
풀어 주다： 2016-08-18 08:57:59
원래의
1421명이 탐색했습니다.

탐색 모음:

1. 헤더 배너 이미지 위 또는 아래에 위치한 가로 방향의 탐색 버튼을 말합니다. 블로그의 다양한 페이지를 연결하는 역할을 합니다.

2. 웹 디자인에서 없어서는 안 될 부분으로, 웹사이트 방문자가 필요한 콘텐츠에 쉽게 접근할 수 있는 특정 방법을 제공하는 것을 말합니다. 한 페이지에서 다른 페이지로 빠르게 이동합니다.

3. 내비게이션 바의 목적은 웹사이트의 계층적 구조를 체계적으로 명확하게 표시하고, 사용자가 탐색 중에 헤매지 않도록 쉽게 정보를 찾고 관리할 수 있도록 안내하는 것입니다. 웹사이트.

4. 웹사이트 정보가 사용자에게 효과적으로 전달되기 위해서는 네비게이션이 간결하고 직관적이며 명확해야 합니다.

디자인 과정:

(1) HTML 코드 작성: 

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="zh"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="no-js modern"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Lava Lamp Navigation Design - 熔岩灯样式，导航设计<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="css/lavalamp.css"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="js/modernizr.min.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="js/jquery.min.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="js/jquery.UI.min.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="js/jquery.lavalamp.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="js/navigation.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="page-wrap"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>Lava Lamp Style Navigation Design<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>具有Lava Lamp效果的滑动导航条的设计灵感源于熔岩灯(Lava Lamp).<span style="color: #0000ff;"><</span><span style="color: #800000;">br </span><span style="color: #0000ff;">/></span><span style="color: #000000;">
        在熔岩灯的玻璃瓶体内装有特制的水溶液与蜡质固体，底部灯泡点亮后形成热量，传递到玻璃瓶.</span><span style="color: #0000ff;"><</span><span style="color: #800000;">br </span><span style="color: #0000ff;">/></span><span style="color: #000000;">
        瓶底蜡质受热熔化变轻，便会徐徐上升,到了顶部重新冷却又徐徐下降，不断往复.</span><span style="color: #0000ff;"><</span><span style="color: #800000;">br </span><span style="color: #0000ff;">/></span><span style="color: #000000;">
        其独特的功能和独特的视觉享受令人心旷神怡，多姿多彩的状态时而如少女，时而像火山爆发般狂热。
        </span><span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">nav </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="navigation"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="clearfix"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="focus"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>Home<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>Products<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>Download<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>Purchase<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>Contact<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>About<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">nav</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
로그인 후 복사

(2) CSS3 스타일 시트 작성 

<span style="color: #800000;">@charset "utf-8";

</span><span style="color: #008000;">/*</span><span style="color: #008000;"> reset.css - 浏览器样式初始化
---------------------------------------------------------------- </span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;"> 所有元素空白 0, 字号 100%, 垂直对齐方式 baseline, 背景色 透明 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    outline</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    vertical-align</span>:<span style="color: #0000ff;"> baseline</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> transparent</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> 初始化HTML5新元素 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section </span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> block</span>; }

<span style="color: #008000;">/*</span><span style="color: #008000;"> 正文基本设定, 删除引用语句 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
body </span>{<span style="color: #ff0000;"> 
    font</span>:<span style="color: #0000ff;"> 13px/1.5 "Nanum Gothic", Dotum, Sans-Serief</span>;<span style="color: #ff0000;"> 
    color</span>:<span style="color: #0000ff;"> #323232</span>; 
    }
    <span style="color: #008000;">/*</span><span style="color: #008000;"> 设置英文 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
    .lang-en, :lang(en) </span>{<span style="color: #ff0000;"> font</span>:<span style="color: #0000ff;"> 12px/1.5 "Helvetica Neue", Helvetica, Verdana, Arial, Sans-Serief</span>; }
    
<span style="color: #008000;">/*</span><span style="color: #008000;"> 列表及引用 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
ol, ul </span>{<span style="color: #ff0000;"> list-style</span>:<span style="color: #0000ff;"> none</span>; }<span style="color: #800000;">
blockquote, q </span>{<span style="color: #ff0000;"> quotes</span>:<span style="color: #0000ff;"> none</span>; }

<span style="color: #008000;">/*</span><span style="color: #008000;"> 删除hr </span><span style="color: #008000;">*/</span><span style="color: #800000;">
hr </span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> none</span>; }

<span style="color: #008000;">/*</span><span style="color: #008000;"> 设置标题字体大小 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
h1, h2, h3, h4, h5, h6 </span>{<span style="color: #ff0000;"> 
    font-weight</span>:<span style="color: #0000ff;"> normal</span>;<span style="color: #ff0000;"> 
    color</span>:<span style="color: #0000ff;"> #111</span>; 
    }<span style="color: #800000;">
    h1 </span>{<span style="color: #ff0000;"> 
        font-size</span>:<span style="color: #0000ff;"> 36px</span>;<span style="color: #ff0000;"> 
        line-height</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;"> 
        margin-bottom</span>:<span style="color: #0000ff;"> 0.5em</span>; 
    }<span style="color: #800000;">
    h2 </span>{<span style="color: #ff0000;"> 
        font-size</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;"> 
        margin-bottom</span>:<span style="color: #0000ff;"> 0.75em</span>;
    }<span style="color: #800000;">
    h3 </span>{<span style="color: #ff0000;"> 
        font-size</span>:<span style="color: #0000ff;"> 18px</span>;<span style="color: #ff0000;"> 
        line-height</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;"> 
        margin-bottom</span>:<span style="color: #0000ff;"> 1em</span>;
    }<span style="color: #800000;">
    h4 </span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 14px</span>; }<span style="color: #800000;">
    h5 </span>{<span style="color: #ff0000;"> margin-bottom</span>:<span style="color: #0000ff;"> 1.5em</span>; }<span style="color: #800000;">
    h5, h6 </span>{<span style="color: #ff0000;"> font-weight</span>:<span style="color: #0000ff;"> bold</span>; }<span style="color: #800000;">
    
    h1 img, h2 img, h3 img,
    h4 img, h5 img, h6 img </span>{<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 0</span>; }

<span style="color: #008000;">/*</span><span style="color: #008000;"> 设置标题、段落上下空间 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
p </span>{<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 0 0 1.5em</span>; }

<span style="color: #008000;">/*</span><span style="color: #008000;"> :active, :focus 伪类轮廓线删除 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
:active, :focus </span>{<span style="color: #ff0000;"> outline</span>:<span style="color: #0000ff;"> 0</span>; }

<span style="color: #008000;">/*</span><span style="color: #008000;"> 重定义超链接基本样式 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
a:link, a:visited </span>{<span style="color: #ff0000;"> 
    padding-bottom</span>:<span style="color: #0000ff;"> .25px</span>;<span style="color: #ff0000;"> 
    border-bottom</span>:<span style="color: #0000ff;"> 1px dotted #7c7c7c</span>;<span style="color: #ff0000;"> 
    text-decoration</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #7c7c7c</span>;
}<span style="color: #800000;">
a:hover, a:active </span>{<span style="color: #ff0000;">
    border-bottom-style</span>:<span style="color: #0000ff;"> solid</span>;<span style="color: #ff0000;"> 
    color</span>:<span style="color: #0000ff;"> #424242</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> 设置包含img的a元素的border与padding </span><span style="color: #008000;">*/</span><span style="color: #800000;">
a img </span>{<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> 
    padding</span>:<span style="color: #0000ff;"> 0</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> insert, delete </span><span style="color: #008000;">*/</span><span style="color: #800000;">
ins </span>{<span style="color: #ff0000;"> text-decoration</span>:<span style="color: #0000ff;"> none</span>; }<span style="color: #800000;">
del </span>{<span style="color: #ff0000;"> text-decoration</span>:<span style="color: #0000ff;"> line-through</span>; }

<span style="color: #008000;">/*</span><span style="color: #008000;"> 设定表格 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
table </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 -1px</span>;<span style="color: #ff0000;">
    border-collapse</span>:<span style="color: #0000ff;"> collapse</span>;<span style="color: #ff0000;">
    border-spacing</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    table-layout</span>:<span style="color: #0000ff;"> fixed</span>;
}<span style="color: #800000;">
table, th, td </span>{<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 1px solid #7c7c7c</span>; }<span style="color: #800000;">
th, td </span>{<span style="color: #ff0000;"> 
    padding</span>:<span style="color: #0000ff;"> 1em 2em</span>;<span style="color: #ff0000;"> 
    text-align</span>:<span style="color: #0000ff;"> left</span>; 
}<span style="color: #800000;">
caption </span>{<span style="color: #ff0000;"> 
    visibility</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;"> 
    height</span>:<span style="color: #0000ff;"> 1px</span>;
}
로그인 후 복사
<span style="color: #800000;">@charset "utf-8";
@import "reset.css";
@import url(http://fonts.googleapis.com/css?family=Montez);
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> lavalamp.nav.css - 熔岩灯导航设计样式
------------------------------------------------------------------- </span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;"> ///////////////////////////////////////// 
    =基本样式
///////////////////////////////////////// </span><span style="color: #008000;">*/</span><span style="color: #800000;">    

body </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #eeece7</span>;
}<span style="color: #800000;">

h1 </span>{<span style="color: #ff0000;">
    font</span>:<span style="color: #0000ff;"> 52px/1 'Montez'</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #a4834d</span>;
}<span style="color: #800000;">

h1+p </span>{<span style="color: #ff0000;">
    margin-bottom</span>:<span style="color: #0000ff;"> 3.5em</span>;
}<span style="color: #800000;">

#page-wrap </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 960px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 30px auto</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 3em</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    -webkit-box-shadow</span>:<span style="color: #0000ff;"> 0px 0px 2px #62615f inset</span>;<span style="color: #ff0000;">
    -moz-box-shadow</span>:<span style="color: #0000ff;"> 0px 0px 2px #62615f inset</span>;<span style="color: #ff0000;">
    box-shadow</span>:<span style="color: #0000ff;"> 0px 0px 2px #62615f inset</span>;<span style="color: #ff0000;">
    -webkit-border-radius</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    -khtml-border-radius</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    -moz-border-radius</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;"> 20px</span>;    
}<span style="color: #800000;">

#page-wrap p</span>{<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;">"宋体"</span>;
    }
<span style="color: #008000;">/*</span><span style="color: #008000;"> ///////////////////////////////////////// 
    =#navigation
///////////////////////////////////////// </span><span style="color: #008000;">*/</span><span style="color: #800000;">    

#navigation </span>{<span style="color: #ff0000;"> 
    padding</span>:<span style="color: #0000ff;"> 3px</span>;
    }<span style="color: #800000;">
    #navigation li </span>{<span style="color: #ff0000;">
        float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
        border-right</span>:<span style="color: #0000ff;"> 1px solid #eee</span>;
    }<span style="color: #800000;">
    #navigation li:last-child </span>{<span style="color: #ff0000;">
        border</span>:<span style="color: #0000ff;"> 0</span>;
        }<span style="color: #800000;">
        #navigation li a </span>{<span style="color: #ff0000;">
            border</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
            padding</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
            font</span>:<span style="color: #0000ff;"> 14px/1 Verdana</span>;<span style="color: #ff0000;">
            color</span>:<span style="color: #0000ff;"> #a49e96</span>;
        }<span style="color: #800000;">
        .no-js #navigation li a:hover,
        .no-js #navigation li a:focus,
        .no-js #navigation li.focus a,
        .lava </span>{<span style="color: #ff0000;">
        -webkit-border-radius</span>:<span style="color: #0000ff;"> 6px</span>;<span style="color: #ff0000;">
        -khtml-border-radius</span>:<span style="color: #0000ff;"> 6px</span>;<span style="color: #ff0000;">
        -moz-border-radius</span>:<span style="color: #0000ff;"> 6px</span>;<span style="color: #ff0000;">            
        border-radius</span>:<span style="color: #0000ff;"> 6px</span>;<span style="color: #ff0000;">
        -webkit-box-shadow</span>:<span style="color: #0000ff;"> 0px 0px 2px #69635a</span>;<span style="color: #ff0000;">
        -moz-box-shadow</span>:<span style="color: #0000ff;"> 0px 0px 2px #69635a</span>;<span style="color: #ff0000;">
        box-shadow</span>:<span style="color: #0000ff;"> 0px 0px 2px #69635a</span>;<span style="color: #ff0000;">
        background-image</span>:<span style="color: #0000ff;"> -webkit-gradient(linear, left top, left bottom, from(#887963), to(#0b0a09))</span>;<span style="color: #ff0000;">
        background-image</span>:<span style="color: #0000ff;"> -webkit-linear-gradient(-90deg, #887963, #0b0a09)</span>;<span style="color: #ff0000;">
        background-image</span>:<span style="color: #0000ff;"> -moz-linear-gradient(-90deg, #887963, #0b0a09)</span>;<span style="color: #ff0000;">
        background-image</span>:<span style="color: #0000ff;"> -o-linear-gradient(-90deg, #887963, #0b0a09)</span>;<span style="color: #ff0000;">
        background-image</span>:<span style="color: #0000ff;"> -ms-linear-gradient(-90deg, #887963, #0b0a09)</span>;<span style="color: #ff0000;">        
        background-image</span>:<span style="color: #0000ff;"> linear-gradient(-90deg, #887963, #0b0a09)</span>;<span style="color: #ff0000;">
        filter</span>:<span style="color: #0000ff;"> progid:DXImageTransform.Microsoft.gradient( startColorstr='#776a57', endColorstr='#12100e',GradientType=0 )</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> IE6-9 </span><span style="color: #008000;">*/</span>
        }

<span style="color: #008000;">/*</span><span style="color: #008000;"> ///////////////////////////////////////// 
    =Global Classes
///////////////////////////////////////// </span><span style="color: #008000;">*/</span><span style="color: #800000;">

.clearfix:after </span>{<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> ""</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    clear</span>:<span style="color: #0000ff;"> both</span>;
    }<span style="color: #800000;">
    .ie6 .clearfix </span>{<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 1px</span>; } <span style="color: #008000;">/*</span><span style="color: #008000;"> IE6 </span><span style="color: #008000;">*/</span><span style="color: #800000;"> 
    .ie7 .clearfix </span>{<span style="color: #ff0000;"> min-height</span>:<span style="color: #0000ff;"> 1px</span>; } <span style="color: #008000;">/*</span><span style="color: #008000;"> IE7 </span><span style="color: #008000;">*/</span>
로그인 후 복사

(3) 라바램프 네비게이션 플러그인 사용하기 

<span style="color: #008000;">/*</span><span style="color: #008000;"> jquery.lavalamp.js - 熔岩灯导航插件

    选项设置
    
        gap     : 在lava上下添加的空间
        bgColor    : lava的背景颜色
        speed    : 导航速度设定 1000 = 1秒,
        easing     : Easing设定(请参考 http://gsgd.co.uk/sandbox/jquery/easing/),
        reset     : 设定当鼠标滑出时返回原来位置的速度 1000 = 1秒
        
        easeOutQuad   | easeOutQuad    | easeInOutQuad
        easeInCubic   | easeOutCubic   | easeInOutCubic
        easeInQuart   | easeOutQuart   | easeInOutQuart
        easeInQuint   | easeOutQuint   | easeInOutQuint
        easeInSine    | easeOutSine    | easeInOutSine
        easeInExpo    | easeOutExpo    | easeInOutExpo 
        easeInCirc    | easeOutCirc    | easeInOutCirc 
        easeInElastic | easeOutElastic | easeInOutElastic
        easeInBack    | easeOutBack    | easeInOutBack
        easeInBounce  | easeOutBounce  | easeInOutBounce 

---------------------------------------------------------------- </span><span style="color: #008000;">*/</span><span style="color: #000000;">

;(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">($) {
    $.fn.lavalamp </span>= <span style="color: #0000ff;">function</span><span style="color: #000000;">(options) {
        options </span>=<span style="color: #000000;"> $.extend({
            gap: </span>20<span style="color: #000000;">,
            bgColor: </span>'#eee'<span style="color: #000000;">,
            speed: </span>400<span style="color: #000000;">,
            easing: </span>'easeInOutElastic'<span style="color: #000000;">,    
            reset: </span>2000<span style="color: #000000;">
        }, options);
        
        </span><span style="color: #0000ff;">return</span> <span style="color: #0000ff;">this</span>.each(<span style="color: #0000ff;">function</span><span style="color: #000000;">() {
        
            </span><span style="color: #008000;">//</span><span style="color: #008000;"> 对象引用</span>
            <span style="color: #0000ff;">var</span> $nav = $(<span style="color: #0000ff;">this</span><span style="color: #000000;">),
                $current_item </span>= $(<span style="color: #0000ff;">this</span>).find('.focus'<span style="color: #000000;">),
                $lava </span>= $('<li class="lava"/>'<span style="color: #000000;">),
                reset;
        
            </span><span style="color: #008000;">//</span><span style="color: #008000;"> 设定$lava的基准元素$(this)及调整<a> z-index的值</span>
            $nav.css('position', 'relative'<span style="color: #000000;">)
                .find(</span>'a'<span style="color: #000000;">).css({
                    position: </span>'relative'<span style="color: #000000;">,
                    zIndex: </span>1<span style="color: #000000;">
                });
                
            </span><span style="color: #008000;">//</span><span style="color: #008000;"> $lava操作及样式</span>
<span style="color: #000000;">            $lava.css({
                position: </span>'absolute'<span style="color: #000000;">,
                top: $current_item.position().top </span>- options.gap/2,
<span style="color: #000000;">                left: $current_item.position().left,
                width: $current_item.outerWidth(),
                height: $current_item.outerHeight() </span>+<span style="color: #000000;"> options.gap,
                backgroundColor: options.bgColor        
            }).appendTo($nav.find(</span>'ul'<span style="color: #000000;">));
        
            </span><span style="color: #008000;">//</span><span style="color: #008000;"> 当$nav的li发生鼠标移上/获得焦点事件时调用处理函数</span>
            $nav.find('li'<span style="color: #000000;">)
            .bind(</span>'mouseover focusin', <span style="color: #0000ff;">function</span><span style="color: #000000;">() {
                </span><span style="color: #008000;">//</span><span style="color: #008000;"> 发生MouseOver或FocusIn事件时执行的代码</span>
<span style="color: #000000;">                clearTimeout(reset);
                $lava.animate({ 
                    left: $(</span><span style="color: #0000ff;">this</span><span style="color: #000000;">).position().left,
                    width: $(</span><span style="color: #0000ff;">this</span><span style="color: #000000;">).outerWidth()
                }, {
                    duration: options.speed,
                    easing: options.easing,
                    queue: </span><span style="color: #0000ff;">false</span><span style="color: #000000;">
                });
            })
            .bind(</span>'mouseout focusout', <span style="color: #0000ff;">function</span><span style="color: #000000;">() {
                </span><span style="color: #008000;">//</span><span style="color: #008000;"> 发生MouseOut或FocusOut事件时执行的代码</span>
                reset = setTimeout(<span style="color: #0000ff;">function</span><span style="color: #000000;">() {
                    $lava.animate({
                        left: $current_item.position().left,
                        width: $current_item.outerWidth()                    
                    }, options.speed);
                }, options.reset);
            })
            </span><span style="color: #008000;">//</span><span style="color: #008000;"> 单击<li>时添加.focus</span>
            .click(<span style="color: #0000ff;">function</span><span style="color: #000000;">() {
                $(</span><span style="color: #0000ff;">this</span><span style="color: #000000;">)
                    .siblings().removeClass(</span>'focus'<span style="color: #000000;">)
                .end().addClass(</span>'focus'<span style="color: #000000;">);
                $current_item </span>= $(<span style="color: #0000ff;">this</span><span style="color: #000000;">);
            });
        });
    };
})(jQuery);</span>
로그인 후 복사
<span style="color: #008000;">/*</span><span style="color: #008000;"> jquery.lavalamp.js - 熔岩灯导航插件
----------------------------------------------------------------- </span><span style="color: #008000;">*/</span><span style="color: #000000;">
(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">($) {
    $(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">() {
            
        </span><span style="color: #008000;">//</span><span style="color: #008000;"> 运行熔岩灯插件    </span>
        $('#navigation'<span style="color: #000000;">).lavalamp({
            gap: </span>20<span style="color: #000000;">,
            speed: </span>600<span style="color: #000000;">,
            easing: </span>'easeInOutElastic'<span style="color: #000000;">,
            reset: </span>1500<span style="color: #000000;">
        });
        
        </span><span style="color: #008000;">//</span><span style="color: #008000;"> 单击<a>时阻止链接到href地址</span>
        $('#navigation').find('a').click(<span style="color: #0000ff;">function</span><span style="color: #000000;">(e) {
            e.preventDefault();                        
        });
        
        </span><span style="color: #008000;">/*</span><span style="color: #008000;"> ///////////////////////////////////////////////////
          为了IE 6-9浏览器，应用PIE库
        border-radius | box-shadow | linear-gradient
        /////////////////////////////////////////////////// </span><span style="color: #008000;">*/</span>            
        <span style="color: #0000ff;">if</span>($.browser.msie && $.browser.version < 9<span style="color: #000000;">) {
            $.getScript(</span>'js/PIE.js', <span style="color: #0000ff;">function</span><span style="color: #000000;">() {
                $(</span>'li.lava', '#nav').each(<span style="color: #0000ff;">function</span><span style="color: #000000;">() {
                    PIE.attach(</span><span style="color: #0000ff;">this</span><span style="color: #000000;">);
                });    
            });
        };
            
    });    
})(jQuery);</span>
로그인 후 복사

최종 발표:

코드 파일: http://pan.baidu.com/s/1kUVC8Kn

관련 라벨：
HTML5设计网页熔岩灯导航（navigation bar）插件 已经加上完整源代码
원천：php.cn
이전 기사：애니메이션.css 다음 기사：CSS 공통 스타일(4) 애니메이션
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
2
1899
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
10
2067
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1739
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1642
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1653
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿