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前面的点*/ 因为有些标签之间会有默认的边距,所以可以先将边踞 ...
随机推荐
- Android开源代码分享
一.AppMsg实现自定义Toast. github下载地址 二.CircleImageView实现带边框圆形头像. github下载地址 ...
- 从逆向的角度去理解C++虚函数表
很久没有写过文章了,自己一直是做C/C++开发的,我一直认为,作为一个C/C++程序员,如果能够好好学一下汇编和逆向分析,那么对于我们去理解C/C++将会有很大的帮助,因为程序中所有的奥秘都藏在汇编中 ...
- MySQL实现类似Oracle的序列
MySQL实现类似Oracle的序列 2013-10-22 10:33:35 我来说两句 作者:走过的足迹 收藏 我要投稿 MySQL实现类似Oracle的序列 Oracl ...
- seajs中spm压缩工具使用
seajs是个好东西,用起来很方便,但是她的压缩工具spm确不被网友看好,因为使用起来很麻烦,捯饬了一天多,终于勉强能压缩了,这里就简单记录一下. 按照地址:http://www.zhangxinxu ...
- 实战android菜单项之XML加载菜单与动态菜单项[转]
原文地址:http://blog.csdn.net/kaiwii/article/details/7767225 自定义android应用程序的菜单项首先要知道切入点.经过学习,知道主要是两个Acti ...
- windows下mysql开启远程访问权限
1.mysql -u root -p 2.use mysql 3.GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY '密码' WITH G ...
- MySQL不能插入中文字符及中文字符乱码问题
MySQL的默认编码是Latin1,不支持中文,要支持中午需要把数据库的默认编码修改为gbk或者utf8.在安装后MySQL之后,它的配置文件不是很给力,不知道你们的是不是,反正我的是! 开始插入中文 ...
- Android manifest之manifest标签详细介绍
AndroidManifest详细介绍 本文主要对AndroidManifest.xml文件中各个标签进行说明.索引如下: 概要PART--01 manifest标签PART--02 安全机制和per ...
- EPANET中读取INPUT文件的函数文件——INPUT3.C
/* ********************************************************************** INPUT3.C -- Input data par ...
- 使用Spark分析拉勾网招聘信息(二): 获取数据
要获取什么样的数据? 我们要获取的数据,是指那些公开的,可以轻易地获取地数据.如果你有完整的数据集,肯定是极好的,但一般都很难通过还算正当的方式轻易获取.单就本系列文章要研究的实时招聘信息来讲,能获取 ...