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前面的点*/ 因为有些标签之间会有默认的边距,所以可以先将边踞 ...
随机推荐
- .net 操作 sqlite
sqlite 表结构和数据的导出 全部导出 sqlite3 data.db >.output dd.sql >.dump 待续
- POJ 2524 Ubiquitous Religions
Ubiquitous Religions Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 20668 Accepted: ...
- js类（继承）（二）
1. 定义js类 js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Sh ...
- AppCompat Toolbar控件去掉阴影设置高度
For Android 5.0, if you want to set it directly into a style use: <item name="android:elevat ...
- 【原创】C#搭建足球赛事资料库与预测平台(2) 数据库与XCode组件
本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新 开源C#彩票数据资料库系列文章总目录:[目录]C#搭建足球赛事资料库与预测平台与彩票数据分析目录 本篇文章开始将逐步 ...
- 15套帮助你展示 App 设计的透视屏幕原型素材
Dribbble 和 Behance 是最好两个展示你的设计作品的地方.现在流行使用透视屏幕来展示应用程序设计效果,尤其是在 Dribbble 上面,有众多高品质的免费资源和设计素材. 这篇文章汇集了 ...
- Direct3D11学习：（八）Effects介绍
转载请注明出处:http://www.cnblogs.com/Ray1024 一.概述 Effects框架是一组用于管理着色器程序和渲染状态的工具代码.例如,你可能会使用不同的effect绘制水.云. ...
- Android注解编程的第一步---模仿ButterKnife的ViewBinder机制
ButterKnife的使用极大方便了Android程序员的开发,实际上,我们可以自己模仿一下实现. 首先就是要了解Java注解的使用. 我们首先要声明一个@interface,也就是注解类: @Ta ...
- SQL 关于apply的两种形式cross apply 和 outer apply
SQL 关于apply的两种形式cross apply 和 outer apply 例子: CREATE TABLE [dbo].[Customers]( ) COLLATE Chinese_PRC_ ...
- Node.js爬虫数据抓取 -- 问题总结
一 返回的信息提示 Something went wrong request模块请求出现未知错误 其中,所用代码如下(无User-Agent部分) 问题多次派查无果,包括: 1:postman请 ...