前端跟随浏览器滚动代码解析

2019/11/24 10:50:00  前端知识(更多)  315阅

准备:CSS/HTML

CSS代码:

.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>
把#符号删掉

演示地址:前端跟随浏览器滚动代码解析
分享至:
good 0
  自助站长建站奖励活动!

发表评论

文明评论,重在参与

暂无评论!
返回上级 返回首页