html5 网页底部浮动层,滚动条在内容页翻页到指定ID时显示最下方浮动DIV层的特效...

Merryedison

于 2021-06-20 13:15:07 发布

阅读量393

点赞数

文章标签： html5 网页底部浮动层

这段代码展示了如何使用CSS Grid进行网页布局，创建一个12列的响应式网格系统。网格元素左右间距为5px，宽度根据所选列数动态调整。当页面滚动到距底部一定距离时，底部工具条会以平滑效果显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

New page

/* `Grid */

.grid {

margin-left: auto;

margin-right: auto;

width: 1200px;

}

/* `Grid >> Global */

.grid_1,

.grid_2,

.grid_3,

.grid_4,

.grid_5,

.grid_6,

.grid_7,

.grid_8,

.grid_9,

.grid_10,

.grid_11,

.grid_12 {

display: inline;

float: left;

margin-left: 5px;

margin-right: 5px;

}

/* `Grid >> 12 Columns */

.grid .grid_1 {

width: 90px;

}

.grid .grid_2 {

width: 190px;

}

.grid .grid_3 {

width: 290px;

}

.grid .grid_4 {

width: 390px;

}

.grid .grid_5 {

width: 490px;

}

.grid .grid_6 {

width: 590px;

}

.grid .grid_7 {

width: 690px;

}

.grid .grid_8 {

width: 790px;

}

.grid .grid_9 {

width: 890px;

}

.grid .grid_10 {

width: 990px;

}

.grid .grid_11 {

width: 1090px;

}

.grid .grid_12 {

width: 1190px;

}

/*Grid End*/

.clear {

clear: both;

display: block;

overflow: hidden;

visibility: hidden;

width: 0;

height: 0;

}

.clearfix:before,

.clearfix:after,

.grid:before,

.grid:after {

content: '.';

display: block;

overflow: hidden;

visibility: hidden;

font-size: 0;

line-height: 0;

width: 0;

height: 0;

}

.clearfix:after,

.grid:after {

clear: both;

}

.clearfix,

.grid {

zoom: 1;

}

body{background-color: #369;}

/*以上的CSS不用理会*/

* {

_background-image: url('about:blank');

_background-attachment: fixed;

}

.footer-bar {

bottom: 0px;

left: 0px;

width: 100%;

height: 120px;

background-color: #f1f1f1;

border-top: #ddd 1px solid;

position: fixed;

z-index: 9998;

_bottom: auto;

_position: absolute;

_top: expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);

}

占位符

$(function(){

$('.footer-bar').hide(0);

$(window).scroll(function(){

var scrollId = $('.footer').offset().top - $(window).height();

if ($(window).scrollTop() > scrollId)

$('.footer-bar').slideDown('slow');

else

$('.footer-bar').slideUp('slow');

});

//-->