`
逆风的香1314
  • 浏览: 1419572 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

用css实现了一个精致的纵向导航菜单

CSSJavaOracle.netEJB 
阅读更多

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>纵向导航菜单</title>
<style>
  #course {
 border-width:0px 1px 1px 1px;
 border-style:solid;
 border-color:#f3c3f3;
 width:120px;
 }
  #course dt,#course dd {
 margin:0;
 padding:3px;
 font-size:12px;
 }
  #course dt {
 border-top: 1px solid #f3c3f3;
 font-weight: bold;
 background-color:#c3f3c3;
 }
</style>
</head>

<body>
<dl id="course">
 <dt>专家课堂</dt>
  <dd>工作流</dd>
  <dd>Oracle</dd>
  <dd>ejb 3.0</dd>
 <dt>脱产就业培训</dt>
  <dd>java基础提高班</dd>
  <dd>java就业实战班</dd>
  <dd>java高手精华班</dd>
  <dd>.net就业实战培训</dd>
 <dt>周末充电班</dt>
  <dd>java高手精华班</dd>
  <dd>.net高手精华班</dd>
</dl>
</body>
</html>

在写程序的时候，遇到了一个问题，不小心将  border-width:0px 1px 1px 1px;这样的具有多个值的属性写错了，写成了 border-width:0px,1px,1px,1px;，即把每个值之间空格写成了逗号，效果就出不来了。

分享到：
| csdn的blog后台程序的导航菜单的实现
评论
发表评论

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

相关推荐

    css纵向导航菜单及二级弹出菜单

    本主题聚焦于“css纵向导航菜单及二级弹出菜单”，这是一种常见的交互式网页设计技术，尤其适用于内容层次丰富的网站。 首先，让我们详细了解纵向导航菜单。纵向菜单，也称为侧边栏菜单，通常位于网页的一侧（左侧...

    纯CSS实现的飞出式纵向菜单

    本文将深入探讨如何使用纯CSS技术来创建一个飞出式纵向菜单，这是一种既高效又具有吸引力的导航方案。 首先，我们需要理解“飞出式”菜单的概念。这种菜单在用户鼠标悬停于主菜单项上时会弹出子菜单，提供了更为...

    纯CSS打造的下拉菜单纵向实例

    本文将详细介绍如何仅使用CSS来实现一个纵向的下拉菜单，并探讨其工作原理和技术细节。 #### 二、技术背景 本示例采用纯CSS技术构建，这意味着不依赖任何JavaScript或jQuery等脚本语言，而是完全依靠CSS的样式属性...

    JQuery横向纵向导航菜单

    本教程将深入探讨如何使用jQuery创建一个既可横向又能纵向滑动的完美菜单，这种效果可以极大提升用户体验，使得网站更加互动和吸引人。 首先，jQuery是一种轻量级的JavaScript库，它简化了JavaScript的DOM操作、...

    js导航菜单左侧竖纵向二级导航菜单可点击展开与收缩子菜单

    "js导航菜单左侧竖纵向二级导航菜单可点击展开与收缩子菜单"是一个专门针对这种交互需求设计的功能。这个功能通常应用于那些层次结构较深、内容较多的网站，使用户能够更加方便地探索和定位信息。 在实现这样的导航...

    8套纯CSS竖向导航菜单

    本资源提供的是8套精心设计的纯CSS竖向导航菜单，它们无需依赖JavaScript或其他编程语言，仅通过CSS（Cascading Style Sheets）实现，具有响应式、易定制和轻量级的特点。以下将详细讲解这些纯CSS竖向导航菜单的设计...

    可点击展开与收缩的左侧纵向二级导航菜单

    在IT行业中，构建一个可点击展开与收缩的左侧纵向二级导航菜单是常见的需求，尤其在网页设计和前端开发中。这种菜单设计能够有效地组织和展示网站的层级结构，提高用户体验，便于用户快速找到所需信息。下面我们将...

    JS仿FLASH横向、纵向导航菜单

    本教程将详细讲解如何使用JS来仿制Flash的横向和纵向导航菜单效果，使网页的用户体验更加丰富和动态。 一、HTML结构基础 在创建任何特效之前，首先需要构建一个基本的HTML结构，为导航菜单提供框架。通常，我们可以...

    JavaScript实现的3级纵向导航菜单源码

    在本项目中，“JavaScript实现的3级纵向导航菜单源码”是为创建一个具有多级层次的导航菜单而设计的。这个菜单通常出现在网站的侧边栏或顶部，帮助用户快速访问不同级别的页面内容。 1. **基础概念** - **DOM...

    漂亮的CSS二级竖向导航菜单

    本教程将深入探讨如何创建一个“漂亮的CSS二级竖向导航菜单”。这个菜单具有优雅的下拉效果，使得用户体验更加友好。 首先，我们来理解CSS（层叠样式表）在构建导航菜单中的作用。CSS是一种用于描述HTML或XML（包括...

    CSS3纵向导航二级下拉菜单栏.rar

    本教程将深入探讨如何使用CSS3来构建一个功能完善的纵向导航菜单，并实现二级下拉菜单栏。 首先，我们需要了解HTML结构。一个简单的二级导航菜单通常包含一个`&lt;ul&gt;`列表作为主菜单，其中每个`&lt;li&gt;`元素代表一级菜单...

    仿淘宝纵向菜单

    【仿淘宝纵向菜单】是一种常见的网页设计元素，用于构建类似淘宝网站那样层次分明、易于导航的菜单栏。这种菜单在电子商务网站中尤其常见，因为它能够有效地展示商品分类，帮助用户快速找到他们感兴趣的商品。在本...

    jQuery侧边栏纵向导航菜单展开收缩代码

    本教程将详细介绍如何使用jQuery实现一个具有展开收缩功能的侧边栏纵向导航菜单。 首先，我们需要理解jQuery的基础知识。jQuery是一个JavaScript库，它的目标是简化JavaScript的DOM操作、事件处理和动画。其语法...

    CSS+js无限级折叠导航菜单

    这个技术结合了层叠样式表（CSS）和JavaScript语言，旨在创建一个能够适应多种层次结构的动态导航菜单，既可以横向展示，也可以纵向布局，满足不同网站设计的需求。 首先，CSS在其中起着核心作用，负责菜单的基本...

    div+css纵向导航如何实现且为导航添加超链接

    以下代码实现纵向导航功能，并为导航添加了超链接（用#不可用的超链接代替），如下图所示 复制代码代码如下: &lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...

    纵向多级导航菜单代码.zip

    "纵向多级导航菜单代码.zip" 文件似乎提供了一个实现这种菜单的源代码。 在这个压缩包中，有两个主要文件：`index.html` 和 `static` 文件夹。`index.html` 是HTML文件，它是网页的主体，包含HTML标记来构建页面...

    css实现会折叠、展开的菜单导航栏效果

    总的来说，这个示例展示了如何使用CSS和JavaScript实现一个基本的折叠/展开菜单导航栏，虽然没有进行美化，但其核心逻辑是清晰的。为了适应更多现代浏览器和提升用户体验，可以考虑使用CSS3的过渡效果、Flexbox或...

    CSS3侧边栏卡片式菜单导航.zip

    【CSS3侧边栏卡片式菜单导航】是一种流行的网页设计技术，主要应用于网站的导航菜单。这个技术利用了CSS3的新特性，如过渡（Transitions）、变换（Transforms）和伪类（Pseudo-classes），为用户带来动态、交互性强...

    JavaScript实现鼠标滑过纵向3级米黄色的导航菜单源码

    在这个案例中，"JavaScript实现鼠标滑过纵向3级米黄色的导航菜单源码"是一个利用JavaScript来构建的网页导航菜单。这个菜单在用户鼠标滑过时会展开三级层次，并且具有米黄色的主题风格，提升网站的用户体验。 首先...

    JavaScript实现鼠标滑过带箭头的纵向3级导航菜单源码

    本资源提供了一种JavaScript实现的鼠标滑过带箭头的纵向3级导航菜单的源码，旨在帮助开发者创建具有视觉吸引力且易于操作的多级导航结构。 首先，我们需要理解JavaScript的基本概念。JavaScript是一种广泛使用的轻...

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