一段css效果的导航栏

效果如下,当用户在导航栏上移动时,会有动画效果.

一般选中模式(当前为15页)

 

mouse移动时的效果

 

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

< html xmlns="http://www.w3.org/1999/xhtml">

< head >

    <title>Untitled Page</title>

< style >

#channel-page

{

}

#channel-page form

{

     margin: 0;

     padding: 0;

}

#channel-page input#page

{

     width: 25px;

     line-height: 15px;

     font-size: 12px;

     margin: 0;

     padding: 0;

     border-right-width: 1px;

     border-right-style: solid;

     border-right-color: #DBDBDB;

     border-top-width: 1px;

     border-bottom-width: 1px;

     border-left-width: 1px;

     border-top-style: solid;

     border-bottom-style: solid;

     border-left-style: solid;

     border-top-color: #FFF;

     border-bottom-color: #FFF;

     border-left-color: #FFF;

     text-align: center;

     font-weight: 700;

     color: #666;

}

#channel-page input#go

{

     width: 25px;

     margin: 0;

     line-height: 11px;

     background-color: #FFF;

     font-size: 11px;

     border: 1px solid #FFF;

     padding-top: 3px;

     padding-right: 0;

     padding-bottom: 0;

     padding-left: 0;

     font-weight: 700;

     color: #666;

}

#channel-page ul#channel-page-show

{

     clear: both;

     display: inline;

     float: left;

     margin: 20px;

     list-style-type: none;

}

#channel-page ul#channel-page-show li

{

     display: inline;

     float: left;

     height: 20px;

     width: 23px;

     padding-top: 0;

     padding-right: 2px;

     padding-bottom: 0;

     padding-left: 2px;

     margin-top: 2px;

     margin-right: 0;

     margin-bottom: 2px;

     margin-left: 0;

}

#channel-page ul#channel-page-show li a

{

     border-right: #999 1px solid;

     border-top: #999 1px solid;

     display: block;

     font-weight: 700;

     font-size: 12px;

     border-left: #999 1px solid;

     width: 20px;

     color: #666;

     line-height: 20px;

     border-bottom: #999 1px solid;

     height: 20px;

     background-color: #fff;

     text-align: center;

     text-decoration: none;

     padding-right: 2px;

     padding-left: 2px;

}

#channel-page ul#channel-page-show li a:hover

{

     font-size: 20px;

     z-index: 100;

     width: 40px;

     line-height: 40px;

     position: absolute;

     height: 40px;

     margin-top: -10px;

     margin-right: 0;

     margin-bottom: 0;

     margin-left: -10px;

}

#channel-page ul#channel-page-show li a.page-select

{

    

     color: red;

    

}

#channel-page ul#channel-page-show li#channel-page-count

{

     border-right: #999 1px solid;

     border-top: #999 1px solid;

     display: block;

     font-weight: 700;

     font-size: 12px;

     border-left: #999 1px solid;

     width: 50px;

     color: #666;

     line-height: 20px;

     border-bottom: #999 1px solid;

     height: 20px;

     background-color: #fff;

     text-align: center;

     text-decoration: none;

     padding-top: 0;

     padding-right: 2px;

     padding-bottom: 0;

     padding-left: 2px;

     margin-right: 1px;

     margin-left: 1px;

}

#channel-page ul#channel-page-show li#channel-page-form

{

     border-right: #999 1px solid;

     border-top: #999 1px solid;

     display: block;

     font-weight: 700;

     font-size: 12px;

     border-left: #999 1px solid;

     width: 52px;

     color: #666;

     line-height: 20px;

     border-bottom: #999 1px solid;

     height: 20px;

     background-color: #fff;

     text-align: center;

     text-decoration: none;

     padding: 0;

     margin-right: 1px;

     margin-left: 1px;

   white-space:nowrap;

 

}

 

 

</ style >

</ head >

< body >

    <div id="channel-page">

        <ul id="channel-page-show">

            <li id="channel-page-count">1/100</li>

            <li><a href="/News/1.html"><<</a></li>

            <li><a href="/News/10.html"><</a></li>

            <li><a href="/News/11.html">11</a></li>

            <li><a href="/News/12.html">12</a></li>

            <li><a href="/News/13.html">13</a></li>

            <li><a href="/News/14.html">14</a></li>

            <li><a href="/News/15.html" class="page-select">15</a></li>

            <li><a href="/News/16.html">16</a></li>

            <li><a href="/News/17.html">17</a></li>

            <li><a href="/News/18.html">18</a></li>

            <li><a href="/News/19.html">19</a></li>

            <li><a href="/News/20.html">></a></li>

            <li><a href="/News/100.html">>></a></li>

            <li id="channel-page-form">

                    <input name="page" type="text" id="page" maxlength="5"><input type="button"

                        id="navButton" value="GO" onclick="var intstr=/^/d+$/;if(intstr.test(page.value)&&page.value<=100&&pagejump.page.value>=1){location.href='/News/' + page.value + '.html';}">

            </li>

        </ul>

    </div>

</ body >

</ html >