zoukankan      html  css  js  c++  java
  • 【荐】纯CSS实现苹果MAC官方网站的菜单导航

    代码简介:

    苹果官方网站的菜单,实际上是看着好看,但看了代码感觉不太实用,因为为了实现这么一个效果代码太繁琐,而且菜单修改起来也极不方便,建议大家以学习的态度阅读源码。

    代码内容:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>【荐】纯CSS实现苹果MAC官方网站的菜单导航_网页代码站(www.webdm.cn)</title>
    <style type="text/css">
    <!--
    html,body { height:100%; background:#fff; }
    body { font:12px "宋体",Arial,sans-serif; color:#333; }
    body,form,menu,dir,fieldset,blockquote,p,pre,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6 { padding:0; margin:0; }
    ul,ol,dl { list-style:none; }
    #nav { 982px; height:38px; margin:15px 0 0 10px; overflow:hidden; background:url(http://www.webdm.cn/images/20091106/globalnavbg.png) no-repeat; }
    #nav li,#nav li a { float:left; display:block; 117px; height:38px; background:#fff; }
    #nav li a { 100%; text-indent:-9999px; background:url(http://www.webdm.cn/images/20091106/globalnavbg.png) no-repeat 0 0; }
    #nav .n01 { 118px; }
    #nav .n01 a:visited { background-position:0 -114px; }
    #nav .n01 a:hover { background-position:0 -38px; }
    #nav .n01 a:active { background-position:0 -76px; }
    #nav .n02 a:link { background-position:-118px 0; }
    #nav .n02 a:visited { background-position:-118px -114px; }
    #nav .n02 a:hover { background-position:-118px -38px; }
    #nav .n02 a:active { background-position:-118px -76px; }
    #nav .n03 a:link { background-position:-235px 0; }
    #nav .n03 a:visited { background-position:-235px -114px; }
    #nav .n03 a:hover { background-position:-235px -38px; }
    #nav .n03 a:active { background-position:-235px -76px; }
    #nav .n04 a:link { background-position:-352px 0; }
    #nav .n04 a:visited { background-position:-352px -114px; }
    #nav .n04 a:hover { background-position:-352px -38px; }
    #nav .n04 a:active { background-position:-352px -76px; }
    #nav .n05 a:link { background-position:-469px 0; }
    #nav .n05 a:visited { background-position:-469px -114px; }
    #nav .n05 a:hover { background-position:-469px -38px; }
    #nav .n05 a:active { background-position:-469px -76px; }
    #nav .n06 a:link { background-position:-586px 0; }
    #nav .n06 a:visited { background-position:-586px -114px; }
    #nav .n06 a:hover { background-position:-586px -38px; }
    #nav .n06 a:active { background-position:-586px -76px; }
    #nav .n07 a:link { background-position:-703px 0; }
    #nav .n07 a:visited { background-position:-703px -114px; }
    #nav .n07 a:hover { background-position:-703px -38px; }
    #nav .n07 a:active { background-position:-703px -76px; }
    -->
    </style>
    </head>
    <body>
    <div id="nav">
    	<ul>
    	<li class="n01"><a href="#index" title="index">index</a></li>
    	<li class="n02"><a href="#Store" title="Store">Store</a></li>
    	<li class="n03"><a href="#Mac" title="Mac">Mac</a></li>
    	<li class="n04"><a href="#iPod+iTunes" title="iPod + iTunes">iPod + iTunes</a></li>
    	<li class="n05"><a href="#iPhone" title="iPhone">iPhone</a></li>
    	<li class="n06"><a href="#Downloads" title="Downloads">Downloads</a></li>
    	<li class="n07"><a href="#Support" title="Support">Support</a></li>
    	</ul>
    </div>
    </body>
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/3d4b4072-760e-4f5e-8152-2bc56edbbc51.html

  • 相关阅读:
    爬虫第二篇:爬虫详解之存储数据
    数据分析第六篇:机器学习分类
    数据分析第五篇:数据库多表连接操作
    数据分析第四篇:数据清洗
    pyspark搭建使用
    YARN 调度器
    InnoDB: Error: page xxx log sequence number xx xxx InnoDB: is in the future! Current system log sequence number xx xxx.
    瞬时连接所属进程
    NTP工作原理
    kudu NTP问题优化
  • 原文地址:https://www.cnblogs.com/webdm/p/2036146.html
Copyright © 2011-2022 走看看