Question

我试图教自己jquery并做一个体面的布局。我觉得我所做的一切都还可以，但我有疑问。这是我第一次尝试从我自己的头脑中抓取jquery而不是复制别人。

我试图让它保持相关性和简单性。

第一个问题。我已经在chrome中使用了优化工具，但我遇到了麻烦优化样式和脚本的顺序（1）在文档头中的外部JavaScript文件之后包含以下外部CSS文件。要确保并行下载CSS文件，请始终在外部JavaScript之前包含外部CSS。在外部CSS文件和另一个资源之间的头部找到了1个内联脚本块。要允许并行下载，请在外部CSS文件之前或在下一个资源之后移动内联脚本。每次我尝试这个它打破页面CSS。为什么以及我应该考虑解决这个问题？

第二个问题：我在我的菜单下制作了一个简单的jquery滑块......它可以实现我想要它但是当我缩小到25％时它不会留在包装中，它会拍到页面的一侧。我整个周末都试图解决这个问题但没有成功。建议会很棒，我坚持这个。

总而言之，我希望看到我应该做的东西。

THRID：当我缩小页面上的文字似乎没有缩小与页面的其余部分。 这是正常的吗？

所以请在这里选择洞...

<!DOCTYPE html>
<html>
<head><title>Bretts Gaming</title>

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Source Sans Pro">
<link rel="stylesheet" type="text/css" href="./css/superfish.css" media="screen">
<link rel="stylesheet" type="text/css" href="./css/colorbox.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">


<!--[if IE]>
    <link href="./css/style2.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="./css/superfish2.css" media="screen">
<![endif]-->
<script type="text/javascript" src="javascript/jquery-1.8.2.js"></script>
<script type="text/javascript" src="javascript/go.fullBg.js"></script>
<script type="text/javascript" src="javascript/superfish.js"></script>
<script type="text/javascript" src="javascript/hoverIntent.js"></script>
<script type="text/javascript" src="javascript/jquery.cycle.all.js"></script>
<script type="text/javascript" src="javascript/jquery.colorbox.js"></script>

<script type="text/javascript">
 $(document).ready(function() {
    $('#banner-rotate').cycle({
    fx:    'fade',
    speed:  500
    });
     $('ul.sf-menu').superfish({
     autoArrows:  false
     });
     $("#background_image").fullBg();
        var left = $('.first').offset().left + ($('.first').width() / 2  ) ,
        slidecont = $('#menu-slide');
        slidecont.stop().animate({
        'left': left,
        });
    $('#navbar li').on('mouseover', function(){
            var left = $(this).offset().left + ($(this).width() / 2 - 10) ,
            slidecont = $('#menu-slide'),
            navdiv = $('#slider-container').width()
            slidecont.stop().animate({
            'left': left,
            'position': 'absolute'
        });
    });
    $('#navbar li').on('mouseleave', function(){
        var left = $('.first').offset().left + ($('.first').width() / 2 - 10) ,
        slidecont = $('#menu-slide');
        slidecont.stop().animate({
        'left': left,
        });
    });
    $(".youtube").colorbox({iframe:true, innerWidth:600, innerHeight:519});
    //Example of preserving a JavaScript event for inline calls.
                $("#click").click(function(){ 
                    $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
                    return false;
                });
 });
</script>
</head>
<body>
<div id="background_image"><img src="images/pictures/large/system-files/bg.png" width="1679" height="939"/></div>
<div id="background_overlay">
    <div id="site">
        <div id="header_wrapper">
            <div id="header">
                    <div id="logo"><img src="images/pictures/large/system-files/logo.png" width="366" height="41"/></div>
                    <div id="topnav">
                        <ul id="navbar"class="sf-menu">
                            <li class="current first"><a href="#a">HOME</a></li>
                            <li><a href="#">ABOUT US</a>
                                <ul>
                                    <li><a href="#">Menu 1</a></li>
                                    <li><a href="#">Menu 2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">CORPORATE</a></li>
                            <li><a href="#">CRUSING</a></li>
                            <li><a href="#">LEISURE</a></li>
                            <li><a href="#">GROUPS</a></li>
                            <li><a href="#">VIRTUOSO</a></li>
                            <li><a href="#">LINKS</a></li>
                            <li class="last"><a href="#">CONTACT</a></li>
                        </ul>
                        <div id="slider-container">
                            <div id="menu-slide"></div>
                        </div>
                    </div>
                </div>
            </div>
        <div id="body_wrapper">
            <div id="body">
                <div id="home_sec_1">
                    <div id="banner_left">
        <div id="banner-rotate" class="pics">
            <img src="images/pictures/large/system-files/banner1.png" width="493" height="199" />
            <img src="images/pictures/large/system-files/banner2.png" width="493" height="199" />
            <img src="images/pictures/large/system-files/banner3.png" width="493" height="199" />
            </div>
        </div>
                    <div id="banner_right">
                        <div class="avert adFirst">
                            <img src="images/pictures/large/system-files/smallimg1.png" width="66" height="59"/>
                            <h2>DIRT 3</h2>
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit.</p>
                            <div class="checklinks"><a href="index.html">Check It Out.</a></div>
                        </div>
                        <div class="avert">
                            <img src="images/pictures/large/system-files/smallimg2.png" width="66" height="59" />
                            <h2>DEAD ISLAND</h2>
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit.</p>
                            <div class="checklinks"><a href="index.html">Check It Out.</a></div>
                        </div>
                        <div class="avert adLast">
                            <img src="images/pictures/large/system-files/smallimg3.png" width="66" height="59"/>
                            <h2>CALL OF DUTY: MW3</h2>
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit.</p>
                            <div class="checklinks"><a href="index.html">Check It Out.</a></div>
                        </div>
                    </div>
                </div>
                <div id="home_sec_2">
                    <h2>WHATS IN THE MIX</h2>
                    <div class="home_sec_2_img home_sec_2_img_1" >
                        <a class="youtube cboxElement" href="http://www.youtube.com/embed/bdjnbWXKsOA?rel=0&amp;wmode=transparent" title="A Weird Fuckin Game"><img src="images/pictures/large/system-files/midimg1.png" width="314" height="145"/></a>                     
                        <p>LA NORIE</p>
                    </div>
                    <div class="home_sec_2_img">                        
                        <a class="youtube cboxElement" href="http://www.youtube.com/embed/TfrrAp1blaM?rel=0&amp;wmode=transparent" title="Battlefield 3 Goin Off"><img src="images/pictures/large/system-files/midimg2.png" width="314" height="145"/></a>
                        <p>BATTLEFIELD 3</p>
                    </div>
                    <div class="home_sec_2_img">
                        <a class="youtube cboxElement" href="http://www.youtube.com/embed/C4nMEoYIchU?rel=0&amp;wmode=transparent" title="Call Of Duty MW3"><img src="images/pictures/large/system-files/midimg3.png" width="314" height="145"/></a>
                        <p>CALL OF DUTY: MW3</p>
                    </div>
                </div>
                <div id="home_sec_3">
                <div class="liist-one">
                    <ul id="lst1" class="sujest">
                    <li><a href="#">Lorem ipsum dolor sit amet, consec  tetuer adi eat.</a></li>
                    <li><a href="#">Lorem ipsum dolor sit amet, consec  tetuer adi eat.</a></li>
                    <li><a href="#">Lorem ipsum dolor sit amet, consec  tetuer adi eat.</a></li>
                    <li><a href="#">Lorem ipsum dolor sit amet, consec  tetuer adi eat.</a></li>
                    <li><a href="#">Lorem ipsum dolor sit amet, consec  tetuer adi eat.</a></li>
                    </ul>
                </div>
                <div class="liist-one">
                    <ul id="lst3" class="sujest">
                    <li><a href="#">Lorem ipsum dolor sit amet, consec  tetuer adi eat.</a></li>
                    <li><a href="#">Lorem ipsum dolor sit amet, consec  tetuer adi eat.</a></li>
                    <li><a href="#">Lorem ipsum dolor sit amet, consec  tetuer adi eat.</a></li>
                    <li><a href="#">Lorem ipsum dolor sit amet, consec  tetuer adi eat.</a></li>
                    <li><a href="#">Lorem ipsum dolor sit amet, consec  tetuer adi eat.</a></li>
                    </ul>
                </div>
                <div class="liist-one">
                    <ul id="lst3" class="sujest">
                    <li><a href="#">Lorem ipsum dolor sit amet, consec  tetuer adi eat.</a></li>
                    <li><a href="#">Lorem ipsum dolor sit amet, consec  tetuer adi eat.</a></li>
                    <li><a href="#">Lorem ipsum dolor sit amet, consec  tetuer adi eat.</a></li>
                    <li><a href="#">Lorem ipsum dolor sit amet, consec  tetuer adi eat.</a></li>
                    <li><a href="#">Lorem ipsum dolor sit amet, consec  tetuer adi eat.</a></li>
                    </ul>
                </div>
            </div>
            <!-- This contains the hidden content for inline calls -->
        <div style='display:none'>
            <div id='inline_content' style='padding:10px; background:#fff;'>
            <p><strong>This content comes from a hidden element on this page.</strong></p>
            <p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.</p>
            <p><a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p>

            <p><strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p>
            <p>Updating Content Example:<br />
            <a class="ajax" href="../content/flash.html">Click here to load new content</a></p>
            </div>
        </div>
        </div>


<div id="footer_wrapper">
    <div id="footer">
        <div id="footer_left">© 2012 Bretts Gaming&nbsp;&nbsp;<a href="#">Privacy Policy</a>&nbsp;&nbsp;<a href="#">Web Design Gold Coast&nbsp;-&nbsp;Bretts Web Pages</a></div>
        <div id="footer_right"><a href="#">Sitemap</a>&nbsp;&nbsp;&nbsp;<a href="#">Bookmark this Site</a>&nbsp;&nbsp;&nbsp;<a href="#">Contact Us</a></div>
    </div>
</div>
</div>
</div>
</body>
</html>

和css

html,body { margin:0px; padding:0px; height:100%; }
body, td { font-family: arial; font-size:12px; line-height:18px; color:#ffffff;}

body { background:#ffffff; }


/* links */
a, a:visited { color: #f67c38; text-decoration:underline; } 
a:hover { color: #f67c38; text-decoration:underline; } 
p { margin:0px; padding:0px; }
h1, .heading, .redheading { color:#eca007; font-size:18px; line-height:22px; font-weight:normal; margin:0px; padding:0px 0px 15px 0px; }
h2, .subheading, .sitemaphdrdiv { color:#e16a15; font-size:15px; line-height:18px; font-weight:normal; margin:0px; padding:5px 0px; }
/** template styles */
#background_image { overflow:hidden;}
#background_overlay {position: absolute;  top: 0;  left: 0;  z-index: 50;  width: 100%;  height:100%;  overflow-y:auto; } 
#background_overlay { position: absolute; top: 0; left: 0; z-index: 50; width: 100%; height:100%;  overflow-y:auto; background-attachment: fixed; }
#wrapper-blank-template { background: #000000; height:100%; }
#main-blank-template { padding: 14px 20px; }
#site { min-height:100%;  }
#header_wrapper { height:157px; }
#header { margin:0px auto; width:980px; height:157px; padding: 0px;}
#logo { margin:16px 0px 8px 0px; width:498px;  height: 120px; background: url(../images/pictures/large/system-files/logobg.png) no-repeat;}
#logo img{ padding:32px 0px 0px 61px; }
#topnav { width: 980px; height: 39px; background: url(../images/pictures/large/system-files/navbg.png) no-repeat; }
#navbar {position: relative; width: 980px; height: 29px;  }
#navbar a { text-decoration:none;}
#navbar ul{text-align: center;}
#menu-slide {height: 4px; width: 52px; background: url(../images/pictures/large/system-files/glowbg.png) no-repeat;  position: absolute; float: left; } 
#header_right { float:right; display:inline; width:311px; font-size:19px; line-height:36px; font-weight:bold; color:#1f1104; text-align:center; padding: 12px 0px 12px 0px;  }
#body_wrapper { padding-bottom:90px; } /* padding bottom matches height of the footer + padding */
#body { margin:0px auto; width:980px; }
#home_sec_1 {height: 216px; width: 980px; background: url(../images/pictures/large/system-files/section1.png) no-repeat center top; margin: 15px 0px 0px 0px; display:inline-block;}
#banner_left {width: 493px; height: 199px; margin: 9px 0px 9px 15px; float: left; display:inline-block;}
#banner_right {width: 453px; height: 199px; margin: 9px 0px 5px 5px; float: left; display:inline-block; }
.avert {height: 65px; width: 448px; padding-top: 0px; border-bottom: dashed 1px; border-spacing: 3px; border-bottom-color: #635c54; position: relative;}
.checklinks {float: right; bottom: 35px; position: absolute; float: right; bottom: 2px; right: 0px; }
.checklinks a{text-decoration: none;}
.avert img{ float:left; padding-right: 10px;}
.avert h2{ padding: 3px;}
.adfirst{padding-top: 0px;}
.adlast{border-bottom: 0px;}
#home_sec_2 {height: 216px; width: 980px; background: url(../images/pictures/large/system-files/section2.png) no-repeat center top; margin: 15px 0px 0px 0px; padding: 5px; text-decoration: none;}
#home_sec_2 h2 { padding-left: 12px;}
#home_sec_2 p { padding-top: 0px;} 
.home_sec_2_img{ padding:3px;float: left; }
.home_sec_2_img_1{ padding-left: 12px;}
#home_sec_3 { height: 216px; width: 980px; background: url(../images/pictures/large/system-files/section3.png) no-repeat center top; margin: 15px 0px 0px 0px; display: inline-block; padding: 5px; }
#home_sec_3 a, a:hover{text-decoration:none; color:#ffffff}
.liist-one{width: 315px; display: inline-block; margin: 0px;}
.liist-one ul{list-style-image: url(../images/pictures/large/system-files/bullet.png); line-height: 30px;font-size: 12px;}
#content_bg { margin-top:7px;  background:#000000 url(../images/pictures/large/system-files/bg_content.gif) repeat-y; }
#content_left { float:left; display:inline; padding:20px 0px; margin-left:20px; width:629px;}
#content_right { float:right; display:inline; padding:25px 0px; margin-right:25px; width:261px; }
#content_right h1 { color:#ffffff; margin:3px 0px 20px 0px; }
#content_right a, #content_right a:visited { color:#ffffff; text-decoration:none; font-weight:bold; }
#content_right a:hover { color:#ffffff; text-decoration:underline; font-weight:bold; }
#footer_wrapper { position:fixed; bottom:0px; height:37px; background: -moz-linear-gradient(top,  rgba(42,42,42,0.54) 0%, rgba(42,42,42,0.54) 1%, rgba(6,6,6,1) 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(42,42,42,0.54)), color-stop(1%,rgba(42,42,42,0.54)), color-stop(100%,rgba(6,6,6,1))); /* chrome,safari4+ */
background: -webkit-linear-gradient(top,  rgba(42,42,42,0.54) 0%,rgba(42,42,42,0.54) 1%,rgba(6,6,6,1) 100%); /* chrome10+,safari5.1+ */
background: -o-linear-gradient(top,  rgba(42,42,42,0.54) 0%,rgba(42,42,42,0.54) 1%,rgba(6,6,6,1) 100%); /* opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(42,42,42,0.54) 0%,rgba(42,42,42,0.54) 1%,rgba(6,6,6,1) 100%); /* ie10+ */
background: linear-gradient(to bottom,  rgba(42,42,42,0.54) 0%,rgba(42,42,42,0.54) 1%,rgba(6,6,6,1) 100%); /* w3c */
filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#8a2a2a2a', endcolorstr='#060606',gradienttype=0 ); /* ie6-9 */
width:100%; color:#ffffff; } /* padding bottom matches height of the footer + padding */
#footer { margin:0px auto; width:980px; font-family:verdana; font-size:10px; line-height:40px; color:#ffffff; }
#footer_left { float:left; }
#footer_right { float:right; padding-right: 5px; }
#footer a, #footer a:visited { color:#ffffff; text-decoration:none; }
#footer a:hover { color:#ffffff; text-decoration:underline; }

我不知道如何将所有脚本放在这里，我该怎么做才能让你们看到这个页面？希望这是对的.. 我是一个完整的初学者，所以如果我这样做不正确请告诉我 哦，是的！当我点击页面上的链接时，滑块会向页面侧面拍摄一秒钟，然后转到正确的位置，再次卡住

Answer 1

问题1：按以下顺序包括您头脑中的项目：

meta for encoding
<title>标记
其他元标记
内联<script>或<style>代码
参考CSS文件
参考JS文件

一个例外是，在所有其他CSS

中

问题2和3：如果在CSS中未定义所有大小，则在更改页面缩放时，某些浏览器会开始变得怪异。例如，你的css中的.checklinks。

其他：

CSS在最后一个属性
之后不应该有;
创建一个JS文件，而不是让它内联在头部。另外组合脚本，除了总是保持jQuery和其他库分开。

优化我的页面并缩小问题

1 个答案: