time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > HTML5与CSS3实战(一)美丽的导航和绚丽的图片

HTML5与CSS3实战(一)美丽的导航和绚丽的图片

时间:2013-05-05 00:01 点击:5245次 字体:[ ]




美丽的导航

HTML5与CSS3实战(一)美丽的导航和绚丽的图片_www.fengfly.com

他这个导航还是很有特色的哟,先不看他们的实现,若是我做的话,后面估计会是背景图,然后会有点事件吧,光说不练,我还是试试吧!

  1. 初步效果  
  2.  <!DOCTYPE html> 
  3.    
  4.  <html xmlns="http://www.w3.org/1999/xhtml"> 
  5.  <head> 
  6.      <title></title> 
  7.      <style type="text/css"> 
  8.      body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, dl, dt, dd, input { border: 0 none; margin: 0; padding: 0; }  
  9.      body {  background: url("images/bodyBg.jpg") no-repeat scroll center top #000000; font-family: '新宋体','宋体',Verdana; font-size: 12px; color: #EEEEEE;}  
  10.        
  11.      ul, ol { list-style-type: none; }  
  12.      select, input, img { outline: medium none; vertical-align: middle; }  
  13.      a { text-decoration: none; outline: medium none;}  
  14.        
  15.      .nav { width: 720px; background:url("images/navBg.png") no-repeat; height: 77px; padding-left: 40px; position: relative; z-index: 10; }  
  16.      .nav div { position: absolute; background:url("images/navA_hover.png") no-repeat; width: 116px; height: 78px; text-indent: -999px; top: -2px; z-index: -10; }  
  17.      .nav ul{ }  
  18.      .nav ul li{ display: inline-block; line-height: 60px; height: 77px; width: 106px;  text-align: center; margin: 0 2px;}  
  19.      .nav ul li a {  font-size: 14px;  color: White;   text-shadow: 1px 1px 1px #000000; font-family: Verdana;}  
  20.      .nav ul li a:hover { color: #63B1FF; text-shadow: 1px 1px 1px #000000; }  
  21.      .nav ul li span { background: none repeat scroll 0 0 #FFFFFF; box-shadow: 1px 1px 0 #000000; height: 14px; margin: 24px -8px 0 0; overflow: hidden; vertical-align: top; width: 1px; float: right;}  
  22.        
  23.      </style> 
  24.      <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 
  25.      <script type="text/javascript"> 
  26.          $(document).ready(function () {  
  27.              var div_hover = $('#nav div');  
  28.              $('#nav ul').delegate('li', 'mouseenter', function (e) {  
  29.                  var el = $(this),  
  30.                  offset = el.offset();  
  31.                  div_hover.css('left', offset.left + 'px');  
  32.                  var s = '';  
  33.              });  
  34.          });  
  35.    
  36.      </script> 
  37.  </head> 
  38.  <body> 
  39.      <nav class="nav" id="nav"> 
  40.          <div>hover</div> 
  41.          <ul> 
  42.              <li><a href="javascript:;">首页</a><span></span></li> 
  43.              <li><a href="javascript:;">JS课程</a><span></span></li> 
  44.              <li><a href="javascript:;">HTML5课程</a><span></span></li> 
  45.              <li><a href="javascript:;">视频课程</a><span></span></li> 
  46.              <li><a href="javascript:;">课程案例</a><span></span></li> 
  47.              <li><a href="javascript:;">联系方式</a></li> 
  48.          </ul> 
  49.      </nav> 
  50.  </body> 
  51.  </html> 

HTML5与CSS3实战(一)美丽的导航和绚丽的图片_www.fengfly.com

我的做法与原来的不太一致,就实现上来说我我的就是个试验品,与原版的无法比的,先看看我们这里干了些什么:

基本布局如下:

  1. <nav class="nav" id="nav"> 
  2.     <div>hover</div> 
  3.     <ul> 
  4.         <li><a href="javascript:;">首页</a><span></span></li> 
  5.         <li><a href="javascript:;">JS课程</a><span></span></li> 
  6.         <li><a href="javascript:;">HTML5课程</a><span></span></li> 
  7.         <li><a href="javascript:;">视频课程</a><span></span></li> 
  8.         <li><a href="javascript:;">课程案例</a><span></span></li> 
  9.         <li><a href="javascript:;">联系方式</a></li> 
  10.     </ul> 
  11. </nav> 



本文地址 : http://www.fengfly.com/plus/view-212687-1.html
标签: HTML5 CSS3实战
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: