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前面的点*/ 因为有些标签之间会有默认的边距,所以可以先将边踞 ...
随机推荐
- 批量Ping IP
刚刚接触Python 想做点什么 听说Python 在网络方便很厉害 后来总结如下: 第一:发现公司都固定IP 每次新来同事都要猜一个没有人用的IP 很费劲 第二:我们公司有的IP可以上QQ 有的不 ...
- ux.plup.File plupload 集成 ux.plup.FileLis 批量上传预览
//plupload 集成 Ext.define('ux.plup.File', { extend: 'Ext.form.field.Text', xtype: 'plupFile', alias: ...
- Linux进程通信 之 信号灯(semphore)(System V && POSIX)
一. 信号灯简介 信号灯与其他进程间通信方式不大相同,它主要提供对进程间共享资源访问控制机制. 相当于内存中的标志,进程可以根据它判定是否能够访问某些共享资源,同时,进程 也可以修改该标志.除了用于访 ...
- java框架篇---spring IOC依赖注入
spring依赖注入的方式有4种 构造方法注入 属性注入 工厂注入 注解注入 下面通过一个实例统一讲解: User.java package com.bjsxt.model; public class ...
- 【cs229-Lecture20】策略搜索
本节内容: 1.POMDP: 2.Policy search算法:reinforced和Pegasus: 马尔科夫决策过程(Partially Observable Markov Decision P ...
- TypeScript札记：初体验
1.简介 TypeScript 是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程. TypeScript是一种 ...
- DDD：四色原型中Role的 “六” 种实现方式
背景 一个实体在不同的上下文中具备不同的职责,如:产品在“生产完成上下文”中具备的一些职责,在“质检相关上下文”中具备另外一些职责.四色原型.DIC和“UML事物模式”在不同的维度阐述了这一情况,在代 ...
- java抽象类和接口区别
深入理解Java的接口和抽象类 对于面向对象编程来说,抽象是它的一大特征之一.在Java中,可以通过两种形式来体现OOP的抽象:接口和抽象类.这两者有太多相似的地方,又有太多不同的地方.很多人在初学的 ...
- 第二次sprint团队贡献分
201406114105 董婷婷 22 201406114157 容杰龙 21 201406114343 卓炜杰 ...
- Github教程(1)
Git基本命令 git diff:查看工作树,暂存区,最新提交之间的差别 举例: 在README.MD中增加一行 ## This is the subtitle 执行git diff 命令,查看当前工 ...