您的位置：首页 > 网站优化 > css  >  CSS实例教程：用列表ul制作CSS横向菜单的基础知识

CSS实例教程：用列表ul制作CSS横向菜单的基础知识

 更新时间：2017年7月6日 23:13  点击：1778

在前面的文章中学习《用列表ul制作CSS横向菜单的基础知识》/article.asp?id=395。实现的原理我们都能理解了，但这样的菜单还远远不能满足我们的需要，我们需要制作出比较美观的菜单，我们今天学习让菜单有一个矩形的背景，并且当鼠标激活时能有所变化（hover）。废话不多说了，让我们开始吧！



  • Div+CSS教程



  • CSS布局实例



  • CSS2.0教程



  • CSS酷站欣赏



  • CSS模板下载



　　这几行HTML代码，大家都不陌生，它是菜单的根基，有了它我们可以通过CSS进行样式定制。
#nav {
      font-size:12px;
      margin:0;
      padding:0;
      white-space:nowrap;
}
　　我们定义无序列表nav的外边距及填充均为零，并设计字体大小为12px。
　　我们不希望菜单还未结束就另起一行，我们强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。
#nav li {
      display:inline;
      list-style-type: none;
}
#nav li a {
      padding:5px 8px;
      line-height:22px;
}
　　display:inline;内联（行内）,将li限制在一行来显示；
　　list-style-type: none; 列表项预设标记为无；
　　padding:5px 8px;设置链接的填充，上下为5px左右为8px；
　　line-height:22px;设置链接的行高为22px。


[!--infotagslink--]

相关文章

  • js基础知识（公有方法、私有方法、特权方法）

    本文涉及的主题虽然很基础，在许多人看来属于小伎俩，但在JavaScript基础知识中属于一个综合性的话题。这里会涉及到对象属性的封装、原型、构造函数、闭包以及立即执行表达式等知识。公有方法 公有方法就是能被外部访问...2015-11-08

  • js实现列表按字母排序

    这篇文章主要为大家详细介绍了js实现列表按字母排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-08-11

  • javaScript年份下拉列表框内容为当前年份及前后50年

    javascript下拉列表框，内容为当前年份及前后50年，默认选择为当前年份 复制代码 代码如下: <script language="javascript" type="text/javascript"> window.onload=function(){ //设置年份的选择 var myDate= new Date(...2014-05-31

  • Python 列表(List)的底层实现原理分析

    这篇文章主要介绍了Python 列表(List)的底层实现原理分析，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-09

  • easyUI下拉列表点击事件使用方法

    这篇文章主要为大家详细介绍了easyUI下拉列表点击事件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-05-22

  • JavaScript实现网页下拉列表的省市联动

    这篇文章主要为大家详细介绍了JavaScript实现网页下拉列表的省市联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-07

  • C# 列表List的常用属性和方法介绍

    这篇文章主要介绍了C# 列表List的常用属性和方法介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-04-12

  • AngularJS使用ngOption实现下拉列表的实例代码

    这篇文章主要介绍了AngularJS使用ngOption实现下拉列表的实例代码的相关资料,需要的朋友可以参考下...2016-01-25

  • 微信小程序虚拟列表的实现示例

    大部分小程序都会有这样的需求，页面有长列表，需要下拉到底时请求后台数据，一直渲染数据，当数据列表长时，会发现明显的卡顿，页面白屏闪顿现象，那么如何实现小程序虚拟列表，感兴趣的可以了解一下...2021-07-16

  • C#知识整理

    本文主要介绍了C#的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧...2020-06-25

  • php有序列表或数组中删除指定的值的实现代码

    这篇文章主要介绍了php有序列表或数组中删除指定的值的实现代码,删除给定的值之后，得到一个新的有序列表，长度-1，下面是具体的实现方法...2021-08-22

  • MySQL的日志基础知识及基本操作学习教程

    MySQL日志主要包含：错误日志、查询日志、慢查询日志、事务日志、二进制日志；日志是mysql数据库的重要组成部分。日志文件中记录着mysql数据库运行期间发生的变化；也就是说用来记录mysql数据库的客户端连接状况、SQL语句...2015-11-24

  • Perl中的列表和数组学习笔记

    这篇文章主要介绍了Perl中的列表和数组学习笔记,本文讲解了列表、数组--列表的存贮、数组的存取、字符串中的方括号和变量替换、列表范围、数组的输出等内容,需要的朋友可以参考下...2020-06-29

  • js动态添加带圆圈序号列表的实例代码

    这篇文章主要介绍了js动态添加带圆圈序号列表的实例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-02-18

  • 如何让vue长列表快速加载

    这篇文章主要介绍了如何让vue长列表快速加载，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下...2021-03-26

  • 如何用CSS设置下拉列表sel

    我们在进行CSS网页布局的时候，常常会遇到下拉列表select，我们可以应用CSS对表单的元素进行控制，可是下拉列表select的样式该如何设置呢？ 　　我们来看看下面的xhtml...2017-07-06

  • 基于jQuery实现音乐播放试听列表

    这篇文章主要介绍了基于jQuery实现音乐播放试听列表的相关资料,需要的朋友可以参考下...2016-04-17

  • photoshop颜色基础知识和配色理论解析分享

    今天小编在这里就来给photoshop的这一款软件的使用者们来讲解一下颜色基础知识和配色理论，各位想知道的使用者们，那么下面就快来跟着小编一起看一看教程吧。 给各...2016-09-14

  • c++获取进程信息列表和进程所调用的dll列表

    这篇文章主要介绍了c++获取进程信息列表和进程所调用的dll列表，大家参考使用吧...2020-04-25

  • Vue开发过程中遇到的疑惑知识点总结

    vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。下面这篇文章主要给大家总结了Vue在开发过程中遇到的疑惑知识点,有需要的朋友可以参考借鉴，下面来一起看看吧。...2017-01-23