優化我的頁面和縮小問題

我試圖教自己jQuery和做一個體面的佈局。我覺得我所做的事情沒問題，但我有問題。這是我第一次嘗試jQuery從我自己的頭上，而不是抄襲別人。優化我的頁面和縮小問題

我試圖保持它的相關性和簡單性。

第一個問題。我使用了鉻和im中的優化工具，但遇到此問題優化樣式和腳本的順序（1）以下外部CSS文件包含在文檔頭中的外部JavaScript文件之後。爲了確保CSS文件並行下載，請始終在外部JavaScript之前包含外部CSS。在外部CSS文件和其他資源之間的頭部發現了1個內聯腳本塊。要允許並行下載，請在外部CSS文件之前或下一個資源之後移動內聯腳本。每當我嘗試這個它打破了頁面的CSS。爲什麼和我應該考慮怎樣解決這個問題？

第二個問題：我在我的菜單下做了一個簡單的jquery滑塊...它做我想要的但是當我縮小到25％它不停留在包裝中時，它拍到側面頁。我已經嘗試了整個週末來解決這個問題，但沒有成功。建議會很好，我堅持這一點。

在所有即時通訊尋找看到wheather即時乾的東西，因爲它應該是。

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; }

林不知道如何把所有的腳本在這裏，我怎麼這樣做，讓你們可以看到頁面？希望這是正確的.. 林是一個完整的初學者，所以如果即時通訊不正確做這個請告訴我 哦，是的！當我點擊頁面上的鏈接滑塊芽頁面一側爲第二，然後去到正確的地方，又很卡住

來源

2012-11-18 Brett

問題1：包括按以下順序在你的腦袋項目：

元編碼
<title>標籤
其他meta標籤
在線<script>或<style>標籤
參照（一個或多個），以CSS文件
參照（一個或多個），以JS文件

一個例外是IE-特定的CSS需要放置畢竟其他CSS

問題2和問題3：如果CSS中沒有定義所有尺寸，則更改頁面縮放時，某些瀏覽器開始動作。例如，您的CSS中的.checklinks。

其他：

CSS不應該有一個;最後一個屬性
後製作的，而不是在頭內嵌有它一個JS文件。儘可能地結合腳本，除了總是保持jQuery和其他庫分離。

來源

2012-11-18 21:04:32 GiantDuck

謝謝你，我會嘗試你所有的sujestions – Brett

如果它可以幫助你，請用複選標記標記我的答案！ – GiantDuck

優化我的頁面和縮小問題

回答

相關問題