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前面的点*/ 因为有些标签之间会有默认的边距,所以可以先将边踞 ...
随机推荐
- ASP.NET 如何发现问题的方法
1.打开IntelliTrace,查看遇到的问题: 2.打开IE8以上,按F12,启动js调试,查看遇到的错误:
- java之对象转型2
public class TestCasting2{ public static void main(String args[]){ TestCasting2 test2= new TestCasti ...
- sublime3+wamp配置php,(无需配环境变量)
思来想去,最后还是决定给自己的手游加简单后端验证.好久没搞php了,最近搜了搜资料,发现现在php比几年前方便简单的多,有wampserver和sublime用.想想当年我还用记事本+phnow呢. ...
- node.js 的 os 模块
Node.js的os module 提供了一系列跟操作系统相关的操作函数,比较简单,所以功能也就十分有限.我们可以去官网看各个函数的介绍: http://nodejs.org/api/os.html ...
- [LeetCode] Fraction to Recurring Decimal 哈希表
Given two integers representing the numerator and denominator of a fraction, return the fraction in ...
- iOS app开发资料整理
Objective C快速入门: http://blog.csdn.net/totogo2010/article/details/7632384 http://www.cocoachina.com/i ...
- node.js JS对象和JSON字符串之间的转换
JSON.stringify(obj)将JS对象转为字符串. var json = { aa: ['sdddssd'], bb: [ '892394829342394792399', '23894 ...
- [linux]删除目录下的一类文件
find 目录 -name "*.类型" | xargs rm -f 通过find命令,查找指定目录下的某一类型的文件.并通过管道传递给xargs,执行后面的rm -f命令. 最终 ...
- Angular系列------AngularJS快速开始（转载）
Hello World! 开始学习AngularJS的一个好方法是创建经典应用程序“Hello World!”: 使用您喜爱的文本编辑器,创建一个HTML文件,例如:helloworld.html. ...
- Redis设计与实现-内部数据结构篇
题记:这本书是2015年11月份开始读的,大约花了一个多月的时间通读了一遍,最近由于需要对redis做一些深入的了解,因此又花了两个多月仔细精读了一遍,由于本书设计的内容较多,且每部分的内容都比较细致 ...