普通导航栏制作

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>导航栏</title>
  6. <style>
  7. *{
  8. margin:0px;
  9. padding:0px;
  10. }
  11. .nav ul{
  12. width:980px;/*设置元素宽度为980px*/
  13. border:1px solid #000;/*设置一个颜色为#000，宽度为1px的边框*/
  14. margin:0px auto;
  15. }
  16. .nav ul li{
  17. float:left;/*让li元素左浮动*/
  18. list-style:none;/*取消ul无序列表前的点*/
  19. border:1px solid #000;
  20. }
  21. .nav ul li a{
  22. width:80px;/*设置元素宽为80px*/
  23. height:28px;/*设置高度为28px*/
  24. line-height:28px;/*设置行距为28px，让文字在每行的中间位置*/
  25. background:red;/*设置元素的背景为红色*/
  26. color:#FFF;/*文字颜色是白色*/
  27. margin:5px 10px;
  28. font-size:12px;/*用12号字*/
  29. display:block;/*这个比较关键，因为a本身就是联级元素，本身不具有宽高，用这个把它变成块级元素，这样前面设置的宽和高就能起作用了*/
  30. text-align:center;/*让文本居中*/
  31. text-decoration:none; /*去掉下划线*/
  32. }
  33. .nav ul li a:hover{ /*这个大概的意思就是当鼠标放到这个a元素的上面时，这个a元素的样式就按下面的代码执行*/
  34. width:78px;
  35. height:26px;
  36. line-height:28px;
  37. border:1px solid red;
  38. color:red;
  39. background:#FFF;
  40. }
  41. </style>
  42. </head>
  43.  
  44. <body>
  45. <div class="nav">
  46.  <ul>
  47.    <li><a href="">首页</a></li>
  48.    <li><a href="">导航1</a></li>
  49.    <li><a href="">导航2</a></li>
  50.    <li><a href="">导航3</a></li>
  51.    <li><a href="">导航4</a></li>
  52.    <li><a href="">导航5</a></li>
  53.    <li><a href="">导航6</a></li>
  54.  </ul>
  55. </div>
  56. </body>
  57. </html>

隐藏显示导航栏

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <script>
  7. function xianshi()
  8. {
  9. }
  10. </script>
  11. <style type="text/css">
  12. *
  13. {
  14. 	margin:0px;
  15. 	padding:0px;
  16. }
  17. .div1{
  18. 	text-align:center;
  19. background-color:#0FC;
  20. font-size:28px;
  21. height:30px;
  22. width:120px;
  23. top:40px;
  24. left:50px;
  25. position:relative;
  26. overflow:hidden;
  27. }
  28. .div11{
  29. 	text-align:center;
  30. background-color:#C00;
  31. font-size:28px;
  32. height:30px;
  33. width:120px;
  34. top:40px;
  35. left:50px;
  36. position:relative;
  37. overflow:visible;
  38. }
  39. .div2
  40. {
  41. 	text-align:center;
  42. background-color:#F3F;
  43. font-size:24px;
  44. height:90px;
  45. width:120px;
  46. top:30px;
  47. left:0px;
  48. position:absolute;
  49. }
  50. .div3
  51. {
  52. 	text-align:center;
  53. 	height:30px;
  54. 	width:120px;
  55. 	background-color:#F3F;
  56. }
  57. .div33
  58. {
  59. 	text-align:center;
  60. 	height:30px;
  61. 	width:120px;
  62. 	background-color:#930;
  63. }
  64. </style>
  65. </head>
  66.  
  67. <body>
  68. <div id="div1" class="div1" onmouseover="zhixing()" onmouseout="this.className='div1'"><a href="">菜单</a>
  69. <div class="div2">
  70. <div class="div3" onmouseover="this.className='div33'" onmouseout="this.className='div3'">首页</div>
  71. <div class="div3" onmouseover="this.className='div33'" onmouseout="this.className='div3'">关于我们</div>
  72. <div class="div3" onmouseover="this.className='div33'" onmouseout="this.className='div3'">联系我们</div>
  73. </div>
  74. </div>
  75. </body>
  76. </html>
  77. <script>
  78. function zhixing()
  79. {
  80. var a = document.getElementById("div1");
  81. a.setAttribute("class","div11");
  82. }
  83. </script>

HTML静态网页导航制作的更多相关文章

  1. 3月19 HTML静态网页的制作

    HTML :内容(Hyper Text Markup Language,超文本标记语言) <html>---开始标签 <head> 网页上的控制信息 <title> ...

  2. div+css模式编写html静态网页例子_仿照网页制作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. jQuery背景跟随鼠标移动的网页导航

    首页 PSD模板 CSS模板 特效插件 源码下载 酷站欣赏 建站资源 建站教程 心境之旅 在线留言 设为首页 加入收藏 我要投稿 联系站长 Search     首页 PSD模板 CSS模板 特效插件 ...

  4. Flutter实战视频-移动电商-12.首页_GridView类别导航制作

    12.首页_GridView类别导航制作 首页导航区的制作 外面用一个gridview来写.里面单独提出来 新建导航组件 还是在home_page.dart里面写代码 新建一个静态的组件: 快捷键写组 ...

  5. 【项目】小试牛刀-polo360静态网页项目（附psd文件资源）

    笔者尝试下开发简单的静态网页,下面分享过程及源码.这是polo360的下载链接:https://pan.baidu.com/s/1WqGxKMYY_DHfrSJ9lLL-WA 提取码:v2qi  (一 ...

  6. iOS开发中静态库之".framework静态库"的制作及使用篇

    iOS开发中静态库之".framework静态库"的制作及使用篇 .framework静态库支持OC和swift .a静态库如何制作可参照上一篇: iOS开发中静态库之" ...

  7. 第一次在Django上编写静态网页

    新建一个Python Django工程: Win+R进入cmd命令界面,并cd到指定工程目录下,比如我的工程目录是E:\wamp\Apache24\www\ 输入E: 跳转E盘 输入cd wamp\A ...

  8. HTML静态网页 标签、表格

    HTML静态网页: 打开DREAMWEAVER,新建HTML,如下图: body的属性: bgcolor 页面背景色 background  背景壁纸.图片 text  文字颜色 topmargin ...

  9. 通过jekyll建立静态网页

    部署一个网站需要三个步骤:(1) generating the site, (2) deploying it to the public Internet, and (3) assigning it ...

随机推荐

  1. 数据分析(4):Scipy

    科学计算 最小二乘leastsq # -*- coding: utf-8 -*- def func(x,p): # p 参数列表 A,k,theta = p; # 可以一一对应赋值 return A* ...

  2. Input对象的type类型

    Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍. 1,type=text        输入类型是text ...

  3. Apache Tomcat配置

  4. 【POI】使用POI处理xlsx的cell中的超链接 和 插入图片 和 设置打印区域

    使用POI对xlsx中插入超链接和 插入图片 package com.it.poiTest; import java.awt.image.BufferedImage; import java.io.B ...

  5. java.lang.instrument使用

    Java在1.5引入java.lang.instrument,你可以由此实现一个Javaagent,通过此agent来修改类的字节码即改变一个类. 程序启动之时启动代理(pre-main) 通过jav ...

  6. JQuery学习之操作CSS

    样式表: .important{ font-weight:bold; font-size:xx-large; } .blue{ color:blue; } 1.addClass():向被选元素添加一个 ...

  7. DOM--3 DOM核心和DOM2 HTML(3)

    核心Element对象 操作Element对象的属性 为了简化对attributes的处理,Element对象中包含了很多用来操纵Node对象的attributes属性的方法: getAttribut ...

  8. 注册事件处理程序onclick和addEventListener、attachEvent

    一.设置HTML标签属性为事件处理程序(注意和下面的设置javascript对象属性为事件处理程序是不同的) 用于设置文档元素事件处理程序属性也能化成对应的HTML标签的属性.如果这样做,属性值应该是 ...

  9. Android Intent (可通过URL启动 Activity)

    Intent分为两大类: (1)显性的(Explicit) (2)隐性的(Implicit) 对于隐性意图,在某些时候, 应用程序只是想启动具有某种特征的组件, 并不想和某个特定的组件耦合. 使用In ...

  10. git两种合并方法 比较merge和rebase

    18:01 2015/11/18git两种合并方法 比较merge和rebase其实很简单,就是合并后每个commit提交的id记录的顺序而已注意:重要的是如果公司用了grrit,grrit不允许用m ...