<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>导航菜单</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
ul {
list-style: none;
width: 1000px;
margin: 150px auto 0px;
}
li {
float: left;
width: 100px;
height: 35px;
line-height: 35px;
text-align: center;
color: white;
position: relative;
background-color: rgb(79, 128, 109);
}
.item2 {
display: none;
position: absolute;
left: 0px;
top: 35px;
height: 0px;
width: 100px;
background-color: blue;
}
a {
color: gray;
text-decoration: none;
}
</style>
</head>
<body>
<ul>
<li>
<div class="item1">菜单一</div>
<div class="item2">
<a href="">菜单一一</a><br />
<a href="">菜单一二</a><br />
<a href="">菜单一三</a><br />
</div>
</li>
<li>菜单二</li>
<li>菜单三</li>
<li>菜单四</li>
<li>菜单五</li>
<li>菜单六</li>
<li>菜单七</li>
<li>菜单八</li>
<li>菜单九</li>
<li>菜单十</li>
</ul>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$('li').hover(function(){
$('.item2').css('display', 'block');
$('.item2').animate({height : "110px"});
}, function(){
$('.item2').animate({height : "0px"}, function(){
$('.item2').css('display', 'none');
});
});
</script>
</body>
</html>
相关推荐
本章节我们将深入探讨如何利用CSS+DIV技术来实现网页的局部布局，以达到灵活控制网页元素的目的。在这个过程中，我们将关注两个关键的资源：顶部导航主菜单的图片和购物版块的图片，这些图片可以增强页面的视觉吸引...
首先，CSS用于控制页面的样式和布局。在实现图片局部放大的功能中，我们可以创建一个特殊的CSS类，用于定义放大镜效果。这个类通常包括一个透明的遮罩层和一个浮动的放大窗口。遮罩层覆盖在原始图片上，当用户鼠标...
8. **继承与覆盖**：CSS中的样式继承使得子元素可以从父元素继承样式，而特定条件下的覆盖则可以实现局部样式定制。 9. **CSS预处理器**：如Sass、Less和Stylus等，它们扩展了CSS的功能，如变量、嵌套规则、混合...
例如，使用Grid进行整体布局，Flexbox处理局部内容的对齐和响应式调整，再用CSS的定位属性（position）解决特定元素的定位问题。 此外，CSS还提供了一些高级特性，如媒体查询（Media Queries）、变量（CSS ...
3. **表格的布局**：局部布局是指在表格中通过`colspan`和`rowspan`属性来合并单元格，实现更复杂的布局。`colspan`表示跨列数，`rowspan`表示跨行数。 4. **CSS样式应用**：通过CSS可以对表格进行更细致的美化，...
本主题将详细介绍如何使用jQuery和CSS来实现这种“模糊图片局部清晰”效果。 首先，我们需要了解CSS中的`filter`属性。这个属性允许我们对元素应用各种视觉效果，其中包括模糊效果。通过设置`filter: blur()`，我们...
本案例展示了如何使用Div+CSS布局技术来创建一个光影世界最近活动局部页面。页面的制作过程包括前期准备、页面布局规划、页面制作和测试等步骤。 6.4 实训——制作家具商城产品明细局部页面 本实训展示了如何使用...
**DIV+CSS布局入门** 在传统的HTML布局中，表格(table)常被用来组织页面内容，但这种方法会导致代码冗余，且不利于SEO和页面性能。而DIV+CSS布局则是将内容（HTML）和表现（CSS）分离，使得页面结构更清晰，代码更...
`css`目录可能包含着插件的样式文件，其中可能定义了幻灯片的布局、颜色、字体等视觉元素。`fonts`目录可能存放了插件需要用到的特殊字体，以保证在各种设备上的一致显示。`img`目录则存储了幻灯片中的图像资源，...
《CSS从入门到精通》共分为四篇，循序渐进的讲述了网页基础知识和CSS布局的实战技术，从基本概念到具体实践、从对网页的认识到制作网页、从使用CSS进行网页局部的设计到进行整个网站的布局制作都进行了详细的阐述，...
在这个名为“TP网页局部布局PPT学习教案”的教程中，主要讲解了如何利用HTML的结构元素和CSS的样式规则来创建一个新闻列表和实现复杂的布局效果。 首先，教程介绍了如何使用无序列表（`<ul>`）和列表项（`<li>`）来...
(1)浮动 : - 缺点 :浮动是脱离文档流的，有些时候需要清除浮动，需要很好的处理浮动周边元素的关系 - 优点 :兼容性比较好 ... - 新技术，CSS3下一代局部方案 2、如果去掉"高度已知"， 以上哪种方案同样适用？
HTML5 CSS3版本的瀑布流布局实例，好像目前很流行这种图片布局的方式，局部看上去很零乱，但整体看上去很自然。CSS3版本的图片瀑布流可很好的应用于手机APP中，当然本示例是在PC端，两者均有很好的表现。 本瀑布...
它允许我们控制页面布局，定义字体、颜色、大小、间距等视觉元素。在创建光照效果时，CSS3引入了新的属性和功能，如阴影（box-shadow和text-shadow）、渐变（linear-gradient和radial-gradient）以及滤镜（filter）...
CSS4可能进一步强化变量的作用域，使得局部变量和全局变量的管理更为清晰。 4. **Grid布局**：CSS Grid是一种二维布局系统，能轻松创建复杂的网格布局。CSS4可能会在现有基础上优化其性能和易用性。 5. **Flexbox...
有实用说明，布局符合W3C标准，采用局部刷新Ajax,三层架构，稳定性高，开发语言c#，数据库Sql Server，不管是新手还是有开发经验的同学，都是帮助你提高和走向标准化之路的好帮手，本人资源信誉保障，因为这个很不错...
【DIVCSS标准化网页布局】是一种现代网页设计技术，它将内容和样式分离，提高了网页的可维护性和可访问性。`<div>`标签是HTML中的一个区块元素，全称为division，意为“区分”。它作为一个容器，可以包含其他HTML...
《精通CSS+DIV网页样式与布局》 在网页设计领域，CSS（Cascading Style Sheets）和DIV元素的结合使用是构建美观、响应式布局的关键技术。CSS是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言...
- **CSS Modules**：局部CSS变量和选择器，减少样式冲突。 - **PostCSS**：通过插件转换CSS，支持未来特性。 9. **CSS动画与过渡** - **`@keyframes`**：定义动画的过程。 - **`animation`**：应用于元素，控制...