最新下载
热门教程
- 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文件
效果就实现啦！
相关文章
- 人们熟悉的寄居蟹属于以下哪种分类 神奇海洋11月21日答案 11-21
- 第五人格11.22共研服有什么更新 11月22日共研服更新内容介绍 11-21
- 原神恰斯卡怎么培养 11-21
- 无期迷途四星装束是谁 11-21
- 王者荣耀帝丹高中校服怎么获得 11-21
- 光遇姆明季后续版本怎么玩 11-21