发布网友 发布时间:2022-04-20 09:35
共15个回答
懂视网 时间:2022-04-22 00:17
效果一:1.首先,整个底部悬浮通栏广告是固定在浏览器的底部,随着浏览器的滚动,底部悬浮广告始终在浏览器窗口中。这里有几个关键点:通栏,固定,黑色。
所以:首先我们必须给悬浮通栏广告整体一个100%的宽度,其次给它设定固定定位,固定在浏览器底部,背景色为黑色,透明度为0.7。
1 .footfixed{ 2 width:100%; 3 height:140px; /* 图片大小,宽度必须100% */ 4 position:fixed; 5 bottom:0; /*固定定位,固定在浏览器底部。*/ 6 background: #081628; 7 opacity: .7; /*Chrome、Safari、Firefox、Opera */
filter:alpha(opacity=70);/* 针对 IE8 以及更早的版本 */ 8 }
2. 底部悬浮通栏广告的图片,可以看出比背景要高(背景height:140px,内图height: 218px)
且整体内容部分居中。
1 .fimg { 2 height: 218px; /*注意此处图片高度高于140px*/ 3 width: 1190px; 4 margin: 0px auto; /*整体内容部分居中*/ 5 }
然而由于底部悬浮广告内容部分高度218px大于设定的父元素的高度140px,高度相差78px
产生如下效果,图片没能完成的展现出来:
这需要图片上移78px,需要对整个底部悬浮广告内容部分整体做相对定位
1 .fimg { 2 position: relative; /*父元素相对定位*/ 3 top:-78px; 4 }
结果:
这里有个问题:
图片不是很清楚,因为加了透明度。
解决这个问题,用一个div来设置背景,而不在.footfixed里设置背景色。
1
1 .ftbj{ 2 height:100%; 3 width:100%; 4 position: absolute; 5 top: 0; 6 left: 0; 7 background:#081628; 8 opacity: .7;/*Chrome、Safari、Firefox、Opera */
9 filter: alpha(opacity=70);}/* 针对 IE8 以及更早的版本 */ 10 .footfixed{ 11 width:100%; 12 height:140px; /* 图片大小,宽度必须100% */ 13 position:fixed; 14 bottom:0; /*固定定位,固定在浏览器底部。*/ 15 }
这样图片效果:
这样就清楚多了。
3.其中关闭按钮的效果:
首先按钮是由图片通过定位实现固定在整个底部悬浮广告图片右上角。需设定图片大小,图片引入路径,需要对整个底部悬浮广告内容部分整体做相对定位,关闭按钮是做绝对定位
1 .fimg { 2 position: relative; /*父元素相对定位*/ 3 } 4 .close { 5 width: 33px; 6 height: 33px; /* 图片大小 */ 7 background: url(images/close.png) no-repeat center center; /*图片引入路径 */ 8 position: absolute; 9 right: 15px; 10 top: 85px; /*通过定位实现固定固定在整个底部悬浮广告图片右上角 */ 11 }
其次,鼠标移到关闭按钮上,有小手出现,关闭按钮旋转。
为了产生动画效果,加transition
1 .close { 2 transition: .5s; 3 cursor: pointer; /*通过定位实现固定固定在整个底部悬浮广告图片右上角 */ 4 } 5 .close:hover { 6 transform: rotate(180deg); 7 -ms-transform: rotate(180deg); /* IE 9 */ 8 -moz-transform: rotate(180deg); /* Firefox */ 9 -webkit-transform: rotate(180deg); /* Safari 和 Chrome */ 10 -o-transform: rotate(180deg); /* Opera */ 11 } /*旋转 图片*/
然后是点击关闭按钮,广告向下消失,侧边出现效果
1 #fimg-min{ 2 width: 80px; 3 height: 140px; /* 图片大小 */ 4 position: fixed; 5 bottom: 0px; 6 left: 0px; /*定位*/ 7 display: none; /*隐藏*/ 8 cursor: pointer; /*小手 */ 9 }
点击图中圈出来的图标,底部广告再次出现
1
注:在ie9以下浏览器中关闭按钮图片旋转效果未能实现。
注意:本文为原创,转载请以链接形式标明本文地址 ,谢谢合作。
本文地址:http://www.cnblogs.com/wanghuih/p/5546441.html
热心网友 时间:2022-04-21 21:25
1、打开浏览器,然后点击菜单上方的“工具--Internet选项”项;
2、在弹出来的属性界面中,切换到“安全”选项卡下,然后点击“自定义级别”按钮;
3、接着在弹出来的框中找到并将“Java小程序脚本”和“活动脚本”禁用,然后点击确定即可
热心网友 时间:2022-04-21 22:43
XP SP2的系统都能拦广告窗口,要是无故出广告窗口,那可能是你的机器有流氓软件病毒引起的,下个瑞星卡卡看一下吧,再杀下毒热心网友 时间:2022-04-22 00:18
打开IE窗口,状态栏右方一排小方格,点第二个,选启用弹出窗口阻止程序即可。热心网友 时间:2022-04-22 02:09
你好 : 我的建议是先到热心网友 时间:2022-04-22 04:17
付费内容限时免费查看回答您好,很开心能回答您的问题。您说的应该是如果拦截电脑上弹出的窗口吧。
以windows10为例,给您描述一下:
1.首先打开自己电脑中的控制面板,在控制面板找到‘网络和Internet’选项,点击进入页面。
2.然后在‘网络和Internet’选项面板中,找到‘Internet选项’,进入到选项面板。
3.接下来点击‘Internet选项’还会跳出出一个界面框,在界面框的上排功能栏目中找到‘隐私’。
4.最后在隐私界面中,将启用弹出窗口阻止程序前面的框打钩,这样电脑桌面广告拦截就设置成功了。
您可以试试哈,希望能帮助到您哈
热心网友 时间:2022-04-22 06:42
下个火狐浏览器配合拦截广告的的插件,你只要点开哪个拦截插件的工具,点击要拦截的广告查看属性,把后缀和前缀的东东加入拦截规则里以后就可以拦截所有该后缀或前缀属性的东东了热心网友 时间:2022-04-22 09:23
IE的窗口的--工具>弹出窗口阻止程序>弹出窗口阻止程序设置,然后设置就好了。热心网友 时间:2022-04-22 12:21
Internet选项-隐私-有个“弹出窗口程序”打上勾就行了热心网友 时间:2022-04-22 15:52
用QQ的TT浏览器吧,上面自带屏蔽广告窗口弹出,悬浮的广告热心网友 时间:2022-04-22 19:40
如果不想装软件之类的,可以在INTERNET选项中,选"安全-自定义级别-设置最高级别"就可以了热心网友 时间:2022-04-22 23:45
去网上下个上网助手,要不装个IE7.0,好象XPsp2就能拦广告窗口啊热心网友 时间:2022-04-23 04:06
你的机子是不是XPsp2??自带的IE浏览器是不是ie6.0?它本身就能拦截探出广告。工具-探出窗口拦截程序-...热心网友 时间:2022-04-23 08:44
晕~~~~~热心网友 时间:2022-04-23 13:39
装个麦咖啡吧他对防毒防软件很好的