下面是使用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技术站