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，不知道我在做什么

回答

相关问题