用ul、li标签创建css横向导航菜单示例

下面是使用ul、li标签创建CSS横向导航菜单的攻略:

步骤一:HTML结构

首先,我们需要使用HTML标签创建结构。在HTML代码中使用无序列表(ul)和列表项(li)来创建菜单项。

以下是HTML结构的示例代码:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

在上面的代码中,我们创建了一个导航栏(nav)和一个无序列表(ul),其中每个列表项(li)都是导航菜单的一个项目。每个菜单项都有一个链接标签(a)来链接到其他页面。

步骤二:CSS样式

接下来,我们需要定义CSS样式,让导航菜单水平对齐并具有漂亮的样式。

以下是一个基本的CSS样式示例:

nav {
  background-color: #333;
  width: 100%;
}

nav ul {
  list-style:none;
  margin:0;
  padding:0;
}

nav li {
  display:inline;
  float:left;
  margin-right:10px;
}

nav a {
  display:inline-block;
  color:#fff;
  text-align:center;
  padding:10px;
  text-decoration:none;
}

nav a:hover {
  background-color:#666;
}

在上面的代码中,我们为导航栏和菜单项添加了一些基本的样式。具体来说,我们使用了以下样式:

  • 将导航栏的背景色设置为#333
  • 将无序列表的默认样式清除
  • 将列表项显示为行内元素
  • 将列表项浮动到左侧
  • 在每个菜单项之间添加10像素的间隔
  • 将每个菜单项的链接标签显示为行内块级元素
  • 设置链接文字的颜色为白色
  • 将链接文字居中显示
  • 在链接文字周围设置10像素的内边距
  • 在链接鼠标悬停时设置背景颜色为#666

示例一:添加子菜单

现在,我们的导航菜单被创建了,并且具有基本的样式。但是,我们可以通过添加其他样式来使导航菜单更具吸引力和使用性。

以下是一个示例,演示了如何添加子菜单:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
      <ul>
        <li><a href="#">Our Team</a></li>
        <li><a href="#">Our History</a></li>
        <li><a href="#">Our Clients</a></li>
      </ul>
    </li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
nav {
  background-color: #333;
  width: 100%;
}

nav ul {
  list-style:none;
  margin:0;
  padding:0;
}

nav li {
  display:inline;
  float:left;
  margin-right:10px;
  position:relative;
}

nav li ul {
  display:none;
  position:absolute;
  left:0;
  top:100%;
  width:200px;
  background-color:#333;
}

nav li:hover ul {
  display:block;
}

nav a {
  display:inline-block;
  color:#fff;
  text-align:center;
  padding:10px;
  text-decoration:none;
}

nav a:hover {
  background-color:#666;
}

要创建子菜单,我们只需在父菜单项上添加包含子菜单项的另一个无序列表。我们还需要在CSS样式中添加一些额外的样式,例如将子菜单隐藏并在父菜单项上使用:hover选择器来显示它们。

示例二:使用字体图标

另一个常见的要求是在导航菜单中使用字体图标。下面是一个示例,演示如何将字体图标添加到页面中的导航菜单:

<nav>
  <ul>
    <li><a href="#"><i class="fa fa-home"></i></a></li>
    <li><a href="#"><i class="fa fa-info"></i></a></li>
    <li><a href="#"><i class="fa fa-search"></i></a></li>
    <li><a href="#"><i class="fa fa-envelope"></i></a></li>
  </ul>
</nav>
nav {
  background-color: #333;
  width: 100%;
}

nav ul {
  list-style:none;
  margin:0;
  padding:0;
}

nav li {
  display:inline;
  float:left;
  margin-right:10px;
}

nav a {
  display:inline-block;
  color:#fff;
  text-align:center;
  padding:10px;
  text-decoration:none;
  font-size:24px;
}

nav a:hover {
  background-color:#666;
}

.fa {
  font-family: "Font Awesome";
  font-style: normal;
}

在这个示例中,我们使用Font Awesome来添加字体图标到导航菜单中。在每个菜单项的链接标签中,我们使用标签来包装Font Awesome的CSS类名fa和图标名称。在CSS样式中,我们将Font Awesome的字体添加到导航菜单的类中,并将链接标签的字体大小设置为24像素。

这些示例演示了如何使用ul、li标签和CSS来创建漂亮的横向导航菜单,并且可以添加额外的子菜单和字体图标。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:用ul、li标签创建css横向导航菜单示例 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • html动态加载css样式和js脚本示例

    下面我来详细讲解“HTML动态加载CSS样式和JS脚本示例”的攻略。 动态加载CSS样式 方式一 我们可以使用 JavaScript 中的 link 元素动态加载 CSS 样式表。可以通过 JavaScript 来创建 link 元素,给 link 元素设置 rel 属性值为 stylesheet,type 属性值为 text/css,href 属性值为 C…

    css 2023年6月9日
    00
  • JavaScript 模块化详解

    JavaScript 模块化详解 在 Web 开发中,JavaScript 是一种非常重要的编程语言。然而,当项目变得越来越复杂时,JavaScript 开发也变得越来越困难。这就是由于缺失命名空间、依赖管理及封闭作用域等问题造成的。 为了解决这些问题,我们引入了 JavaScript 模块化,以便将代码封装,并保持代码的可维护性和可重用性。 什么是 Jav…

    css 2023年6月9日
    00
  • 详解css常用选择器

    下面是详解 CSS 常用选择器的完整攻略: 一、CSS 选择器简介 在 CSS 中,选择器用来指定我们要样式化的 HTML 元素。CSS 选择器有很多种,它们各自拥有不同的特点和用法。在本文中,我们将详解 CSS 中常用的选择器类型。 二、CSS 基本选择器 1. 元素选择器 元素选择器是指通过元素名称来选择它所作用的 HTML 元素。例如: p { col…

    css 2023年6月9日
    00
  • JS原生双栏穿梭选择框的实现示例

    要实现一个JS原生的双栏穿梭选择框,我们需要做如下的步骤: 步骤一:准备HTML结构 首先,我们需要创建一个HTML结构,包含两个选择框和一些操作按钮。示例如下: <div class="transfer-container"> <div class="transfer-left"> <h…

    css 2023年6月10日
    00
  • DOCTYPE和XHTML的相关认识

    DOCTYPE 是一种文档类型定义,它使得浏览器知道文档使用哪种规范解析。在 HTML 中,DOCTYPE 是必须的,否则浏览器将无法正确显示页面。而在 XHTML 中,DOCTYPE 不仅是必须的,还与 XHTML 版本紧密相关。 常用的 DOCTYPE 有以下几种: HTML5:<!DOCTYPE html> HTML 4.01:<!D…

    css 2023年6月10日
    00
  • 网页字体该如何设置?

    网页字体的设置是网页设计中非常重要的一部分,它可以影响到网页的可读性、美观度和用户体验。下面是网页字体设置的完整攻略,包括字体选择、字体大小、字体颜色和字体排版等方面。 1. 字体选择 在选择字体时,需要考虑到字体的可读性、美观度和兼容性等因素。下面是一些常用的字体选择: sans-serif:无衬线字体,例如 Arial、Helvetica、Verdana…

    css 2023年5月18日
    00
  • CSS3的颜色渐变效果的示例代码

    当要给网站添加对颜色的操作时,CSS3提供了许多强大的技术。其中一个是使用渐变色来实现更具艺术性的网页设计。 渐变的类型 CSS3提供了两种类型的颜色渐变:线性渐变和径向渐变。 线性渐变 线性渐变是使用两个或更多颜色的渐进色来填充一个区域的方式。它们沿着一条线或者角度渐进地混合到一起。 以下是一个简单的线性渐变示例: #gradient { backgrou…

    css 2023年6月9日
    00
  • CSS设置背景图片模糊内容不模糊的解决方法

    当我们使用CSS设置一个带有背景图片的元素时,有时候需要将图片设置成模糊效果,但同时又需要确保元素内的内容不被影响,保持清晰的显示。下面给出两条可行的解决方法: 方法一:使用伪元素 在CSS中使用伪元素,可以在保持原样式的基础上添加额外的样式。我们可以为带有背景图片的元素添加一个伪元素来实现模糊效果,而保持原元素内的内容清晰。 具体步骤如下: 首先要为元素设…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部