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

HTML5与CSS3实战(二)绚丽的快速导航

时间:2013-05-05 00:13 点击:3471次 字体:[ ]




绚丽的快速导航

我们来看看他这个快速导航干了些什么?

HTML5与CSS3实战(二)绚丽的快速导航_www.fengfly.com

HTML5与CSS3实战(二)绚丽的快速导航_www.fengfly.com

我们看到他这个效做的十分绚丽的:

点击快速导航后,整个图标跑到了中心位置,然后里面的菜单再从几个方向蹦出来,点击关闭后又还原了,真是令人动容的用户感受啊!

那我们来看看该如何实现呢? 用jquery我想应该是可以实现的,但是我这里想试试CSS3可否完成我的要求,于是我们一起动手吧。

做的过程中我就不完全照着他的方法来了吧,加一点点自己的小创意:那个关闭按钮我们用CSS3来做!

基本结构如下:

  1. <!DOCTYPE html> 
  2.  <html xmlns="http://www.w3.org/1999/xhtml"> 
  3.  <head> 
  4.      <title></title> 
  5.      <style type="text/css"> 
  6.          body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, dl, dt, dd, input   
  7. { border: 0 none; margin: 0; padding: 0; }  
  8.          body { background: url("images/bodyBg.jpg") no-repeat scroll center top #000000;  
  9.  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.          #fast_nav  { width: 606px; height: 376px; background: url("images/fast_nav_open.png") no-repeat; position: relative;   
  16. top: 50px; left: 100px; }  
  17.          #fast_nav_close { width: 24px; height: 24px; border-radius: 14px; border: 1px solid white; position: absolute;   
  18. right: -8px; top: -8px;  }  
  19.          #fast_nav_close div { background: white; border-radius: 4px; text-indent: -999px; width: 0; height: 0;   
  20. border: 1px solid white; transform: rotate(45deg); cursor: pointer; }  
  21.          #fast_nav_close .nav_x {  width: 13px; height: 1px;  margin: 11px auto;  }  
  22.          #fast_nav_close .nav_y {  height: 13px;  width: 1px; margin: -20px auto;  }  
  23.          #fast_nav_bt { background: url("images/fast_nav.png") no-repeat; width: 72px; height: 72px; text-indent: -999px;   
  24. position: absolute; left: 267px; top: 152px;}  
  25.      </style> 
  26.      <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 
  27.      <script type="text/javascript"> 
  28.          $(document).ready(function () {  
  29.    
  30.          });  
  31.    
  32.      </script> 
  33.  </head> 
  34.  <body> 
  35.      <div id="fast_nav"> 
  36.          <div id="fast_nav_bt">fast_nav  
  37.          </div> 
  38.          <div id="fast_nav_close"> 
  39.              <div class="nav_x">x  
  40.              </div> 
  41.              <div class="nav_y">y  
  42.              </div> 
  43.          </div> 
  44.          <div id="fast_nav01"> 
  45.          </div> 
  46.          <div id="fast_nav02"> 
  47.          </div> 
  48.          <div id="fast_nav03"> 
  49.          </div> 
  50.          <div id="fast_nav04"> 
  51.          </div> 
  52.      </div> 
  53.  </body> 
  54.  </html> 



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