效果图：

main.html 代码：

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <title>MyHomepage</title>
  5.  <meta charset="utf-8" />
  6.  <link type="text/css" rel="stylesheet" href="css/reset.css" />
  7.  <link type="text/css" rel="stylesheet" href="css/layout.css" />
  8.  <link type="text/css" rel="stylesheet" href="css/style.css" />
  9.  <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
  10.  <script type="text/javascript">
  11.  $(document).ready(function(){
  12.        $('ul li a').click(function() {
  13.            var className = $(this).attr('class');
  14.            $('article div.'+className).show().siblings().hide();
  15.        });
  16.  });
  17.  </script>
  18.  </head>
  19.  <body>
  20.      <div class="outer">
  21.          <header>
  22.              <div>Get busy living or get busy dying </div>
  23.          </header>
  24.          <nav>
  25.              <ul>
  26.                  <li>
  27.                      <a href="#" class="homepage">首&nbsp;页</a>
  28.                  </li>
  29.                  <li>
  30.                      <a href="#">明&nbsp;星</a>
  31.                      <ul>
  32.                          <li><a href="#" class="bruceli">李小龙</a></li>
  33.                          <li><a href="#" class="jackcheng">成龙</a></li>
  34.                      </ul>
  35.                  </li>
  36.                  <li>
  37.                      <a href="#">风景名胜</a>
  38.                      <ul>
  39.                          <li><a href="#" class="tiananmen">天安门</a></li>
  40.                          <li><a href="#" class="dongfangmingzhu">东方明珠</a></li>
  41.                          <li><a href="#" class="yulongxueshan">玉龙雪山</a></li>
  42.                      </ul>
  43.                  </li>
  44.                  <li>
  45.                      <a href="#">风景名胜</a>
  46.                      <ul>
  47.  
  48.                      </ul>
  49.                  </li>
  50.                  <li>
  51.                      <a href="#">风景名胜</a>
  52.                      <ul>
  53.  
  54.                      </ul>
  55.                  </li>
  56.                  <li>
  57.                      <a href="#">风景名胜</a>
  58.                      <ul>
  59.  
  60.                      </ul>
  61.                  </li>
  62.                  <li>
  63.                      <a href="#">风景名胜</a>
  64.                      <ul>
  65.  
  66.                      </ul>
  67.                  </li>
  68.                  <li>
  69.                      <a href="#">风景名胜</a>
  70.                      <ul>
  71.  
  72.                      </ul>
  73.                  </li>
  74.  
  75.              </ul>
  76.          </nav>
  77.          <aside>
  78.              <div>
  79.                  <h2>小导航</h2>
  80.                  <ul>
  81.                      <li><a href="#" class="guilin">桂林山水甲天下</a></li>
  82.                      <li><a href="#" class="guilin">桂林山水甲天下</a></li>
  83.                      <li><a href="#" class="guilin">桂林山水甲天下</a></li>
  84.                      <li><a href="#" class="guilin">桂林山水甲天下</a></li>
  85.                      <li><a href="#" class="guilin">桂林山水甲天下</a></li>
  86.                  </ul>
  87.              </div>
  88.  
  89.          </aside>
  90.          <article >
  91.              <div class="homepage">
  92.                  首页
  93.  
  94.              </div>
  95.              <div class="bruceli">
  96.                  李小龙
  97.  
  98.              </div>
  99.              <div class="jackcheng">
  100.                  成龙
  101.  
  102.              </div>
  103.              <div class="tiananmen">
  104.                  天安门
  105.  
  106.              </div>
  107.              <div class="dongfangmingzhu">
  108.                  东方明珠
  109.  
  110.              </div>
  111.              <div class="yulongxueshan">
  112.                  玉龙雪山
  113.  
  114.              </div>
  115.              <div class="guilin">
  116.                  桂林米粉
  117.  
  118.              </div>
  119.          </article >
  120.          <footer>
  121.              I'm footer
  122.  
  123.          </footer>
  124.  
  125.      </div>
  126.  </body>
  127.  
  128.  </html>

layout.css 代码：

  1. /* layout.css */
  2. .outer {
  3.     margin: 0 auto;
  4.     width: 80%;
  5.     height: 100%;
  6.     min-width: 1000px;
  7.     /*background: gray;*/
  8.     /*min-height: 600px;*/
  9. }
  10. header {
  11.     width: 100%;
  12.     height: 80px;
  13.     background-color: #663366;
  14.     border-radius: 10px;
  15. }
  16. header div {
  17.     line-height: 80px;
  18.     text-align: center;
  19.     vertical-align: middle;
  20.     font-size: 30px;
  21.     font-weight: bold;
  22. }
  23. nav {
  24.     margin-top: 5px;
  25.     width: 100%;
  26.     height: 50px;
  27.     background-color: #666600;
  28.     border-radius: 10px;
  29.     font-size: 20px;
  30. }
  31. aside {
  32.     float: left;
  33.     margin-top: 5px;
  34.     width: 19%;
  35.     height: 400px;
  36.     background-color: #669900;
  37. }
  38. aside div {
  39.     margin-top: 20px;
  40.     margin-left: 40px;
  41. }
  42. aside div ul {
  43.     margin-top: 10px;
  44.     font-size: 16px;
  45. }
  46. aside div ul li {
  47.     line-height: 30px;
  48. }
  49. aside div ul li a {
  50.     text-decoration: underline;
  51. }
  52. article {
  53.     float: left;
  54.     margin-top: 5px;
  55.     margin-left: 5px;
  56.     width: 80%;
  57.     height: 800px;
  58. }
  59. article div {
  60.     width: 100%;
  61.     height: 800px;
  62.     background-color: #6699CC;
  63.     display: none;
  64.     font-size: 300px;
  65. }
  66. article div{
  67.     display: none;
  68. }
  69. article div.homepage{
  70.     display: block;
  71. }
  72. footer {
  73.     margin-top: 810px;
  74.     width: 100%;
  75.     height: 40px;
  76.     background-color:#9933FF;
  77. }
  78. ul li{
  79.     list-style: none;
  80. }
  81. nav ul li {
  82.     float: left;
  83.     width: 120px;
  84.     padding: 12px 0px;
  85.     text-align: center;
  86.     display: inline-block;
  87.     opacity: 0.9;
  88.     background: #663399;
  89.     border-radius: 10px;
  90. }
  91. nav ul li ul {
  92.     width: 120px;
  93.     margin-top: 12px;
  94.     display: none;
  95.     font-size: 16px;
  96. }
  97. nav ul li ul li{
  98.     width: 100px;
  99.     height: 20px;
  100.     margin-left: 10px;
  101.     border-radius: 10px;
  102.     background-color: #993399;
  103. }
  104. nav ul li:hover ul {
  105.     display: block;
  106.     position: absolute;
  107.     text-decoration: underline;
  108. }
  109. nav ul li:hover a {
  110.     color: #CC99FF;
  111. }
  112. nav ul li ul li a:hover {
  113.     text-decoration: underline;
  114. }

style.css 代码

  1. /* style.css */
  2. body {
  3.     background: url("../image/black-Linen.jpg");
  4.     font-size: 14px;
  5.     font-family: "微软雅黑";
  6.     font-weight: normal;
  7. }

reset.css 代码

  1. /* reset.css */
  2. *,body,div,h1,h2,h3,h4,h5,h6,nav,ul,li,img {
  3.     margin:0;
  4.     padding:0;
  5. }
  6. a {
  7.     text-decoration:none;
  8. }
  9. a:visited {
  10.     color:white;
  11. }

以上。

纯CSS实现nav导航栏+jQuery实现article区DIV切换的更多相关文章

  1. 淘宝分类导航条；纯css实现固定导航栏

    效果例如以下: 页面例如以下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  2. 【源码分享】jquery+css实现侧边导航栏

    jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...

  3. 如何使用纯CSS制作特效导航条？

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  4. 纯CSS实现二级导航下拉菜单--css的简单应用

    思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...

  5. 纯CSS实现侧边栏/分栏高度自动相等

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=694 一.为何要分栏高 ...

  6. 纯css实现京东导航菜单

    纯CSS代码实现导航菜单,推荐在chrome预览! 预览请点击这里:mygithub <!doctype html> <html lang="en"> &l ...

  7. 【CSS Demo】纯 CSS 打造 Flow-Steps 导航

    low-Steps 导航效果常用于需要表示执行步骤的交互页面,效果如下: 步骤一 步骤二 步骤三   通常使用图片来实现 Flow-Steps 效果,但此方法的灵活性不足,当内容变化较大时就可能需要重 ...

  8. 纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能,非常简单实用,

    HTML代码如下 <!-- 头部导航栏开始--><div id="nav"><dl class="sy"><dt> ...

  9. html+css 制作简易导航栏

    二话不说直接上代码(萌新:实在也没什么好说的) <!DOCTYPE html> <html lang="en" xmlns="http://www.w3 ...

随机推荐

  1. Power-BI 关于2016年7月份深圳一手房房价分析报表 腾讯课堂开课啦

         上周我们的公开课讲了全国房地产投资开发的情况,通过对时间.区域等多维度的分析,透析了全国房地产开发的投资情况.这周呢,我们就全国一线城市的房价,选取了深圳作为分析对象,对深圳一手房房价进行一 ...

  2. C# MySqlHelper

    1.MySql官方提供ADO.NET访问模式的MySql.Data.dll,下载地址:http://dev.mysql.com/downloads/connector/net/ 2.MySqlHelp ...

  3. WPF--Blend制作Button控件模板

    博客园新人,WPF初学者.不涉及理论知识,直接进入操作. 记录一下使用Blend制作Button控件模板过程中,学到Blend几个知识点: 1.渐变画笔编辑器的Alpha选项可以调控件的透明度.即下图 ...

  4. python_字符串

    1. 字符串的格式化 格式: 说明: (1)转换说明符 (2)格式化操作符右操作数可以是任何东西,如果是元组的话,每一个元素都会被单独格式化. 2. 字符串常用的方法 (1)find int = fi ...

  5. APN 推送

    推送的各种状态 http://samwize.com/2015/08/07/how-to-handle-remote-notification-with-background-mode-enabled ...

  6. Private strand flush not complete

    当切换日志的时候,所有private strands的内容都会被flush到当前的日志中,然后日志切换才可以完成. strand是在oracle 10g中引入的新术语,和redo的latches相关. ...

  7. asp.net treeview 异步加载

    在使用TreeView控件的时候,如果数据量太大,这个TreeView控件加载会很慢,有时甚至加载失败, 为了更好的使用TreeView控件加载大量的数据,采用异步延迟加载TreeView. 在Tre ...

  8. DTMF Stresstesting

    import threading,time,serial,sys from random import randrange   port_snd=14 port_recv=2 recnt=0 ser_ ...

  9. 《30天自制操作系统》03_day_学习笔记

    harib00a: 添加的部分从P46开始,制作IPL准备开始从磁盘装载程序了 笔者讲解了软盘的驱动的构造,以及汇编语言读取软盘的方法 MOV AX,0x0820 MOV ES,AX ; 柱面0 ; ...

  10. JS语法部分-数组

    数组的长度是动态变化的,里面可以防止任意类型的元素 var a=new Array() 数组元素的复制:a[0]=123        a[2]=456 数组的取值:a[i] 数组的属性:  a.le ...