`

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

导航栏ulli排成一行
阅读更多
在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
分享到：
| TOPK
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    div+css+ul-li制作横向导航栏，简洁清楚。原理清楚，适合学习。

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

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

    纯CSS实现横向导航栏

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

    CSS+DIV制作导航条

    --导航条--&gt; &lt;li&gt;&lt;a href="#"&gt;A&lt;/a&gt;&lt;/li&gt; &lt;!---------------------------------------------&gt; &lt;li&gt;&lt;a href="#"&gt;B&lt;/a&gt;&lt;!--二级--&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;B1&lt;/a&gt;&lt;!--3级--&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;B12&lt;/a&gt;&lt;/li&gt; ...

    基于html和CSS3制作酷炫的导航栏

     1 ul 水平显示  2 li 去掉圆点  3 li中字体水平、竖直居中  4 li控制边框样式  5 使用html + css3 渐变画图 制作背景图片  6 更改颜色透明度  7 DIV制作边框阴影 先看效果图:   CSS Code复制内容到剪贴...

    利用UL、Li+CSS属性制作无表格实用菜单导航效果

    当项目列表的项目符号可以通过list-style-type设置为none时，制作各式各样的菜单、导航条成了项目列表的最大用处之一，通过各种CSS属性变换可以达到很多意想不到的导航效果。本实例效果如下图所示：   建立HTML相关...

    纯CSS实现导航栏下划线跟随的示例代码

    本篇文章主要介绍了纯CSS实现导航栏下划线跟随的示例代码，分享给大家，具体如下： 效果： 代码： html： &lt;ul&gt; &lt;li&gt;aaaa&lt;/li&gt; &lt;li&gt;bbbbbbb&lt;/li&gt; &lt;li&gt;cccc&lt;/li&gt; &lt;li&gt;dddd&lt;/li&gt; &lt;li&gt;eeee&lt;/li&gt; &lt;/ul&gt; css： ul...

    12种CSS3 hover效果插件

    插件描述：好看实用的CSS3的hover效果， 用transition 、amination 制造好看及实用的交互体验.参考示例：http://www.jq22.com/jquery-info5498

    CSS教程高级应用 2个纯CSS面包屑导航栏实现代码

    下面是两个纯CSS 面包屑导航栏实现代码，在网上找了一些方法但觉得都不合适唯独这两个纯css的就差不多了，下面一聚小编来给大家整理一下。 　方法一， 　说明：本方法使用CSS3，无图片，兼容各种webkit系浏览器，...

    UL、LI 无序列表实现纯CSS网站导航菜单

    &lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...&lt;... &lt;head&gt; &lt;... charset=gb2312″ /&gt;...多行的导航栏&lt;/title&gt; &lt;style type=”text/css”&gt; * { margin

    JQuery&CSS;&CSS;+DIV实例大全.rar

    7.jquery+div实用漂亮精致的多级导航栏菜单插件代码示例 8.jQuery+ul实现漂亮竖直下拉菜单 9.jquery仿google首页图标动画菜单效果实现模拟鼠标动画菜单的代码 10.jquery仿卓越亚马逊网鼠标移到按钮弹出菜单的...

    纯CSS实现导航栏下划线跟随滑动效果

    老规矩先上张图，如何使用纯 CSS 制作如下效果？   在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，... &lt;li&gt;导航栏&lt;/li&gt; &lt;li&gt;光标小下划线跟随&lt;/li&gt; &lt;li&gt;PURE CSS&lt;

    不可思议的CSS导航栏下划线跟随效果

    国服第一切图仔 github.com/chokcoco 先上张图，如何使用纯 CSS 制作如下效果？ 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否... &lt;li&gt;导航栏&lt;/li&gt; &lt;li&gt;光标

    css 等宽导航栏设计技巧

    等宽导航栏(我不知道这个名称合不合适，知道的朋友指点一下)的设计一般要遵守以下两个要素： 1.导航栏的背景和页面的最大宽度相等； 2.导航的内容的位置在页面主框架以内（导航的内容在主框架以外的话不好看，用户...

    纯css实现的下拉导航栏附html结构及css样式

    导航栏&lt;/title&gt; &lt;meta http-equiv=”content-type” content=”text/html; charset=UTF-8″&gt; &lt;link rel=”stylesheet” type=”text/css” href=”css/navigator.css”&gt; &lt;/head&gt; &lt;body&...

    div-css-漂亮的导航条

    &lt;style type="text/css"&gt; body { margin:0; padding:0; font: bold 11px/1.5em Verdana; } h2 { font: bold 14px Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 0px; padding: 0px 0px 0px...

    CSS 制作网页导航条(下)

    上节课我们将导航条做成了下面的效果但是此时的导航条还没有链接，还不能点击，这节课我们就要做一个完整的导航条【第四步】 我们需要将上面的导航条做以下几个修改 1）给上面的导航加上链接； 2）链接文字大小修改...

    简单的CSS 下拉导航菜单实现代码

    在这个导航菜单中Portfolio项下有一个子菜单,我用粗体表示出来,最后说一句别忘了关闭&lt;/li&gt;(可以看这个:css技巧-清除多余的标签让代码更加有意义) HTML代码 复制代码代码如下: ”nav”&gt; &lt;ul&gt; &lt;li class=”first”&gt;...

Magicbox
Global site tag (gtag.js) - Google Analytics