adobe dreamweaver
新建html文档。
书写css代码。* { margin: 0; padding: 0; list-style: none; }img { border: 0; }body { text-align: left; font: 12px/1.5em \5B8B\4F53, Arial, Helvetica, sans-serif; color: #333; background: #F7F7F7; }.box_os .os_x, .box_os .osqq, .ico_os, .ico_gt, .ico_pp, .osqq .qq { background: url(../images/kf.gif) no-repeat; }.box_os { height: auto; overflow: hidden; width: 131px; position: fixed; right: 0; top: 44px; _position: absolute; z-index: 9999; display: none; }.box_os .os_x { background-color: #f7f7f7; background-position: 2px 2px; width: 18px; height: 20px; float: right; display: inline; cursor: pointer; }.box_os .osqq { width: 129px; border: 1px solid #D1D1D1; background-color: #fff; background-position: 0 -120px; clear: both; padding: 37px 0 8px 0; text-align: center; }.box_os .osqq p { height: auto; line-height: 20px; width: 129px; margin-top: 8px; }.box_os .osqq p strong { color: #666; }.box_os .osqq img { padding: 7px 0 3px 0; }.box_os .osqq p em { color: #999; display: block; }.box_os .osqq p span { color: #547816; display: block; }.box_os .osqq .qq { background-position: -140px -120px; display: block; width: 99px; height: 26px; margin: 0 auto; margin-top: 8px; cursor: pointer; }.acbox { width: 130px; overflow: hidden; }.acbox .ico_gt { background-position: -60px 0; border: 1px solid #299ec0; border-top: 0; cursor: pointer; width: 60px; height: 33px; float: right; }.acbox .ico_pp { background-position: -60px -60px; border: 1px solid #81b140; border-top: 0; cursor: pointer; width: 60px; height: 33px; float: right; margin: 0 2px; }.onlineService { background: none; display: none; width: 39px; *width:84px;height: 178px; ; position: fixed; right: 0; top: 44px; _position: absolute; }.onlineService .ico_os { background-position: -2px -20px; border: 1px solid #c7c7c7; cursor: pointer; width: 39px; height: 98px; float: right; }.onlineService .ico_gt { background-position: right 0; border: 1px solid #299ec0; cursor: pointer; width: 39px; height: 37px; float: right; clear: both; }.onlineService .ico_pp { background-position: right -60px; border: 1px solid #81b140; cursor: pointer; width: 39px; height: 37px; float: right; margin: 0 0 1px 0; clear: both; }.box_os .osqq p span a { color: #557917; }
书写并添加js代码。$(function(){ var _userAgent = window.navigator.userAgent.toLowerCase(); if(_userAgent.indexOf('android')<0 && _userAgent.indexOf('iphone')<0 && _userAgent.indexOf('ipad')<0 ) { if($.cookie('onlineSP')==null||$.cookie('onlineSP')=='0'||$.cookie('onlineSP')=='') { $('.onlineService').show(); $('.box_os').hide(); } else if($.cookie('onlineSP')=='1') { $('.onlineService').hide(); $('.box_os').show(); } } else{ $('.onlineService').show(); $('.box_os').show(); } $('.onlineService .ico_os').click(function() { $('.onlineService').hide(); $('.box_os').show(); $.cookie('onlineSP','0',{expires:1,path:'/',domain:'lanrenzhijia.com'}); }); $('.os_x').click(function() { $('.box_os').hide(); $('.onlineService').show(); $.cookie('onlineSP','1',{expires:21,path:'/',domain:'lanrenzhijia.com'}); }); $boxOsFun = function(){var st=$(document).scrollTop();if (!window.XMLHttpRequest) {$('.box_os').css('top',st+44);$('.onlineService').css('top',st+44);}}; $(window).bind('scroll', $boxOsFun); $boxOsFun(); var feedback_url ='http://www.lanrenzhijia.com'; $('.acbox .ico_pp').hover(function(){ $(this).stop().animate({height:'52px'},'fast'); },function(){ $(this).stop().animate({height:'33px'},'fast'); } ); $('.acbox .ico_gt').hover(function(){ $(this).stop().animate({height:'52px'},'fast'); },function(){ $(this).stop().animate({height:'33px'},'fast'); } ); $('.onlineService .ico_pp').hover(function(){ $(this).stop().animate({width:'87px'},'fast'); },function(){ $(this).stop().animate({width:'39px'},'fast'); } ); $('.onlineService .ico_gt').hover(function(){ $(this).stop().animate({width:'97px'},'fast'); },function(){ $(this).stop().animate({width:'39px'},'fast'); } ); $('.ico_gt').click(function(){ $('html, body').animate({scrollTop:0}, 1); }) //分辨率 if ( $(window).width()<1200 || screen.width<1200) { $('.hydp950,.w_950,.sdmain,.main').css('overflow','hidden'); $('.top_bg').css({'overflow':'hidden','width':'950px','margin':'0 auto'}); $('.db_bg2').addClass('db_bg2_s'); $('.jstd_c .bg_l,.jstd_c .bg_r').css('display','none'); $('#js_play .prev').css('left','0'); $('#js_play .next').css('right','0'); $('#videoplay .prev, #videoplay2 .prev').addClass('prev_s'); $('#videoplay .next, #videoplay2 .next').addClass('next_s'); }else{ $('.hydp950,.w_950,.sdmain,.main').removeAttr('style'); $('.top_bg').removeAttr('style'); $('.db_bg2').removeClass('db_bg2_s'); $('.jstd_c .bg_l,.jstd_c .bg_r').removeAttr('style'); $('#js_play .prev').removeAttr('style'); $('#js_play .next').removeAttr('style'); $('#videoplay .prev, #videoplay2 .prev').removeClass('prev_s'); $('#videoplay .next, #videoplay2 .next').removeClass('next_s'); }});
代码整体结构。
查看效果。