CSS样式实例---导航条

导航条一：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>导航条</title><style type="text/css">*{margin: 0;padding: 0;}.nav{list-style: none;background-color: #64951D;width: 1000px;margin: 50px auto;/*解决高度塌陷*/overflow: hidden;}.nav li{width: 25%;float:left;}.nav a{/*将a转化成块元素，否则不能设置宽度*/display: block;/*模块内都能触发链接*/width: 100%;text-align: center;/*设置上下外边距*/padding: 5px 0;text-decoration: none;/*设置字颜色和粗体*/color: white;font-weight: bold;}.nav a:hover{background-color: #C00;}</style></head><body><ul class="nav"><li><a href="#">首页</a></li><li><a href="#">新闻</a></li><li><a href="#">联系</a></li><li><a href="#">关于</a></li></ul></body>
</html>

效果图：

导航条二：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><style type="text/css">*{margin: 0px;padding: 0px;}body{height: 1200px;}ul{list-style: none;}a{color: #51504f;text-decoration: none;}.header h1 a{color: white;line-height: 80px;}header{width:100%;height:80px;background: rgba(0,0,0,0.8);position: fixed;z-index: 888;top: 0;}.header{width: 1200px;height: 80px;line-height: 80px;margin: 0 auto;}.header h1{float: left;  /* background: url(img/logo.png) no-repeat 0 20px; */}.nav{float: right;}.nav li{float:left;height: 80px;line-height: 80px;}.nav li a{color:#fff;font-size: 14px;float: left;height: 80px;padding: 0 20px;}.nav li a:hover{color:#fff;background-color: #444;} </style><body><header><div class="header"><h1><a href="#"title="网站建设">LOGO<!-- <img src="img/123.png" > --></a></h1><ul class="nav"><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></div></header></body>
</html>

效果图：

CSS样式实例---导航条相关推荐

前端学习———用css实现顶部导航条及下拉框
css实现顶部导航条及下拉框一.原理二.HTML 三.CSS 1.设置外部容器样式 2.设置内部容器样式 3.设置导航条中的元素 4.设置下拉框元素 5.设置父元素 6.效果展示一.原理 1. ...
vue动态获取css样式,Vue 框架之动态绑定 css 样式实例分析
今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分首先说一下动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=""就可以了,使 ...
漂亮纯css蓝白色横向导航条代码
漂亮纯css蓝白色横向导航条代码展示图如下: 详细代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
一个非常实用的 div+css 实现的导航条
<div id="nav"> <ul> <li><a href="http://www.52css.com/&quo ...
HTML+CSS实战(一)——导航条菜单的制作
一.垂直导航菜单的制作 1.基本的样式清除: *{margin:0;padding:0} 2.无序列表圆点去除: ul{list-style:none} 3.下划线去除: a{text-decorat ...
前端基础之《Bootstrap（8）—CSS组件_导航条》
一.导航条 1.nav标签:灰色小条 <nav class="navbar navbar-default"></nav> 2.头部和折叠小按钮(.navba ...
css作个课程导航,CSS 制作网页导航条(下)
上节课我们将导航条做成了下面的效果但是此时的导航条还没有链接,还不能点击,这节课我们就要做一个完整的导航条 [第四步] 我们需要将上面的导航条做以下几个修改 1)给上面的导航加上链接: 2)链接文字 ...
Bootstrap组件_导航条（默认样式的导航条，品牌）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
圆的css样式,圆形进度条css3样式
30% 以下样式100upx是50upx的2倍,这是尺寸比例 .con { position: relative; display: inline-block; height: 100upx; wid ...

CSS样式实例---导航条

导航条一：

导航条二：

CSS样式实例---导航条相关推荐

最新文章

热门文章