您的位置：首页 > 其它

导航中的中英文切换

2017-02-02 15:15 211 查看
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>中英切换导航条</title>

<style type="text/css">

*{padding:0; margin:0;}

li{ list-style:none; }

a{ text-decoration:none;}

.nav{ width:100%; height:40px;background:#222; margin-top:100px; overflow:hidden;}

.list{ width:1000px; height:40px; margin:0auto;}

.list li{ float:left;}

.list li a{ display:block;}

 

.list b,.list i{ display:block; padding:030px; color:#aaa; line-height:40px; text-align:center;}

.list b{ font-weight:100}

.list i{ font-style:normal;background:#333; color:#fff;}

</style>

<script type="text/javascript"src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

<scripttype="text/javascript">

   $(function(){

   $(".list a").hover(function(){

       $(this).stop().animate({"margin-top":-40},300)

   },function(){

       $(this).stop().animate({"margin-top":0},300)

   }) 

})

</script>

</head>

 

<body>

 

<div class="nav">

         <ulclass="list">

             <li>

                <ahref="#">

                    <b>Index</b>

                <i>首页</i>

           </a>

       </li>

       

       

       <li>

                <ahref="#">

                    <b>course</b>

                <i>职业课程</i>

           </a>

       </li>

       

       

       <li>

                <ahref="#">

                    <b>study</b>

                <i>就业学习</i>

           </a>

       </li>

       

       

       <li>

                <ahref="#">

                    <b>BBS</b>

                <i>极客社区</i>

           </a>

       </li>

       

       

       <li>

                <ahref="#">

                    <b>JiKe+</b>

                <i>极客+</i>

           </a>

       </li>

   </ul>

</div>

 

 

</body>

</html>

需要web前端课程工具和电子书，可以加群120342833

 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航