最新下载
热门教程
- 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文件
效果就实现啦！
相关文章
- 暗喻幻想布丽吉塔设施完工时间说明 10-31
- 三国志8重制版居民情感作用介绍说明 10-31
- 三国志8重制版游戏灾害效果介绍说明 10-31
- 三国志8重制版武将不同状态区别说明 10-31
- 三国志8重制版武将阶级提升方法分享 10-31
- 三国志8重制版武将不同阶级作用说明 10-31