css导航栏
几个导航栏也算对学过知识的回顾，总有新的收获，下面是学习过程中敲的代码：
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style> ul{
list-style-type: none;
width: 100px;
}
a{
display: block; /*设为block修改其样式，而不是修改li标签*/
text-decoration:none;
background-color:#ccc;
height: 30px;
line-height: 30px;
width: 100px;
margin-bottom: 1px;
text-indent:20px;
}
li{ }
a:hover{
background-color:#f60;
color:#fff;
} </style>
</head>
<body>
<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>
</ul>
</body>
</html>
下面css代码使其水平导航：
ul{
list-style-type: none;
}
a{
display: block;/*设为block修改其样式，而不是修改li标签*/
text-decoration:none;
background-color:#ccc;
height: 30px;
line-height: 30px;
width: 100px;
margin-bottom: 1px;
text-align:center;
}
li{
float:left;
}
a:hover{
background-color:#f60;
color:#fff;
}
下面再次改进为伸缩效果：
ul{
list-style-type: none;
height:30px;
border-bottom:3px solid #f60;
margin:0 auto;
width: 800px;
padding-left: 200px;
}
a{
display: block;/*设为block修改其样式，而不是修改li标签*/
text-decoration:none;
background-color:#ccc;
height: 30px;
line-height: 30px;
width: 100px;
margin-bottom: 1px;
text-align:center;
border-radius:10px 10px 0 0;
}
li{
float:left;
width: 100px;
margin: 0 auto;
}
a:hover{
background-color:#f60;
color:#fff;
height:40px;
margin-top:-10px;
line-height: 40px;
}
改进后效果如下：
下面用js改进，实现鼠标放上去变宽效果：
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style> ul{
list-style-type: none;
height:30px;
border-bottom:3px solid #f60;
margin:0 auto;
width: 800px;
padding-left: 200px;
}
a{
display: block;/*设为block修改其样式，而不是修改li标签*/
text-decoration:none;
background-color:#ccc;
height: 30px;
line-height: 30px;
width: 100px;
margin-bottom: 1px;
text-align:center;
border-radius:10px 10px 0 0; }
li{
float:left;
width: 100px;
margin: 0 auto;
}
a:hover{
background-color:#f60;
color:#fff;
height:40px;
margin-top:-10px;
line-height: 40px;
} </style>
<script>
window.onload=function(){
var oa=document.getElementsByTagName('a');
for(var i=0;i<oa.length;i++)
{ oa[i].onmouseover=function(){
var that=this;
that.time=setInterval(function(){ that.style.width=that.offsetWidth+8+'px';
if(that.offsetWidth>=120)
{
clearInterval(that.time);
}
},30);
} oa[i].onmouseout=function(){
var that=this;
that.time=setInterval(function(){ that.style.width=that.offsetWidth-8+'px';
if(that.offsetWidth<=120)
{
that.style=width='120px';
clearInterval(that.time);
}
},30);
}
}
}
</script>
</head>
<body>
<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>
</ul>
</body>
</html>
效果：
css导航栏的更多相关文章
- [HTML/CSS]导航栏的下划线跟随效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS：CSS 导航栏
ylbtech-CSS:CSS 导航栏 1.返回顶部 1. CSS 导航栏 导航栏 熟练使用导航栏,对于任何网站都非常重要. 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单. 导航栏=链接 ...
- 4 CSS导航栏&下拉菜单&属性选择器&属性和值选择器
CSS导航栏 熟练使用导航栏,对于任何网站都非常重要 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单 垂直导航栏: <!DOCTYPE html> <html> & ...
- CSS 导航栏
实例: 导航栏 Home News Articles Forum Contact About 导航栏 熟练使用导航栏,对于任何网站都非常重要. 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜 ...
- 纯洁CSS实现下拉菜单和下拉容器（纯洁CSS导航栏和导航下拉容器）
虽然网上课程似即使案件大同小异,但我还是写,记笔记,也为您提供参考 我希望你能指导批评~~ 首先,我们必须列出ul li 开始我们的导航栏菜单也能说生产: 在下面的页面,我们先建XHTML结构体: & ...
- 不可思议的纯CSS导航栏下划线跟随效果
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- 纯css导航栏下划线
.nav-underline > *{/* 指定容器,里面可以是li.span等多样化的元素 */ display: inline-block; margin: -3px; padding: 1 ...
- PHP全栈开发（八）：CSS Ⅹ 导航栏制作
学习了这么久的CSS,我们现在也可以小试牛刀一下了,我们使用我们学会的CSS知识来制作一个导航栏. 我们都知道,在现代的导航栏里面,最普遍的就是使用无序列表来制作导航栏. 我们可以使用如下代码来制作一 ...
- css——导航栏
导航栏一般用无序列表制作 但出来的导航栏有黑点,还有一些边距 去除黑点我们可以用:list-style-type: none;/*去掉ul前面的点*/ 因为有些标签之间会有默认的边距,所以可以先将边踞 ...
随机推荐
- c++ 状态模式（state）
/************************************************************************/ /* 状态模式 */ /************* ...
- iOS 模拟器键盘弹出以及中文输入
1.虚拟键盘的弹出与收起切换: 快捷键:command+shift+K 2.中文输入: Xcode 菜单项 --> Product --> Scheme --> Edit Schem ...
- 编译安装 LLVM
本文记录 LLVM 的安装过程,比较繁琐,使用 LLVM 3.4 操作系统:CentOS 6.6 64 位 1. 下载需要的软件 相关软件下载地址:http://llvm.org/releases/d ...
- Log4net对数据库的支持
记录到Oracle数据库中 <appender name="AdoNetAppender_Oracle" type="log4net.Appender.AdoNet ...
- Android版Ftp服务端软件
分享一款开发的Android版Ftp服务端软件,支持Android4.0及以上版本,可以实现局域网无线传输文件到手机,或者把手机上的多媒体文件分享到iPad等设备来扩展这些设备的存储空间,详情请见软件 ...
- Unity 中的协同程序
今天咱就说说,协同程序coroutine.(这文章是在网吧敲的,没有unity,但是所有结论都被跑过,不管你信得过我还是信不过我,都要自己跑一下看看,同时欢迎纠错)先说说啥是协程:协同程序是一个非常让 ...
- STL中priority_queue小结
(1)为了运用priority_queue,你必须包含头文件<queue>:#include<queue> (2)在头文件中priority_queue定义如下: namesp ...
- ruby -- 基础学习（四）TimeDate处理
TimeDate格式化输出: DateTime.parse(Time.now.to_s).strftime('%Y-%m-%d %H:%M:%S').to_s #就是按照2013-8-16 16:4 ...
- 利用PS自动切图、支持svg且支持icoMoon——再也不用四处去转格式了
今天想导出svg格式的图片支持webFont,结果AI打不开了,文件好像损坏了,于是就想办法在PS里面导出. 网上搜索到一篇文章,腾讯的 http://isux.tencent.com/ps-phot ...
- webapp项目前端总结
提纲 整体把握,从设计稿入手——技术选型 并行开发,从实现静态页面开始 前端自动化 前端js逻辑 前后端集成 小问题集合 总结 1.整体把握,从设计稿入手 —— 技术选型 新项目到手,算是运气好,设计 ...