`

CSS - li 元素显示在一行____ a 元素没有下横线

    博客分类：
  • css
cssliinlinea下横线 
阅读更多
原文链接： http://www.w3schools.com/css/css_navbar.asp


方法一： 用于水平导航栏： 


    
    /*** li元素显示在一行，常用作导航栏菜单。 **/

    li{ display: inline; }
    

    /*** a 元素无下横线，是菜单中的文字 **/

    a{ text-decoration: none; }

-








方法二： 用于竖直侧边菜单：


举例： 
<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>




Now let's remove the bullets and the margins and padding from the list: 
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}







三、实例：水平导航栏


链接：http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu 




<!DOCTYPE html>
<html>
<head>
<style>
ul#menu {
    padding: 0;
}

ul#menu li {
    display: inline;
}

ul#menu li a {
    background-color: black;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    background-color: orange;
}
</style>
</head>
<body>

<h2>Horizontal List</h2>

<ul id="menu">
  <li><a href="/html/default.asp">HTML</a></li>
  <li><a href="/css/default.asp">CSS</a></li>
  <li><a href="/js/default.asp">JavaScript</a></li>
  <li><a href="/php/default.asp">PHP</a></li>
</ul>  

</body>
</html>









-
  • 大小: 15.8 KB
  • 大小: 5.9 KB
  • 大小: 7.2 KB
分享到：
| CSS - table 圆角 border radius
评论
发表评论

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

相关推荐

    CSS控制文字在一条线中间的方法

    在网页设计中，让文字居中显示是一种常见的需求，特别是在导航栏、标题或者特殊装饰元素中。本篇文章将深入探讨如何使用CSS（层叠样式表）来实现文字在一条线上的垂直居中显示，以“网页特效”为例，将其放置在虚线...

    Div+CSS布局入门实战教程(3).pdf

    `&lt;li&gt;`中的`&lt;a&gt;`标签定义了链接，而`&lt;li class="menuDiv"&gt;`则用来在菜单项之间创建分隔符。 11. **CSS背景图片**：`#header {background:url(logo.gif) no-repeat}`设置头部的背景图片为Logo，`no-repeat`表示背景...

    2023年韩顺平html笔记.docx

    2. 如果没有内容，可以使用：`&lt;元素名[属性=“属性值”]/&gt;` HTML常用标记 1. 超链接：&lt;a href=”” target=”_blank”&gt;&lt;/a&gt; * `_blank`：在新的窗口打开链接 * `_self`：在本窗口打开链接 * `_parent`：在父...

    三十行代码写一个最简单的时间轴插件——jquery

    这里的关键是利用CSS将每个`&lt;li&gt;`元素转换为带有横线的时间轴点，并通过JavaScript根据它们的相对位置设置相应的偏移。一个基本的CSS样式可能如下： ```css #timeline ul { list-style-type: none; position: ...

    html语言语法说明

    当浏览器遇到`&lt;P&gt;`标签时，会在内容中创建一个新的段落，段落间默认会有一行间距。 3. **横线**： `&lt;HR&gt;`标签用于插入一条水平线，常用于分隔网页内容。 4. **换行**： `&lt;BR&gt;`是一个单标签，用于强制文本换行，...

    jQuery操作DOM_动力节点Java学院整理

    例如，可以一行代码高亮显示具有特定类名的元素： ```javascript $('#test-css li.dy &gt; span').css('background-color', '#ffd351').css('color', 'red'); ``` jQuery 的方法通常返回 jQuery 对象本身，这意味着...

    中国移动技术文档-HTML编码规范

    - **行长度**：虽然没有硬性规定每行字符数不超过120个，但建议保持此标准，以便提高代码的可读性和便于维护。对于HTML这种标记语言来说，由于其特性，可以适当放宽限制。 ##### 2.2 命名约定 - **class命名**： -...

    HTML的语法大全（总结版）

    `&lt;a href="地址"&gt;`指向外部页面，`&lt;a href="地址" target="_blank"&gt;`会在新窗口打开链接，`&lt;a href="地址" target="_top"&gt;`则在当前窗口全屏打开，而`&lt;a href="地址" target="页框名"&gt;`则在指定的框架内打开链接。...

    phpcms V9利用num++实现多样形式列表标签调用

    这行代码会在变量`$num`的值是5的倍数时执行，即每隔五行，页面上就会出现一个带有`bk20hr`类的`&lt;li&gt;`元素，该元素可以进一步通过CSS样式定义，以实现横线的展示。 需要注意的是，模板中`{num++}`的具体含义是：在...

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