使用JQuery快速高效制作网页交互特效第七章上机一

最新推荐文章于 2020-02-26 12:02:48 发布

不觉清倦

最新推荐文章于 2020-02-26 12:02:48 发布

阅读量3.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：计算机文章标签： jQuery

本文链接：https://blog.youkuaiyun.com/weixin_44269168/article/details/94327483

这篇博客介绍了如何使用jQuery来制作网页交互特效。通过设置CSS样式和选择器，如`nth-of-type`，实现导航栏元素的样式变换，包括背景图片的位置和圆角效果。此外，还涉及了元素的隐藏与显示，增强了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

*{margin: 0; padding:0; font-size: 12px;}
ul,ol,li{list-style: none;}
#nav{width: 100px; margin: 0 auto;}
#nav li{height:36px;}
#nav li span{
display: block;
float: right;
width: 35px;
height: 35px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
background: #7a6e6e url("…/Image/toolbars.png") no-repeat;
}
#nav li:nth-of-type(1) span{background-position: 0px -15px;}
#nav li:nth-of-type(2) span{background-position: 0px -57px;}
#nav li:nth-of-type(3) span{background-position: 1px -106px;}
#nav li:nth-of-type(4) span{background-position: 0px -156px;}
#nav li:nth-of-type(5) span{background-position: 0px -200px;}
#nav li:nth-of-type(6) span{background-position: 2px -265px;}
#nav li p{
height: 35px;
text-align: left;
background: #c81623;
color: #ffffff;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
line-height: 35px;
padding-left: 10px