html+css 导航条变色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>162-a标签伪类选择器练习</title><style>*{margin:0;padding: 0;}ul{width: 960px;height: 40px;/*background-color: green;*/margin: 100px auto;}ul li{list-style: none;width: 120px;height: 40px;float: left;/*background-color: purple;*/text-align: center;line-height: 40px;}/*设置a标签的宽高和li标签的宽高一样，使得li标签征个区域一触摸就变成小手*//*1.在企业开发中编写a标签的伪类选择一般写在a标签选择器的后面；2. 在企业开发中和a标签盒子相关的属性都写在标签选择器中（显示模式、宽度、高度、margin、padding)3. 在企业开发中和a标签的文字背景相关属性一般写在伪类选择器中；*/ul li a{width: 120px;height: 40px;display: inline-block;}/*默认状态*/ul li a:link{background-color: pink;color:white;text-decoration: none;}/*悬停状态*/ul li a:hover{color: red;background-color: #ccc;}ul li a:active{color: yellow;}</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><li><a href="#">我是导航</a></li><li><a href="#">我是导航</a></li><li><a href="#">我是导航</a></li>
</ul>
</body>
</html>

默认状态：

悬停状态：

长按状态：

html+css 导航条变色相关推荐

HTML下拉菜单怎么做成横向,css导航条横向带下拉菜单
css+div导航下拉二级菜单竖排效果如何改为横排? ,在"下一站"有三个二级竖排菜单,如何能变为横排?困扰了我一天了,让二级菜单变成一行,只需要在竖排的效果上,让二级菜单都浮动起 ...
JS控制网页滑动顶部导航条变色
<!doctype html> <html lang="en"><head><meta charset="UTF-8" ...
CSS导航条菜单：带小三角形
很多网页的导航条都会有小三角形,其实实现这个功能也挺简单. 拿菜鸟教程首页导航做个例子首先写一个大的div_nav,而"首页""菜鸟笔记""菜鸟工具 ...
CSS导航条从入门到精通
1 css实现基本的横向导航条 html结构 <body><div id="top"><ul&g ...
CSS导航条制作心得
今天学习了导航条的制作,感觉收获很大!学习了一段时间的css和html.之前都是在慕课网上面看视频学习的,感觉收获不是特别大,有一点慢,效率不高.学东西还是得边做边学变想,学习编程最好能够不断地实践, ...
前端——菜鸟网站横向CSS导航条菜单：带小三角形
之前看到很多网页的导航条都会有小三角形,一直好奇是如何实现的,正好前些天做的菜鸟教程首页的导航栏也有小三角形,就研究了一下它的实现方法.菜鸟教程首页导航如下图: 其实实现这个功能也挺简单.首先写一个大 ...
CSS导航条以及简单下拉菜单实现
以京东导航条来练习,导航条的制作可以采用浮动或者弹性布局,这里采用浮动,要注意高度塌陷的问题.这里简单仿写一下下面实现鼠标移动到江苏实现下拉菜单的实现,首先要有一个下拉菜单,设置好宽高,把他隐藏起来 ...
[CSS]30种时尚的CSS网站导航条
[原文地址]:http://coolshell.cn/?p=562 我想,大家在上网的时候一定见过很多很多种各式各样的网站导航条的设计.这些导航条基本上来说都是用CSS来做的.这里,我们将向你介绍几种 ...
前端——用div画菜鸟网站首页导航条“小三角”
今天学到一个新的知识点--用div来画"三角". 之前本帅博主写过一篇<前端--菜鸟网站横向CSS导航条菜单:带小三角形>,里面也有介绍如何制作小三角形,不过它是用的现 ...

html+css 导航条变色

html+css 导航条变色相关推荐

最新文章

热门文章

html+css 导航条 变色

html+css 导航条 变色相关推荐

最新文章

热门文章

html+css 导航条变色

html+css 导航条变色相关推荐