我试图自学 jquery 并做一个体面的布局。我认为我所做的还可以，但我有疑问。这是我第一次从自己的脑海中尝试 jquery，而不是复制别人。
我试图保持它的相关性和简单性。
第一个问题。我在 chrome 中使用了优化工具，但我遇到了问题 优化样式和脚本的顺序 (1) 以下外部 CSS 文件包含在文档头中的外部 JavaScript 文件之后。为确保并行下载 CSS 文件，请始终在外部 JavaScript 之前包含外部 CSS。在外部 CSS 文件和另一个资源之间的头部中发现了 1 个内联脚本块。要允许并行下载，请将内联脚本移动到外部 CSS 文件之前或下一个资源之后。 每次我尝试这个时，它都会破坏页面 css。为什么以及我应该考虑什么来解决这个问题？
第二个问题：我在我的菜单下制作了一个简单的 jquery 滑块......它做了我想要的，但是当我缩小到 25% 时它不会留在包装器中，它会拍摄到页面的一侧。我整个周末都在尝试解决这个问题，但没有成功。建议会很棒，我坚持这一点。
总之，我希望看到我做的事情应该是这样的。
第三：当我缩小页面上的文本似乎并没有随着页面的其余部分缩小。 这是正常的吗？
所以这里是请在里面挖洞..
<!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&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&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&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 <a href="#">Privacy Policy</a> <a href="#">Web Design Gold Coast - Bretts Web Pages</a></div>
<div id="footer_right"><a href="#">Sitemap</a> <a href="#">Bookmark this Site</a> <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; }
我不确定如何将所有脚本放在这里，我该怎么做才能让你们看到页面？希望这是对的。 我是一个完整的初学者，所以如果我做错了，请告诉我 哦，是的！当我单击页面上的链接时，滑块会向页面一侧射击一秒钟，然后转到正确的位置，再次非常卡住