<!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+CSS实现竖向三级弹出菜单 标题与描述中提到的“纯DIV+CSS制作的竖向三级导航弹出菜单代码”是指在网页设计中，不借助JavaScript等脚本语言，仅通过HTML的`div`元素和CSS样式表来实现一个具有竖向布局...
6. **JavaScript交互**: 虽然主要标签是CSS和div，但源码可能也包含了JavaScript代码，用于实现动态效果和用户交互，比如导航菜单的展开折叠、图片轮播等。 7. **Web标准和最佳实践**: 学习这些源码时，可以观察...
div+css+js实现菜单的收缩与展开
《精通CSS+DIV》是一本深入探讨网页样式与布局技术的专业书籍，其核心内容围绕着如何利用CSS（层叠样式表）和DIV（定义文档结构的HTML元素）来实现高效、美观的网页设计。这本书提供了5个完整的网站设计案例，通过...
第8章 用CSS制作实用的菜单 8.1 项目列表 8.2 无需表格的菜单 8.3 菜单的横竖转换 8.4 菜单实例一：百度导航条 8.5 菜单实例二：流行的Tab菜单 第9章 CSS滤镜的应用 9.1 滤镜...
综上所述，"实用纯css+div二级图片导航菜单"的实现涉及到了CSS布局、HTML结构、伪类选择器、图片精灵、响应式设计、过渡效果以及访问性等多个方面。通过掌握这些知识点，开发者能够创建出既美观又功能完善的无脚本...
在创建CSS+Div菜单时，一些关键的样式属性包括： 1. `display`: 控制元素的显示方式，如`inline-block`或`block`，这会影响菜单项的排列方式。 2. `position`: 设定元素的位置，如`relative`、`absolute`或`fixed`...
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菜单
3. **浮动布局**：通过设置`float`属性为`left`或`right`，可以使`<div>`元素向左或向右浮动，从而实现并排显示的效果。然而，浮动元素会脱离标准文档流，可能影响其他元素的布局，需要通过清除浮动(`clear`)来避免...
如果使用纯CSS实现，`:hover`可以应用于一级菜单项，当鼠标悬停时，二级菜单显示；移开鼠标时，二级菜单隐藏。这种方式简单且不需要JavaScript支持，但可能在触摸设备上表现不佳。如果使用JavaScript，可以通过添加...
是一款CSS+div+js组合强大实现超酷菜单，比较简洁灵活，
- 虽然纯CSS可以实现基本的下拉菜单，但JavaScript可以提供更复杂的功能，如动态加载、延迟显示或触摸设备的支持。 - 使用JavaScript事件监听器，如`addEventListener`，可以在用户点击或触摸菜单项时触发自定义...
通过CSS和DIV，开发者可以模仿这种设计，实现自定义的菜单栏，具有类似的功能和视觉效果。 首先，CSS在创建这种效果中起到关键作用。它可以用来定义菜单栏的外观，如背景色、边框、阴影、字体样式等。例如，使用`...
《CSS+DIV网页布局实例40例》是一个深入学习网页布局技术的重要资源，它涵盖了CSS（层叠样式表）和DIV元素在构建现代网页时的多种应用场景和技巧。本资源包含40个独立的实例，旨在帮助用户从实践中掌握网页布局的...
综上所述，"css+div极酷漂亮滑动菜单"是一种利用CSS和HTML div元素实现的交互式菜单设计方法，它通过CSS的样式控制和布局功能，以及动态效果的实现，为用户提供美观且易用的导航体验。掌握这一技术对于提升网站的...
HTML+CSS+DIV 网页设计与布局 本教案旨在教授学生 HTML+CSS+DIV 网页设计与布局的基本概念和技术，涵盖网页设计的基本元素、HTML 基本概念、网页文字和图片、网页基本编辑、表格、多媒体、滚动字幕和列表等方面的...
本主题将深入探讨如何使用纯div+css技术来构建一个水平三级的横向弹出菜单，无需JavaScript或其他复杂的编程语言，只需HTML结构和CSS样式即可实现。 首先，让我们了解基本的HTML结构。一个弹出菜单通常由主菜单项...