`
thunderbow
  • 浏览: 157327 次
  • 性别: Icon_minigender_1
  • 来自: beijing
社区版块
存档分类
最新评论

纯CSS+DIV实现的竖向菜单

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>纯CSS+DIV实现的竖向菜单</title> 
<style> 
.menu{ 
width:200px; 
} 
.menu a,.menu a:visited{ 
text-decoration:none;/*文字无下滑线*/ 
text-align:center;/*文字水平居中对齐*/ 
color:#c00;/*红色文字*/ 
display:block;/*设置为块状元素*/ 
padding:4px;/*内边距*/ 
background:#FFF;/*背景色*/ 
border: 1px solid #fff;/*与背景色相同边框,防止跳动*/ 
width:130px; 
position:relative;/*使用相对定位*/ 
} 
.menu a:hover{ 
border:solid 1px #c00;/*边框颜色红色*/ 
} 
.menu a span{ 
display:block;/*设置为块状元素*/ 
position:absolute;/*使用绝对定位*/ 
width:0px;/*宽度为0*/ 
height:0px;/*高度为0*/ 
border:solid 8px #fff;/*设置默认边框样式*/ 
top:4px;/*竖直方向的定位*/ 
overflow:hidden; 
} 
.menu a span.left{ 
border-left-color:#c00; 
left:8px; 
} 
.menu a span.right{ 
border-right-color:#c00; 
right:8px; 
} 
</style> 
</head> 

<body> 
<div class="menu"> 
    <a href="#"> 
      <span class="left"></span> 
      首页 
      <span class="right"></span> 
    </a> 
        <a href="#"> 
          <span class="left"></span> 
          新闻 
          <span class="right"></span>          </a> 
        <a href="#"> 
          <span class="left"></span> 
          产品   
          <span class="right"></span>  
          </a> 
</div> 
</body> 
</html>

 

分享到:
评论

相关推荐

    css+div+js实现简单导航栏菜单栏

    "CSS+Div+JS实现简单导航栏菜单栏"是一个基础但实用的主题,它涵盖了网页布局、样式设计以及交互功能的实现。接下来,我们将深入探讨这三个关键技术在创建导航栏菜单栏中的应用。 首先,CSS(层叠样式表)是用于...

    纯DIV+CSS制作的竖向三级弹出菜单代码

    知识点:纯DIV+CSS实现竖向三级弹出菜单 标题与描述中提到的“纯DIV+CSS制作的竖向三级导航弹出菜单代码”是指在网页设计中,不借助JavaScript等脚本语言,仅通过HTML的`div`元素和CSS样式表来实现一个具有竖向布局...

    精美css+div网站实例源码

    6. **JavaScript交互**: 虽然主要标签是CSS和div,但源码可能也包含了JavaScript代码,用于实现动态效果和用户交互,比如导航菜单的展开折叠、图片轮播等。 7. **Web标准和最佳实践**: 学习这些源码时,可以观察...

    div+css+js实现菜单的收缩与展开

    div+css+js实现菜单的收缩与展开

    精通CSS+DIV 书中实例和源代码

    《精通CSS+DIV》是一本深入探讨网页样式与布局技术的专业书籍,其核心内容围绕着如何利用CSS(层叠样式表)和DIV(定义文档结构的HTML元素)来实现高效、美观的网页设计。这本书提供了5个完整的网站设计案例,通过...

    《精通CSS+DIV网页样式与布局》光盘源码

     第8章 用CSS制作实用的菜单   8.1 项目列表   8.2 无需表格的菜单   8.3 菜单的横竖转换   8.4 菜单实例一:百度导航条   8.5 菜单实例二:流行的Tab菜单   第9章 CSS滤镜的应用   9.1 滤镜...

    实用纯css+div二级图片导航菜单

    综上所述,"实用纯css+div二级图片导航菜单"的实现涉及到了CSS布局、HTML结构、伪类选择器、图片精灵、响应式设计、过渡效果以及访问性等多个方面。通过掌握这些知识点,开发者能够创建出既美观又功能完善的无脚本...

    css+div 菜单

    在创建CSS+Div菜单时,一些关键的样式属性包括: 1. `display`: 控制元素的显示方式,如`inline-block`或`block`,这会影响菜单项的排列方式。 2. `position`: 设定元素的位置,如`relative`、`absolute`或`fixed`...

    css菜单css+div

    css+div css菜单 横向菜单 javascript+div+css

    div+css+js菜单

    div+css+js菜单 div+css+js菜单 div+css+js菜单 div+css+js菜单 div+css+js菜单 div+css+js菜单 div+css+js菜单 div+css+js菜单 div+css+js菜单

    CSS+DIV常用方法说明

    3. **浮动布局**:通过设置`float`属性为`left`或`right`,可以使`&lt;div&gt;`元素向左或向右浮动,从而实现并排显示的效果。然而,浮动元素会脱离标准文档流,可能影响其他元素的布局,需要通过清除浮动(`clear`)来避免...

    css +div二级菜单红色大气

    如果使用纯CSS实现,`:hover`可以应用于一级菜单项,当鼠标悬停时,二级菜单显示;移开鼠标时,二级菜单隐藏。这种方式简单且不需要JavaScript支持,但可能在触摸设备上表现不佳。如果使用JavaScript,可以通过添加...

    CSS+div+js组合强大实现超酷菜单

    是一款CSS+div+js组合强大实现超酷菜单,比较简洁灵活,

    css+div实现精美导航条 横向排列下拉子菜单

    - 虽然纯CSS可以实现基本的下拉菜单,但JavaScript可以提供更复杂的功能,如动态加载、延迟显示或触摸设备的支持。 - 使用JavaScript事件监听器,如`addEventListener`,可以在用户点击或触摸菜单项时触发自定义...

    CSS+DIV类似于MAC菜单

    通过CSS和DIV,开发者可以模仿这种设计,实现自定义的菜单栏,具有类似的功能和视觉效果。 首先,CSS在创建这种效果中起到关键作用。它可以用来定义菜单栏的外观,如背景色、边框、阴影、字体样式等。例如,使用`...

    CSS+DIV网页布局实例40例.rar

    《CSS+DIV网页布局实例40例》是一个深入学习网页布局技术的重要资源,它涵盖了CSS(层叠样式表)和DIV元素在构建现代网页时的多种应用场景和技巧。本资源包含40个独立的实例,旨在帮助用户从实践中掌握网页布局的...

    css+div极酷漂亮滑动菜单

    综上所述,"css+div极酷漂亮滑动菜单"是一种利用CSS和HTML div元素实现的交互式菜单设计方法,它通过CSS的样式控制和布局功能,以及动态效果的实现,为用户提供美观且易用的导航体验。掌握这一技术对于提升网站的...

    纯div+css制作的弹出菜单

    本主题将深入探讨如何使用纯div+css技术来构建一个水平三级的横向弹出菜单,无需JavaScript或其他复杂的编程语言,只需HTML结构和CSS样式即可实现。 首先,让我们了解基本的HTML结构。一个弹出菜单通常由主菜单项...

    CSS+DIV实现的纵向垂直滑动门效果

    本文将详细介绍如何使用CSS和DIV来实现一个纵向垂直滑动门效果的菜单,这种效果常用于后台管理系统,能够有效地节省空间并提供友好的用户体验。 #### 二、核心知识点解析 ##### 1. 基本结构搭建 在给定的部分内容...

Global site tag (gtag.js) - Google Analytics