前端跟随浏览器滚动代码解析
2019/11/24 10:50:00 前端知识(更多) 4262阅准备:CSS/HTMLCSS代码:
.fixed{
position: fixed; /*滚动属性*/
background: #fff; /*背景颜色*/
width: 100%; /* 浏览器宽度 100%为当前浏览器宽度 */
z-index: 999; /* 样式置前 (防止被其他样式掩盖)*/
top: 0; /*设置位置 top:顶部,bottom:底部,left:左边,right:右边*/
height: 55px; /*高度*/
line-height: 55px; /*调整样式内对齐*/
border-bottom: 1px solid #eee; /*下划线*/
}
.left{
float: left; /*靠左*/
}
.right{
float: right; /*靠右*/
}
.height{ /*该样式为演示可忽略*/
display: block;
margin-bottom: 300%;
width: 100%;
}
把上面代码添加到:
如:
<#style type="text/css">
.right{
float: right; /*靠右*/
}
<#/style>
HTML代码:
<#div class="fixed">
<#div class="left">左<#/div>
<#div class="right">右<#/div>
<#/div>
<#div class="height"><#/div>
把#符号删掉
演示地址:前端跟随浏览器滚动代码解析
发表评论