最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css实现菜单列表随滚动条指定到对应内容
时间：2022-06-25 09:28:05 编辑：袖梨 来源：一聚教程网
最近写了一个新闻页面，要求列表底部5px的蓝色边框随滚动条的变化对应到指定的内容，同时列表下边框也随着变化，先给大家看下效果图样式
2.编写代码
3.添加样式
.page-news-nav{
width: 100%;
background: #fff;
box-shadow: 0 3px 5px rgba(193,193,193,1);
filter: progid:DXImageTransform.Microsoft.Shadow(color='#c1c1c1', Direction=135, Strength=5,);/*for ie6,7,8*/
-moz-box-shadow:0 3px 5px rgba(193,193,193,1);/*firefox*/
-webkit-box-shadow:0 3px 5px rgba(193,193,193,1);/*webkit*/
}
.news-nav-ul{
margin: 0 auto;
}
.page-news-nav ul li {
float: left;
}
.page-news-nav .news-nav-word{
display: block;
font-size: 14px;
color: #000;
text-align: center;
line-
cursor: pointer;
text-decoration: none;
}
.page-news-nav .nav-word-on{
border-bottom: 5px solid #00a0ea;
}
4.编写js代码
引入jq文件
效果就实现啦！
相关文章
- 《燕云十六声》红尘无眼完成图文攻略 12-25
- 《燕云十六声》阴阳如影完成图文攻略 12-25
- 《燕云十六声》悬檐之下四架椽屋图文攻略 12-25
- 《燕云十六声》2024最新公测时间介绍 12-25
- 《燕云十六声》有没有藏宝阁 12-25
- 《燕云十六声》制作公司介绍 12-25