`

CSS之导航栏设计之 ul 之 li 标签排成一行

阅读更多
在HTML页面元素设计中,
把具有相同一类功能的列表用 li 标签。
例如导航栏中的菜单。



一、原始样式







二、改成一行: inline-block







三、最终效果







四、代码



<!DOCTYPE html>
<html>
<head>
<style>
ul {
  margin: 0;
  padding: 0;
  background-color: #444;
}
ul li {
  display: inline-block;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #888;
}
</style>
</head>
<body>
<h2>Navigation Menu</h2>
<p>In this example, we use CSS to style the list horizontally, to create a navigation menu:</p>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>































引用请注明,
原文出处:https://lixh1986.iteye.com/blog/2406930








-
  • 大小: 328 KB
  • 大小: 52.5 KB
  • 大小: 72.2 KB
  • 大小: 168.4 KB
分享到:
评论

相关推荐

    div+css+ul-li制作横向导航栏

    首先,我们需要创建一个`&lt;div&gt;`作为导航栏容器,然后在其中嵌套一个`&lt;ul&gt;`标签,`&lt;ul&gt;`中包含多个`&lt;li&gt;`标签,每个`&lt;li&gt;`代表一个导航链接: ```html &lt;ul&gt; &lt;li&gt;首页&lt;/a&gt;&lt;/li&gt; &lt;li&gt;关于我们&lt;/a&gt;&lt;/li&gt; &lt;li&gt;服务...

    CSS的ul和li实现横向排列和去掉li的点

    这一需求在网页设计中是非常常见的,特别是当需要制作水平导航栏时。 在CSS中,为了实现ul的横向排列,我们通常会使用浮动属性`float`。通过将ul的`float`属性设置为`left`,ul中的所有li项也会随之水平排列。而...

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

    创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里,这种方法看起来很合理也很直观。但问题在于把所有的链接都放在一行文本里就很难控制链接之间以及前后的空白。所以,为了避免所有的...

    jsp ul 下的li 标签循环滚动

    在网页设计中,`jsp`(JavaServer Pages)是一种服务器端脚本语言,常用于动态网页的开发。在`jsp`页面中,我们经常会遇到需要实现元素动态效果的需求,例如`ul`(无序列表)下的`li`(列表项)标签进行循环滚动。...

    19款最经典的CSS样式导航栏.zip

    "19款最经典的CSS样式导航栏.zip"这个压缩包集合了多种样式各异的CSS导航栏设计,对于设计师和前端开发者来说是一份非常实用的资源。下面我们将详细探讨CSS在创建导航栏时涉及的知识点,以及这些经典样例可能包含的...

    css圆形导航图标

    在提供的`index.html`文件中,通常会包含HTML结构,如导航栏的`&lt;ul&gt;`和`&lt;li&gt;`元素,以及对应的CSS样式。`images`文件夹可能包含用于导航图标的背景图片,或者用于图标字体的资源。 总结,"css圆形导航图标"涉及了...

    23种CSS导航条样式

    在网页设计中,导航条是不可或缺的元素,它帮助用户在网站中轻松浏览各个页面。本文将深入探讨“23种CSS导航条样式”,并强调如何利用`DIV + CSS`来实现这些效果,以适用于网站的头部导航。 一、基础布局 首先,...

    基于html和CSS3制作简单侧边导航栏

    文章主要介绍了如何使用HTML和CSS3来制作一个简单而大方的侧边导航栏。下面详细解析了文中所提及的知识点: 1. HTML结构 - &lt;div class="sidebar"&gt;&lt;/div&gt;: 用于包裹整个侧边导航栏的容器,类名sidebar定义了这个...

    css 实现导航栏demo

    一个基本的导航栏通常包含一个`&lt;nav&gt;`元素,里面包含一系列的链接`&lt;a&gt;`,这些链接通常包裹在`&lt;ul&gt;`(无序列表)和`&lt;li&gt;`(列表项)元素中。例如: ```html &lt;ul class="menu"&gt; &lt;li&gt;首页&lt;/a&gt;&lt;/li&gt; &lt;li&gt;关于&lt;/a&gt;&lt;/...

    CSS无限级导航条

    2. **水平布局**:为了创建一个水平导航条,我们可以将`&lt;li&gt;`元素的`display`属性设置为`inline-block`,并将它们的父元素`&lt;ul&gt;`的`white-space`属性设为`nowrap`。 ```css .menu li { display: inline-block; } ...

    Html5 + Css3 制作酷炫的导航栏

    在这个“Html5 + Css3 制作酷炫的导航栏”的主题中,我们将深入探讨如何利用这两者来构建一个引人注目的网站导航栏。 首先,HTML5在结构化内容方面提供了更多的元素,比如标签,它专门用于定义页面的导航链接部分。...

    html css 两款超级漂亮实用的CSS导航栏

    通过以上步骤,我们可以创建一款既美观又实用的CSS导航栏。当然,设计可以更进一步,比如添加下拉菜单、图标等复杂功能。在实际应用中,开发者可以根据自己的需求和项目风格进行定制,不断优化用户体验。 在压缩包...

    纯CSS实现横向三级菜单导航栏

    本教程将详述如何使用纯CSS技术实现一个横向的三级联动菜单导航栏。这个功能对于那些需要展示多级分类信息的网站尤其有用,例如电商网站的产品分类、知识库的层级结构等。 首先,我们需要创建HTML结构来表示导航栏...

    基于js+css设计的下拉式导航条

    1. **基础样式设置**:创建一个导航条容器,并为其子元素(如`&lt;li&gt;`)定义样式,如背景色、边框、内边距等。同时,为下拉菜单(通常是一个`&lt;ul&gt;`元素)设定初始的隐藏状态,例如`display: none;`。 2. **hover效果*...

    纯CSS实现横向导航栏

    纯CSS实现横向导航栏,导航栏分三级子菜单,主要所用的html标签为ul与li

    html+css二级导航栏的创建

    - 上述代码中,我们使用了`&lt;ul&gt;`和`&lt;li&gt;`元素来构建导航栏的结构。每个`&lt;li&gt;`元素代表一个主菜单项,并通过嵌套`&lt;ul&gt;`元素来实现二级菜单。 - 主菜单项的`&lt;a&gt;`标签用于添加链接,而二级菜单项也使用同样的方式实现...

    CSS实现ul和li横向排列的两种方法

    在网页布局设计中,我们经常需要将`&lt;ul&gt;`列表中的`&lt;li&gt;`元素横向排列,以便创建导航栏或其他水平展示的内容。本文将详细介绍两种利用CSS实现`&lt;ul&gt;`和`&lt;li&gt;`横向排列的方法。 ### 方法一:使用`float:left` 首先,...

    横排CSS动态导航条亲测修改能用

    在网页设计中,导航条是不可或缺的部分,它帮助用户在网站的不同页面间轻松跳转。在本主题中,我们将深入探讨“横排CSS动态导航条”的实现方式,以及如何将其应用到实际项目中。横排布局是网页设计中最常见的导航条...

    css实现的导航条

    这些都是CSS进阶的话题,但基础的导航条设计对于初学者而言是一个很好的起点。通过不断练习和学习,你将能够掌握更多CSS技巧,创建出更具吸引力和用户体验的导航条。在压缩包中的"01_导航条"文件中,可能包含了一个...

    底部导航栏 js html css

    底部导航栏在网页设计中是不可或缺的部分,它提供了一种用户友好的界面,使用户能够轻松访问网站的主要功能。在创建底部导航栏时,通常会用到JavaScript (js)、HTML 和 CSS 这三种技术。这里我们将深入探讨如何利用...

Global site tag (gtag.js) - Google Analytics