普通导航栏制作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>导航栏</title>

<style>

*{

margin:0px;

padding:0px;

}

.nav ul{

width:980px;/*设置元素宽度为980px*/

border:1px solid #000;/*设置一个颜色为#000，宽度为1px的边框*/

margin:0px auto;

}

.nav ul li{

float:left;/*让li元素左浮动*/

list-style:none;/*取消ul无序列表前的点*/

border:1px solid #000;

}

.nav ul li a{

width:80px;/*设置元素宽为80px*/

height:28px;/*设置高度为28px*/

line-height:28px;/*设置行距为28px，让文字在每行的中间位置*/

background:red;/*设置元素的背景为红色*/

color:#FFF;/*文字颜色是白色*/

margin:5px 10px;

font-size:12px;/*用12号字*/

display:block;/*这个比较关键，因为a本身就是联级元素，本身不具有宽高，用这个把它变成块级元素，这样前面设置的宽和高就能起作用了*/

text-align:center;/*让文本居中*/

text-decoration:none; /*去掉下划线*/

}

.nav ul li a:hover{ /*这个大概的意思就是当鼠标放到这个a元素的上面时，这个a元素的样式就按下面的代码执行*/

width:78px;

height:26px;

line-height:28px;

border:1px solid red;

color:red;

background:#FFF;

}

</style>

</head>

<body>

<div class="nav">

 <ul>

   <li><a href="">首页</a></li>

   <li><a href="">导航1</a></li>

   <li><a href="">导航2</a></li>

   <li><a href="">导航3</a></li>

   <li><a href="">导航4</a></li>

   <li><a href="">导航5</a></li>

   <li><a href="">导航6</a></li>

 </ul>

</div>

</body>

</html>

隐藏显示导航栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script>

function xianshi()

{

}

</script>

<style type="text/css">

*

{

	margin:0px;

	padding:0px;

}

.div1{

	text-align:center;

background-color:#0FC;

font-size:28px;

height:30px;

width:120px;

top:40px;

left:50px;

position:relative;

overflow:hidden;

}

.div11{

	text-align:center;

background-color:#C00;

font-size:28px;

height:30px;

width:120px;

top:40px;

left:50px;

position:relative;

overflow:visible;

}

.div2

{

	text-align:center;

background-color:#F3F;

font-size:24px;

height:90px;

width:120px;

top:30px;

left:0px;

position:absolute;

}

.div3

{

	text-align:center;

	height:30px;

	width:120px;

	background-color:#F3F;

}

.div33

{

	text-align:center;

	height:30px;

	width:120px;

	background-color:#930;

}

</style>

</head>

<body>

<div id="div1" class="div1" onmouseover="zhixing()" onmouseout="this.className='div1'"><a href="">菜单</a>

<div class="div2">

<div class="div3" onmouseover="this.className='div33'" onmouseout="this.className='div3'">首页</div>

<div class="div3" onmouseover="this.className='div33'" onmouseout="this.className='div3'">关于我们</div>

<div class="div3" onmouseover="this.className='div33'" onmouseout="this.className='div3'">联系我们</div>

</div>

</div>

</body>

</html>

<script>

function zhixing()

{

var a = document.getElementById("div1");

a.setAttribute("class","div11");

}

</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. codeforces724-A. Checking the Calendar 日期题

    首先有这样一个显然的事实,那就是每个月的第一天可以是星期x,x可以取遍1~7 因为日期一直在往后退,总有一年能轮到分割线那天,因为本来其实压根就没有月份的划分,月份划分是人为的 而且我们也不知道开始的 ...

  2. Mock方法介绍

    1 现有的单元测试框架单元测试是保证程序正确性的一种有效的测试手段,对于不同的开发语言,通常都能找到相应的单元框架. 借助于这些单测框架的帮助,能够使得我们编写单元测试用例的过程变得便捷而优雅.框架帮 ...

  3. Practical JAVA（三）关于final

    Practice 2,3 final 作用于by value变量时,一旦赋值不可更改 作用于by reference变量时,一旦不能指向第二个对象,但是可以改变对象的内容.比如不可以第二次=new x ...

  4. 网页打印A4纸-----表格在跨页时自动换页打印的实现 (转)

    在最近所做的一个项目中,需要通过网页来打印不少的表单,但是又不想每个打印页签各占用一个页面,这样就需要生存很多不同的冗余页面,为了减少冗余,所有的表单通过jquery的页签tab来实现的. 一 :基本 ...

  5. Problem list

    不定时更新,发现好题目但是没时间写的就添加,写完就删除. hdu5732 求树的重心 poj1741

  6. POJ 3415 后缀数组

    题目链接:http://poj.org/problem?id=3415 题意:给定2个串[A串和B串],求两个串公共子串长度大于等于k的个数. 思路:首先是两个字符串的问题.所以想用一个'#'把两个字 ...

  7. MySql 的数据储存引擎

    1.存储引擎是什么? Mysql中的数据用各种不同的技术存储在文件(或者内存)中.这些技术中的每一种技术都使用不同的存储机制.索引技巧.锁定水平并且最终提供广泛的不同的功能和能力.通过选择不同的技术, ...

  8. iOS 安装Cocoapods以及安装第三方库的操作流程

    安装cocoapods的流程: 1.打开终端,输入:  sudo gem update —system 2.输入密码,稍等 3.gem sources --remove https://rubygem ...

  9. BZOJ4383 : [POI2015]Pustynia

    设$a$到$b$的边权为$c$的有向边的含义为$b\geq a+c$,则可以根据题意构造出一张有向图. 设$f[x]$为$x$点可行的最小值,$a[x]$为$x$位置已知的值,则$f[x]=\max( ...

  10. Tomcat目录结构及Tomcat Server处理一个http请求的过程

    http://blog.sina.com.cn/s/blog_62cb15980101jh9x.html 1.Tomcat的结构概述     Tomcat服务器是由一系列可配置的组件构成,其核心组件是 ...