利用css设置一个下拉菜单
.a {
position: relative; //position绝对位置 relative 对象不可层叠
display: inline-block; //行内元素可以设置宽度和高度地块元素的属性
}
.b {
display: none;
position: absolute; //absolute是绝对定位，relative是相对定位
background-color: #f9f9f9;//颜色
min-width: 160px;//最小宽度
padding: 12px 16px;//内边距
}
.a:hover .b { //hover悬停事件 就是鼠标在这个上会变样子
display: block; //会变成块级元素 不会在一行
}
html
</head>
<body>
<h2>鼠标移动后出现下拉菜单</h2>
<p>将鼠标移动到指定元素上就能看到下拉菜单。</p>
<div class="a">
<span>鼠标移动到我这！</span>
<div class="b">
<p>高帆</p>
<p>www.915494670@qq.com</p>
</div>
</div>
span 没有固定的格式 他是一个行内元素
:contains 选择器可以选取包含指定字符串的元素
$("p:contains(is)")选所有带is的p元素
$(document).ready(function(){
$("p:contains(X)").css("background-color","black");
});
<body>
<h1> My Homepage</h1>
<p class="intro">My name is Gaofan</p>
<p>My best friend is XX</p>
</body>
它会选择p标签带有X的元素给他设为黑色
可以用jquery animate方法 做一个简单的动画效果
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
<body>
<button>开始动画</button>
<div class="g">l</div>
css
.g{
background:black;
height:100px
width:100px;
position:absolute;
}
这个DIV块会到 居左250px时停下来
相关推荐
本主题聚焦于“纯CSS下拉菜单”，这是一种不依赖JavaScript实现的下拉菜单技术，主要利用CSS（层叠样式表）来创建动态效果。在实际应用中，这种菜单可能不是最通用的解决方案，但对那些希望深入了解CSS特性和动画...
在网页设计中，CSS下拉菜单是一个不可或缺的元素，它为用户提供了一种高效且直观的导航方式。这个压缩包包含了19个精心设计和实现的CSS下拉菜单，每个都有其独特的风格和交互效果，旨在提升用户体验并美化网站界面。...
而CSS下拉菜单则是导航菜单中的一个高级应用，为用户提供更便捷的交互体验。本资源"CSS下拉菜单.rar"显然是关于如何使用CSS来创建动态、响应式的下拉菜单。 在创建CSS下拉菜单时，我们通常会结合HTML和CSS技术，...
这份"纯CSS下拉菜单代码"提供了实现这一功能的简单而实用的方法，尤其适合那些希望避免JavaScript或者jQuery依赖的前端开发者。 纯CSS下拉菜单的实现原理主要基于CSS的选择器、定位以及过渡效果。以下是一些关键...
纯CSS下拉菜单 不需要JS 效果不错！ 从某外国网站上直接弄下来的！
经典的蓝色CSS下拉菜单
纯CSS下拉菜单主要利用CSS的盒模型、定位（positioning）、选择器（selectors）以及过渡（transitions）等特性。下面我们将逐一探讨这些关键知识点： 1. **盒模型**：CSS的盒模型是理解布局的基础，包括content、...
本教程主要关注的是使用`DIV+CSS`创建下拉菜单，这是一种常见的交互式导航元素，对于网站用户体验至关重要。 下拉菜单的设计主要依赖于CSS的`position`属性、`display`属性以及一些过渡和动画效果。在IE6.0及以上...
本篇将深入探讨CSS下拉菜单的设计原理、实现方法以及常见技巧。 首先，理解基本的HTML结构是创建下拉菜单的基础。一个简单的下拉菜单通常由`<ul>`（无序列表）和`<li>`（列表项）元素构建，其中`<li>`元素内嵌套另...
纯css下拉菜单兼容主流浏览器IE6+
在网页设计中，CSS下拉菜单是一个常见的交互元素，它为用户提供了一种便捷的方式来访问页面的多层次导航。本文将深入探讨如何使用CSS实现各种下拉菜单效果，以及如何通过优化来提升用户体验。 首先，让我们来看一个...
以上就是一个基本的CSS下拉菜单实现。当然，实际项目中可能需要考虑更多细节，比如响应式布局、多级下拉菜单、鼠标离开时的延迟隐藏等。这需要通过更复杂的CSS选择器和JavaScript来实现。在提供的压缩包文件中，应该...
纯CSS下拉菜单效果的实现主要依赖于CSS的布局、选择器和过渡动画属性。通过巧妙地应用这些技术，我们可以创建出功能完备且具有良好用户体验的下拉菜单，无需JavaScript的介入。对于前端开发者来说，熟练掌握这些CSS...
《CSS下拉菜单设计专家：Visual Infinite Menus深度解析》 在网页设计中，下拉菜单作为导航系统的重要组成部分，其美观性和功能性至关重要。Visual Infinite Menus是一款专注于CSS下拉菜单设计的专业工具，它以其...
在网页设计中，CSS下拉菜单是一个非常常见且实用的功能，它使得网站的导航更加直观、易用。本文将深入探讨“不错的CSS下拉菜单”的实现原理、设计技巧以及优化方法。 一、基本原理 CSS（层叠样式表）是用于控制...
总结一下，创建一个好看的js+css下拉菜单主要涉及以下几个步骤： 1. 设计HTML结构，包括主菜单和子菜单。 2. 使用CSS设置样式，包括隐藏和显示子菜单的逻辑，以及美化菜单的外观。 3. 添加JavaScript（这里使用...
本文将详细探讨如何创建一个支持多种浏览器的纯CSS下拉菜单，以及这种技术的重要性和优势。 首先，理解“纯CSS”意味着我们不依赖JavaScript或者其他外部库来实现下拉菜单的功能，而是完全利用CSS（层叠样式表）来...
### 如何创建CSS下拉菜单：深入解析与实践 在网页设计中，下拉菜单是一种常见的导航元素，它不仅能够节省页面空间，还能提供清晰的导航结构，提升用户体验。本文将详细解读如何利用CSS实现一个功能完备且美观的下拉...
在实现div+css下拉菜单时，关键知识点包括： 1. **CSS盒模型**：理解CSS的边距、填充、边框以及内容区域如何影响元素尺寸，这对菜单的布局至关重要。 2. **定位（positioning）**：通常使用`relative`、`absolute`...