html用ul li制作导航条

制作的导航条如图所示：

当鼠标滑过每个导航的时候，背景会变换颜色。技术点：将超链接a标签，转换成block标签，从而设置鼠标滑过时的背景色。代码如下所示：

<html ><head><meta charset="utf-8"><title></title><style type="text/css">      *{border: 0;margin: 0; padding: 0;}ul li{list-style: none;}.nav{background-color: black; height: 60px;}.nav ul{width:960px; margin:0 auto;overflow: hidden; /*注意因为ul设置为了li设置为了float，为了ul能显示，需要加这句话*//* background-color: gray; */}.nav ul li {float: left;            }.nav ul li a{color:red;text-decoration: none;width: 119px;height: 60px;display: block;line-height: 60px;text-align: center;border-right: 1px white solid;}.nav ul li a:hover{background-color: green;  }.nav ul li a.last{border-right: none;}</style></head><body>  <div class="nav"><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="#" class="last">集团介绍</a></li>        </ul> </div></body>
</html>

html用ul li制作导航条相关推荐

ul li 制作导航菜单
ul li 制作导航菜单效果图: 代码段: <%@ Page Language="C#" AutoEventWireup="true" CodeFile ...
bootstrap制作导航条案例
bootstrap制作导航条案例 <!DOCTYPE html> <html lang="en"> <head><meta charset ...
四十五、使用bootstrap制作导航条
使用bootstrap制作导航条参考链接:https://v3.bootcss.com/components/#navbar 项目结构工具使用: Bootstrap Button Generato ...
Bootstrap导航条、分页导航
[导航条navbar] 在bootstrap中导航与导航条在外观方面差不多,但在实际应用时,导航条却要复杂的多. 导航条制作方法: 第一步:首先在制作导航的列表(<ul class=" ...
Bootstrap(五) 导航条、分页导航
本文转自:http://www.imooc.com/learn/141 导航条基础导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个"条"字.其实在Boo ...
Bootstrap学习笔记——导航条、分页导航
1 导航条导航条(navbar)比航(nav)复杂很多:导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式. 1.1 基础导 ...
CSS实现导航条Tab切换的三种方法
前面的话导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法布局根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布局效 ...
Bootstrap组件学习之导航和导航条
导航 Bootstrap提供灵活.多样的导航组件,允许使用相同的标签.不同的类,实现不同风格的导航样式,具有非常高的可定制行.所有的导航组件,包括标签页.pills.导航列表标签,都必须使用nav类实 ...
HTML+CSS实战(一)——导航条菜单的制作
一.垂直导航菜单的制作 1.基本的样式清除: *{margin:0;padding:0} 2.无序列表圆点去除: ul{list-style:none} 3.下划线去除: a{text-decorat ...
DIV+CSS基础教程：导航条的制作详解
课程开始: 前三节课,我们知道了什么是"内容块状元素和内联元素",以及XHTML+CSS布局的核心概念"盒子模型",同时又学习了一下页面布局中两种方 ...

html用ul li制作导航条

html用ul li制作导航条相关推荐

最新文章

热门文章