JavaScript，不知道我在做什麼

我正在嘗試使用JavaScript設置相對於其屏幕分辨率寬度的元素寬度。我會解釋一下爲什麼...我有這個圖像：http://i.stack.imgur.com/HeXvu.png JavaScript，不知道我在做什麼

我希望這是我的標題，我不希望它是一個完全靜態的圖像，我希望標題與屏幕分辨率，所以我成立了我的CSS和HTML這樣的事情...

HMTL：

<html> 
    <body> 
     <div class="globalContainer"> 
      <div id="headerMain"> 
       <div class="headerLeft"> 
       </div> 
       <div class="headerRight"> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

CSS：

#headerMain { 
    height: 79px; 
    background-image: url(../img/global/middleHeader.png); 
    background-repeat: repeat-x; 
} 
.headerLeft { 
    width: 63px; 
    height: 79px; 
    background-image: url(../img/global/leftHeader.png); 
    background-repeat: no-repeat; 
    float: left; 
} 
.headerRight { 
    width: 63px; 
    height: 79px; 
    background-image: url(../img/global/rightHeader.png); 
    background-repeat: no-repeat; 
    float: right; 
}

現在，我想在這裏做，有預定義的w標題左側和右側固化部分的寬度和高度，並使用初始標題div（將中間圖像設置爲背景）。我在這裏遇到的唯一問題是，主div的背景（其中一個帶有中間部分的標題）顯示在圖像的後面，是正確的標題曲線，如下所示：http://i.stack.imgur.com/XEq85.png

我開始這樣做？我能想到的一種方法是使用JavaScript。以下是我的想法，首先腳本使用「screen.width」獲取用戶屏幕寬度，然後從值（頭部右彎曲部分的寬度）中減去「63」，並將該值設置爲主標題元素的寬度，這應該從理論上解決背景問題。唯一的問題是，我幾乎沒有JavaScript經驗，也不知道如何做任何事情，我知道我做的幾件事的唯一原因，主要是因爲我有幾個複製/粘貼了一些其他JS代碼我的網頁...是的。很糟糕。那麼，我該怎麼做？ O_O

來源

2012-03-27 Nyanja

試着把右邊的div放在主div上面，這樣它就是兄弟姐妹。 – 2012-03-27 02:24:10

請給您的問題描述性標題。 – 2016-05-02 03:36:22

你可以嘗試採取左，右頭的div出headerMain的div並將其放置在同一水平DOM。然後用這個修改CSS：

#headerMain { height: 79px; background-image: url(../img/global/middleHeader.png); background-repeat: repeat-x; position:absolute; top:0px; left:63px; right:63px;} 

.headerLeft { width: 63px; height: 79px; background-image: url(../img/global/leftHeader.png); background-repeat: no-repeat; position:absolute; top:0px; left:0px;} 

.headerRight { width: 63px; height: 79px; background-image: url(../img/global/rightHeader.png); background-repeat: no-repeat; position:absolute; top:0px; right:0px;}

來源

2012-03-27 02:27:22 KodeKreachor

工作很好，非常感謝！：O – Nyanja 2012-03-27 02:38:18

非常歡迎 – KodeKreachor 2012-03-27 02:47:26

你可能想要做一些事情like this：

<div id="header"> 
    <div class="leftCurve"></div> 
    <ul> 
     <li> 
      <a href="#">link</a> 
     </li> 
     <li> 
      <a href="#">link</a> 
     </li> 
     <li> 
      <a href="#">link</a> 
     </li> 
    </ul> 
    <div class="rightCurve"></div> 
</div> 

#header{ 
    overflow:hidden; 
    zoom:1; 
} 

#header > *{ 
    float:left; 
} 

#header .leftCurve{ 
    /*curve image*/ 
    width:100px; /*adjust dimensions accordingly*/ 
    height:100px; /*adjust dimensions accordingly*/ 
    background:blue; 
} 

#header .rightCurve{ 
    /*curve image*/ 
    width:100px; /*adjust dimensions accordingly*/ 
    height:100px; /*adjust dimensions accordingly*/ 
    background:blue; 
} 

#header ul{ 
    /*repeating bg image*/ 
    overflow:hidden; 
    zoom:1; 
    width: 20%; 
} 
#header ul li{ 
    float:left; 
    width:33%; /* 100/number of items, in percent */ 
} 

#header ul li a{ 
    display:block; 
    background:red; 
    border: 1px solid #0F0; 
}

來源

2012-03-27 02:26:01 Joseph

這裏是你想達到什麼樣的工作的例子 - http://jsfiddle.net/Tq33c/。

來源

2012-03-27 02:44:38 tjscience

JavaScript，不知道我在做什麼

回答

相關問題