普通导航栏制作

<!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. loj 1337

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1337 思路:对于搜过的区域进行标记,如果要求的点落在已经搜过的区域,那么直接取出来即可 ...

  2. JMeter正则表达式-学习(3)

    同时关联多个值的方法: { : ", : "results": : [ : : { : : : "total_earnings":"&quo ...

  3. 【HTML+CSS】七小时快速入门~~~~~~~

    由于网络化的原因,学习很方便,但是也由于太方便了,学习资料很多会给刚想要入门却没有什么自制力的初学者造成困难,我自己来说学html和css先看了一本书,后来又辗转在慕课网.w3cschool等学习网站 ...

  4. hdu2476 String painter(区间dp)

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=2476 Problem Description There are two strings ...

  5. Codeforces Round #371 (Div. 2) - A

    题目链接:http://codeforces.com/contest/714/problem/A 题意:有两个人A,B 给定A的时间区间[L1,R1], B的时间区间[L2,R2],然后在正好K分钟的 ...

  6. 《DSP using MATLAB》示例Example4.8

    代码: b = [0,1]; a = [3, -4, 1]; % polynomials coefficients [R,p,c] = residuez(b,a) [b,a] = residuez(R ...

  7. express-10 表单处理

    从用户那里收集信息的常用方法就是使用HTML表单.无论是使用浏览器提交表单,还是使用AJAX提交,或是运用精巧的前端控件,底层机制通常仍旧是HTML表单. 向服务器发送客户端数据 向服务器发送客户端数 ...

  8. js-新兴的API,最佳实践,离线应用于客户端存储

    离线应用于客户端存储: 1.离线检测:online以及offline事件,都是在window对象上触发 navigator.online为true的时候是表示设备能够上网 2.使用一个描述文件(man ...

  9. Robotium编写测试用例如何模拟Junit4的BeforeClass和AfterClass方法1 - 条件判断法

    本文来源于:http://blog.csdn.net/zhubaitian/article/details/39293883 Robotium的测试类ActivityInstrumentationTe ...

  10. Ue4中的框选函数

    void AHUD::GetActorsInSelectionRectangle(TSubclassOf<class AActor> ClassFilter, const FVector2 ...