网站响应式页面查看工具源代码

来源：互联网发布：台湾处境现状知乎编辑：程序博客网时间：2024/06/05 14:33
<!doctype html><html><head><meta charset="UTF-8"><title>网站响应式页面查看工具源代码</title><script type="text/javascript" src="http://sc.chinaz.com/style/js/jquery-1.2.pack.js"></script><script type="text/javascript">var theme_list_open = false;$(document).ready(function() {    function fixHeight() {        var headerHeight = $("#switcher").height();        $("#iframe").attr("height", $(window).height() - 84 + "px");    }    $(window).resize(function() {        fixHeight();    }).resize();    //响应式预览    $('.icon-monitor').addClass('active');    $(".icon-mobile-3").click(function() {        $("#by").css("overflow-y", "auto");        $('#iframe-wrap').removeClass().addClass('mobile-width-3');        $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');        $(this).addClass('active');        return false;    });    $(".icon-mobile-2").click(function() {        $("#by").css("overflow-y", "auto");        $('#iframe-wrap').removeClass().addClass('mobile-width-2');        $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');        $(this).addClass('active');        return false;    });    $(".icon-mobile-1").click(function() {        $("#by").css("overflow-y", "auto");        $('#iframe-wrap').removeClass().addClass('mobile-width');        $('.icon-tablet,.icon-mobile,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');        $(this).addClass('active');        return false;    });    $(".icon-tablet").click(function() {        $("#by").css("overflow-y", "auto");        $('#iframe-wrap').removeClass().addClass('tablet-width');        $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');        $(this).addClass('active');        return false;    });    $(".icon-monitor").click(function() {        $("#by").css("overflow-y", "hidden");        $('#iframe-wrap').removeClass().addClass('full-width');        $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');        $(this).addClass('active');        return false;    });});</script><style>body,ul {margin:0;padding:0;}#switcher {height:40px;background:#00a0e9;z-index: 99999;position: fixed;width: 100%;top: 0;border-bottom:3px solid #fff;}.center li {display: inline;float: left;position: relative;}.logoTop {margin-left:5px;margin-right:15px;margin-top:7px;color: #FFFFFF;font-weight: bold;font-family: "microsoft yahei";}.logoTop a:hover {text-decoration:underline}li.device-resolution {text-transform: uppercase;font-size: 12px;color: #ada58b;font-family: 'Cambria';line-height: 54px;}li.purchase {float: right !important;margin-top: 11px;}li.purchase a {padding: 0;background: url(trolley2.png) no-repeat 0 0;width: 133px;height: 36px;display: block;transition: all 0.3s ease-out 0s;}li.purchase a:hover {background-position: 0 -36px;}li.remove_frame {margin-left: 17px;float: right !important;margin-right: 30px;}li.remove_frame a.closeFrame {background: url(http://sc.chinaz.com/style/images/cross2.png) no-repeat 0px 0px;width: 20px;height: 21px;display: block;margin-top: 18px;transition: all 0.3s ease-out 0s;}li.remove_frame a.closeFrame:hover {background-position: 0px -21px;}li.remove_frame a.addGroup {float:left;position:absolute;top:17px;right:80px;}#iframe {margin-top: 0px;}.icon-monitor, .icon-tablet, .icon-mobile-1, .icon-mobile-2, .icon-mobile-3 {margin-right: 7px;margin-top: 9px;width:30px;height: 23px;}.icon-monitor {background-image: url(http://sc.chinaz.com/style/images/device_ico.png);background-position: 0 0;background-repeat: no-repeat;}.icon-tablet {background: url(http://sc.chinaz.com/style/images/device_ico.png) no-repeat -40px 0;}.icon-mobile-1 {background: url(http://sc.chinaz.com/style/images/device_ico.png) no-repeat -76px 0;}.icon-monitor:hover, .icon-monitor.active {background-position: 0 -24px;}.icon-tablet:hover, .icon-tablet.active {background-position: -40px -24px;}.icon-mobile-1:hover, .icon-mobile-1.active {background-position: -76px -24px;}.icon-mobile-2 {background: url(http://sc.chinaz.com/style/images/device_ico.png) no-repeat -118px 0;}.icon-mobile-3 {background: url(http://sc.chinaz.com/style/images/device_ico.png) no-repeat -151px 0;}.icon-mobile-2:hover, .icon-mobile-2.active {background-position: -118px -24px;}.icon-mobile-3:hover, .icon-mobile-3.active {background-position: -151px -24px;}#iframe-wrap {height: 100%;overflow: visible;position: relative;top: 40px;z-index: 50;}.tablet-width {height: 1000px !important;margin: 0 auto;padding: 175px 100px 74px 100px;width: 785px;margin-top: 40px;margin-bottom: 40px;background: url(http://sc.chinaz.com/style/images/bg-mob.png) no-repeat 0 0;}.tablet-width iframe {height: 960px !important;}.mobile-width {height: 730px !important;margin: 0 auto;padding: 165px 115px 73px 100px;width: 1041px;margin-top: 40px;background: url(http://sc.chinaz.com/style/images/bg-mob.png) no-repeat 0 -1249px;}.mobile-width iframe {height: 704px !important;}.mobile-width-2 {height: 417px !important;margin: 0 auto;padding: 125px 25px 159px 25px;width: 337px;margin-top: 40px;background: url(http://sc.chinaz.com/style/images/bg-mob.png) no-repeat 0 -2217px;}.mobile-width-2 iframe {height: 416px !important;}.mobile-width-3 {height: 256px !important;margin: 0 auto;padding: 45px 115px 69px 105px;width: 497px;margin-top: 40px;background: url(http://sc.chinaz.com/style/images/bg-mob.png) no-repeat -387px -2217px;}.mobile-width-3 iframe {height: 256px !important;}</style></head><body><div id="switcher">    <ul class="center">      <li class="logoTop">在线预览！</li>        <div id="Device">            <li class="device-monitor"><a href="javascript:" title="宽屏电脑"><div class="icon-monitor"></div></a></li>            <li class="device-mobile"><a href="javascript:" title="平板竖屏"><div class="icon-tablet"> </div></a></li>            <li class="device-mobile"><a href="javascript:" title="平板横屏"><div class="icon-mobile-1"> </div></a></li>            <li class="device-mobile-2"><a href="javascript:" title="手机竖屏"><div class="icon-mobile-2"> </div></a></li>            <li class="device-mobile-3"><a href="javascript:" title="手机横屏"><div class="icon-mobile-3"> </div></a></li>        </div>  </ul></div><div id="iframe-wrap"><iframe id="iframe" src="http://luoyihu.cn/cs/zhuanti20170903/" frameborder="0"   width="100%"> </iframe></div></body></html>
适用于网站模板在线演示等。
阅读全文
0 0