JavaScript，不知道我在做什么

JavaScript, no idea what I am doing

本文关键字：什么 不知道 JavaScript      更新时间：2023-09-26

我正在尝试使用JavaScript来设置相对于屏幕分辨率宽度的元素宽度。我会解释一下为什么。。。我有这样的图片：https://i.stack.imgur.com/HeXvu.png

我希望这是我的标题，因为我不希望它是一个完全静态的图像，我希望标题能随着屏幕分辨率而缩放，所以我设置了我的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;
}

现在，我在这里要做的是，为页眉的左右固化部分预先定义宽度和高度，并使用初始页眉div（中间的图像设置为背景）。我在这里遇到的唯一问题是，主div的背景（一个位于页眉的中间部分）显示在页眉的右曲线图像后面，如下所示：https://i.stack.imgur.com/XEq85.png

我该怎么做？我能想到的一种方法是使用JavaScript。以下是我的想法，首先脚本使用"screen.width"获取用户的屏幕宽度，然后从值（页眉右弯曲部分的宽度）中减去"63"，并将该值设置为主页眉元素的宽度，这在理论上应该可以解决背景问题。唯一的问题是，我几乎没有JavaScript经验，也不知道如何做任何事情，我知道我做的几件事的唯一原因，主要是因为我在一些页面中复制/粘贴了一些其他JS代码。。。是 啊相当糟糕。那么，我该怎么办？o_o

下面是一个您正在努力实现的工作示例-http://jsfiddle.net/Tq33c/.

您可以尝试从headerMaindiv中取出左右标头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;}

你可能想做这样的事情：

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

​​

相关文章：