如何用代码快速制作营销网站底部广告？
当前在很多的旅游网站，底部固定广告已经成为一种常见的形式，可以参看下图。
途牛网底部
携程网底部
以途牛为例，下边我们一起来说一下整个制作流程
显然底部是固定定位的盒子，并且是分为两组，一组为显示状态下，一组为隐藏状态下，并且通过点击可以实现两者之间的切换
第一组
第二组
1. 分别创建两组盒子结构，并添加对应的css样式
第一组盒子宽度为100%，并且定位到底部，第二组盒子根据图片大小来设置盒子大小，并定位在窗口的左下角位置。默认第一组显示在窗口中，第二组移除到窗口的左侧以外，所以需要设置为负值。CSS部分代码如下：
Html部分代码如下：
2. 通过jquery代码来实现两者之间的切换
在第一组盒子中的关闭按钮添加点击事件，点击后让整体盒子向左侧移除场景，往左侧移动的范围是根据宽度宽度来定，而网页的宽度是根据窗口的宽度自适应，所以需要先获取品窗口宽度。当整个盒子隐藏后，需要让第二组盒子从窗口左侧以外进入，在此处用到了animate中的回调函数来实现此效果。
在第二组盒子中，给整个盒子添加点击事件，动画方式和第一次点击相反；第二组盒子往左侧移出窗口以外；第一组盒子从窗口以外重新进入到窗口中，同样在此处也用到了ainimate中的回调函数，为了让两组动画之间时间上产生间距，通过delay方法做了延迟执行。
CSS实现常见元素水平、垂直居中
本文简单介绍如何通过CSS实现常见元素的水平、垂直居中。
- 行内元素
这种情况最简单，只需要将行内元素包括在一个display属性为block的父元素中，并且设置父元素text-align为居中即可
- 块状元素
对块状元素设置相应的外边距即可，外边距左、右设置为auto。
- 多个块状元素①
传统方法，在父元素设置text-align:center; 然后将需要居中的块状元素的display设置为inline-block
- 多个块状元素②
使用flex布局实现，将父元素display设置为flex，同时设置子元素对齐。
- 单行行内元素
将行内元素的 line-height 属性与其父元素的 height 属性设置为相同值，比如都是40px。
- 多行的行内元素
通过设置父元素display属性为table-cell，及其他相关属性解决。
- 已知高度的块状元素
结合元素的position及margin属性，通过定位设置居中，父元素position设置为relative。
注意：如果规定了 !DOCTYPE，则 Internet Explorer 8 （以及更高版本）支持display属性值 \”inline-table\”、\”run-in\”、\”table\”、\”table-caption\”、\”table-cell\”、\”table-column\”、\”table-column-group\”、\”table-row\”、\”table-row-group\”、以及 \”inherit\”。
喜欢就关注支持一下吧。[呲牙][呲牙]
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
