CSS导航栏实例详解

效果：

代码：

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>

代价解释：

ul标签定义列表，li是列表中的项，每个列表项包括一个链接（<a>标签）；

ul{}部分：
定义列表样式-无；
外边距-0;
内边距-0;

a:link,a:visited{}部分：（a:link-未访问的链接，a:visited-已访问的链接；）
块级元素 - 占据一定矩形空间；
设置字体粗细 - 粗体；
颜色；
背景颜色；
宽度；
文本中间对齐；
内边距4px;
文本修饰-标准；
文本大小写状态-大写；（对中文无意义）

a:hover,a:active{}部分：（a:hover-鼠标悬停在链接上，a:active-被选择的链接；）
背景色；

CSS导航栏实例详解相关推荐

仿抖音短视频APP源码，顶部导航栏切换详解
仿抖音短视频APP源码,顶部导航栏切换详解的相关代码 class DaoHangNan extends StatefulWidget //继承StatefulWidget{TabController ...
android 控件 margin,Android MarginDesign控件TabLayout导航栏使用详解
TabLayout的使用简单介绍比如在平常的项目中实现这样的效果,一般都是都会使用viewPageIndicate等几个开源框架直接实现,或者使用自定义的HorizontalScroll再配合Vie ...
CSS图片廊实例详解
效果: <!DOCTYPE html> <html> <head> <style> div.img {margin: 2px;border: 1px s ...
使用css绘制弹幕,实例详解CSS3 实现弹幕
项目需要实现弹幕,网上参考了各种方法,最后觉得transform+transition实现的效果在移动设备上性能最好,在iphone6和红米4上测试,看不到卡顿的感觉.用jquery的animate动 ...
HTML导航栏的四种制作方法,jQuery+CSS3实现四种应用广泛的导航条制作实例详解
导航条的使用很广,每个网站都会做出具有自己特色的导航条.最近特地去了解了各种类型的导航条,比如具有高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,甚至是具有摩擦运动动画的导航条(文字下 ...
Android百度地图实例详解之仿摩拜单车APP(包括附近车辆、规划路径、行驶距离、行驶轨迹记录，导航等)
Android百度地图实例详解之仿摩拜单车APP(包括附近车辆.规划路径.行驶距离.行驶轨迹记录,导航等) 标签: android百度地图行驶轨迹记录共享单车行驶距离和时间 2017-03-08 20 ...
omnifocus3透视任务分类实例详解
目录 1任务分类 2标签:任务细化的一种属性 3任务分类实例详解 4透视上大学之前(好巧,今天9号,高考结束),我们每周的任务数量很明确:本学期几本书的学习.复习.但是步入社会之后,参与项目数量逐渐 ...
Element Plus 实例详解（一）___安装设置
Element Plus 实例详解(一) ___安装设置本篇目录: 一.前言二.安装方法 1.环境支持 2.Element Plus安装使用方式 (1).使用包管理器 (2).浏览器直接引入 3. ...
【查询】—Entity Framework实例详解
Entity Framework 查询使用集成查询,简称LINQ.LINQ是一个查询框架,并不限于Entity Framework使用,同样不限于数据库.LINQ Provider 负责将LINQ查询 ...

CSS导航栏实例详解

CSS导航栏实例详解相关推荐

最新文章

热门文章