`
adong
  • 浏览: 35986 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

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

阅读更多
<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;,即把每个值之间空格写成了逗号,效果就出不来了。
分享到:
评论

相关推荐

    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实现一个三级横向导航菜单。 首先,我们需要理解基本的HTML结构。一个简单的导航菜单通常由`&lt;ul&gt;`(无序列表)和`&lt;li&gt;`(列表项)元素组成。对于多级菜单,我们可以嵌套`&lt;ul&gt;`和`...

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

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

Global site tag (gtag.js) - Google Analytics