DIV+CSS—菜鸟分享学习心得!导航篇
1、 常见实用的水平导航条
新建一个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=gb2312" />
<title>常用水平导航制作方式</title>
</head>
<style type="text/css">
#globallink{
margin:0px; padding:0px; /*边界、填充均为0*/
clear:both; /*清除浮动*/
}
#globallink ul{
list-style:none; /*不显示列表图象，默认实心圆等*/
padding:0px; margin:0px;
display:inline; /*内联对象的默认值。用该值将从对象中删除行 */
}
#globallink li{
float:left; /*这是关键语句，li不换行 实现横向排列*/
text-align:center; /* 文字居中对齐*/
width:100px; /*每个连接块的宽度为100px*/
}
#globallink li a{
display:block; /*当然块级元素来显示，使得链接变成一个按钮 */
padding:9px 6px 11px 6px; /*填充上、右、下 、左*/
margin:0px; /*边界为0px*/
}
#globallink li a:link, #globallink li a:visited{
color:#FFF; /*字体颜色设置为白色，在css中可以缩写 例如：#f98与ff9988是一样的*/
font-size:17px; /*字体大小为17px值*/
text-decoration:none; /*不显示下划线*/
background-color:#3366CC; /*设置导航条背景色为蓝色*/
}
#globallink li a:hover{ /*设置对象在其鼠标悬停时的样式表属性*/
background-color:#ff9933; /*改变背景颜色*/
text-decoration:underline; /*加上下划线*/
font-size:20px; /*鼠标悬停时字体放大为20px*/
}
</style>
<body>
<div id="globallink">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">网上校园</a></li>
<li><a href="#">管理培训</a></li>
<li><a href="#">网上课堂</a></li>
<li><a href="#">我要报名</a></li>
<li><a href="#">文化沙龙</a></li>
<li><a href="#">学院论坛</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</body>
</html>
这个就是最常见的导航条制作过程了，实现了鼠标访问前悬停，以及释放离去的效果。
以下是打开网页的显示效果：
以下为IE鼠标悬停的效果：
感兴趣的朋友可以把 background-color:#ff9933; 换成background-image:XXXXX;来试下，放入喜欢的图片，就能做出属于自己的个性导航了喔。
2、 垂直红色立体导航
<!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=gb2312" />
<title>垂直红色立体导航</title>
</head>
<style type="text/css">
#navigation {
width:115px;
font-size:13px;
}
#navigation ul {
list-style-type:none; /* 不显示项目符号 */
margin:0px;
padding:0px;
}
#navigation li {
border-bottom:1px solid #ED9F9F; /* 添加下划线 */
}
#navigation li a{
display:block; /* 区块显示 */
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515; /* 左边的粗红边 */
border-right:1px solid #711515; /* 右侧阴影 */
background-image:url(img/17.JPG);
}
#navigation li a:link, #navigation li a:visited{
background-color:#c11136;
color:#FFFFFF;
}
#navigation li a:hover{ /* 鼠标经过时 */
background-color:#990020; /* 改变背景色 */
color:#ffff00; /* 改变文字颜色 */
}
</style>
<body>
<div id="navigation">
<ul>
<li><a href="http://www.cnblogs.com/">博客园首页</a></li>
<li><a href="http://space.cnblogs.com/">社区</a></li>
<li><a href="http://space.cnblogs.com/">闪存</a></li>
<li><a href="http://space.cnblogs.com/q">博问</a></li>
<li><a href="http://news.cnblogs.com/">news</a></li>
<li><a href="http://space.cnblogs.com/myfriends">好友</a></li>
<li><a href="http://wz.cnblogs.com/">网摘</a></li>
<li><a href="http://www.cnblogs.com/csn0721/">我的博客</a></li>
</ul>
</div>
</body>
</html>
FF浏览效果：
IE鼠标点击效果
DIV+CSS—菜鸟分享学习心得!导航篇相关推荐
- 计算机课程学习小结,计算机课程学习心得5篇___.docx
计算机课程学习心得5篇___ 计算机技术的进展,促进了教学媒体的开发和利用,训练资源和资料能得到共享.在教学上应用计算机,能向同学供应更多的.更现代化的科学学问和技能训练,让同学对学习有更多的选择,使 ...
- 【荐】DIV+CSS仿360buy京东商城导航条
代码简介: [荐]DIV+CSS仿360buy京东商城导航条 ,很棒的,赶快来试试. 代码内容: <html xmlns="http://www.w3.org/1999/xhtml&q ...
- java类的心得_java面向对象学习心得3篇
日记网 >> 专题 java面向对象学习心得3篇 更新时间:2018/6/15 8:27:00 点击率:937 手机版 java面向对象学习心得3篇来自简单日记网精选推荐.在面向对象的 ...
- 转‘ROS学习心得——安装篇——ROS安装’
ROS学习心得--安装篇--ROS安装 FOR THE SIGMA FOR THE GTINDER FOR THE ROBOMASTER 简介: ROS(Robot Operating System) ...
- ROS学习心得——安装篇——ROS安装
ROS学习心得--安装篇--ROS安装 FOR THE SIGMA FOR THE GTINDER FOR THE ROBOMASTER 简介: ROS(Robot Operating System) ...
- ROS学习心得——机器人篇——同一局域网下机器人与主机的通信
ROS学习心得--机器人篇--同一局域网下机器人与主机的通信 FOR THE SIGMA FOR THE GTINDER FOR THE ROBOMASTER 简介: 关于这一章我将详细的介绍如何利用 ...
- 【一周课表 · 中秋献礼9.2折】 第四期 认证考试、java、python、php、移动开发、系统运维、区块链 【分享学习心得得技术图书/定制T恤/购课券/会员券】）
[一周课表]: [一周课表]是CSDN学院新推出的学习专栏节目,目的在于带领大家能够一起学习一些课程,认真学习的学员会收到CSDN学院发出的奖励小礼品:技术图书/CSDN学院定制T恤. 规则:在下方评 ...
- c语言课程设计文献检索,文献检索课学习心得三篇(2)
文献检索课学习心得 篇[3] 内容提要:通过本次文献信息检索课程的学习,有利于培养我们的信息意识.自学意识和知识创新能力,使我们养成了自主学习的习惯和独立获取信息的能力,了解了信息社会中文献信息检索的 ...
- html中 导航条置顶的代码,一个DIV+CSS代码布局的简单导航条
一个蓝色主题的导航条结构案例,本CSS小实例,采取DIV CSS实现.同时不必图片做靠山,直接运用布景致完成,鼠标经由过程悬停对应栏目称说是对应背景蓝色变深. 导航条一小块成就截图 通常导航条接纳ul ...
最新文章
- 总监调岗至前台，企业被判赔偿26万，法院：“侮辱性调岗”违法
- Oracle中不同条件的日期查询
- sqlserver——视图
- MFC dialog 间 交互[2]
- 每秒几十万的大规模网络爬虫是如何炼成的？
- QQ连连看 逆向分析外挂制作报告【脱壳ASPPack】【模拟点击】【内联HOOK】
- ST-Link驱动安装
- 动态场景下的语义SLAM的简单实现（基于YOLOv5目标检测）
- 怎样修改电脑时间同步北京时间
- Java进阶篇 设计模式之十四 ----- 总结篇
- win10任务栏图标空白透明问题解决
- C语言---1 C语言认知
- 前端十五道html面试题
- [Splay的应用]
- tomcat重启命令操作
- Hieroglyph3(基于DirectX 11的开源渲染引擎) 框架分析
- 在PCB中快速找到原理图的原件
- 近十年我国竞争情报综述(转载)
- 常见NoSQL的对比及使用场景（Redis,memcached,mongodb）
- RMA（ 退货）的业务流程