用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日

相关文章

  • 关于图片与文字垂直方向不对齐问题的解决方法

    当网站中同时存在图片和文字时,经常会遇到图片与文字垂直方向不对齐的问题,这不仅影响美观度,也会影响用户的体验。下面,我们来讲解如何解决这一问题。 问题的原因 首先要了解,这种问题的原因通常是因为图片和文字所在的盒子(box)使用了不同的属性,导致文本所在的行盒(line-box)和图像所在的行盒不在同一水平线上。 常见的有以下两种情况: 图片设置了 vert…

    css 2023年6月10日
    00
  • HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列

    那么接下来我将为您详细讲解如何实现“HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列”。 一、实现思路 将TABLE分为两个部分,左侧是固定的列,右侧是滚动的列。 固定列使用position: fixed进行固定,同时在其父元素(TABLE)上设置position: relative,保证固定列相对于父元素定位。 滚动列使用overflow: …

    css 2023年6月10日
    00
  • CSS3 rgb and rgba(透明色)的使用详解

    以下是关于“CSS3 rgb 和 rgba(透明色)的使用详解”的完整攻略。 一、什么是rgb和rgba RGB 和 RGBA 是一组颜色模式,RGB 表示红色、绿色和蓝色,RGBA 跟 RGB 模式同样表示红色、绿色和蓝色,只不过多了一个透明度的参数。 RGB:由红色值(R)、绿色值(G)和蓝色值(B)组成的颜色表示方式。 RGBA:由红色值(R)、绿色值…

    css 2023年6月9日
    00
  • css 背景图片定位在菜单效果中的应用实例

    下面我将为你详细讲解“css 背景图片定位在菜单效果中的应用实例”的完整攻略。 什么是 CSS 背景图片定位? CSS 背景图片定位是指通过 CSS 的 background 属性对背景图片进行定位,从而实现不同的布局效果。 在 CSS 中,background 属性有多个子属性,包括 background-image、background-position…

    css 2023年6月9日
    00
  • 学习JavaScript图片预加载模块

    下面是学习JavaScript图片预加载模块的完整攻略。 1. 什么是图片预加载 图片预加载是指在页面加载完成之前,提前加载需要用到的图片资源,以此提高页面的加载速度和用户的体验。 2. 实现图片预加载 在 JavaScript 中,我们可以使用 Image 对象实现图片预加载。以下是实现图片预加载的基本步骤: 创建一个 Image 对象,并设置它的 src…

    css 2023年6月10日
    00
  • div 内table 居中实现代码

    实现 div 内 table 居中可以采用以下两种方法: 方法一:使用 flex HTML 代码: <div class="container"> <table> <tr> <td>示例</td> <td>示例</td> <td>示例</…

    css 2023年6月10日
    00
  • 分享几个实用的CSS代码块

    让我们来详细讲解如何分享几个实用的CSS代码块。 步骤一:选择实用的CSS代码块 首先,我们需要选择一些实用的CSS代码块,这些代码块可以帮助我们快速实现一些常见的效果或功能。例如,我们可以选择一些在前端开发中常用的CSS属性或选择器,或者是一些细节优化的小技巧。 以下是几个示例: 代码块一:水平居中 有时候,我们需要将一个元素水平居中,可以使用如下代码: …

    css 2023年6月9日
    00
  • CSS让网页里的提交按钮变得更漂亮

    下面是 CSS 让网页里的提交按钮变得更漂亮的完整攻略: 1. 使用 CSS 样式美化按钮 使用CSS可以在不改变HTML结构的情况下美化按钮。通过CSS的伪类和装饰属性,可以为按钮添加悬停,点击效果以及其他特殊效果。 1.1. 针对提交按钮设置CSS样式 首先,需要为提交按钮设置一些基本的 CSS 样式,比如背景颜色、边框样式等。可以使用以下CSS代码: …

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