Question

我使用html / css代码创建了一个网站。问题是，当我在另一台计算机上运行它时，网站（DIV）的细节变得混乱。如何确定网站细节的安排，以便细节的定位不会改变？

CSS

.wrapper{
width: 1880px;
margin: 0 auto;
}
.head {
height: 16%;
}
.opacity {
position: absolute;
z-index: 1;
top: 19.7%;
right: 0.4%;
left: 0.4%;
bottom: 76%;
background-color: #ffffff;
opacity: 0.6;
}
.opacity2 {
position: absolute;
z-index: 1;
top: 91%;
right: 0.4%;
left: 0.4%;
bottom: 5%;
background-color: #ffffff;
opacity: 0.6;
}
.menu {
position: absolute;
height: 5%;
z-index: 4;
}
.main {
height: 62%;
z-index: 2;
}
.fixedfont {
font-size : 250%
}
.background {
position: absolute;
top: 19.5%;
right: 0.4%;
left: 0.4%;
bottom: 5%;
z-index: -1;
}

HTML

<div class = "background">
    <img src = "IMG_1594.jpg" width = "100%" height = "100%">
</div>
<div class = "opacity">
</div>
<div class = "wrapper">
    <div class = "head">
        <center>
        <img src = "head.jpg" width = "100%" usemap = "#headmap">
        <map name = "headmap">
        <area shape = "rect" coords = "0,0,400,150" href = "united.html">
        </map>
        </center>
    </div>
    <hr size = "10" noshade color = "#f6c447">
    <hr size = "5" noshade color = "#092b51">
    <div class = "menu">
        <table>
            <tr>
                <td width = "14%">
                <center>
                <a href="united.html"><img src="home.png" onmouseover="this.src='home2.png'" onmouseout="this.src='home.png'" /></a>
                </center>
                </td>
                <td width = "14%">
                <center>
                <a href="about.html"><img src="about.png" onmouseover="this.src='about2.png'" onmouseout="this.src='about.png'" /></a>
                </center>
                </td>
                <td width = "14%">
                <center>
                <a href="project.html"><img src="projects.png" onmouseover="this.src='projects2.png'" onmouseout="this.src='projects.png'" /></a>
                </center>
                </td>
                <td width = "14%">
                <center>
                <a href="news.html"><img src="news.png" onmouseover="this.src='news2.png'" onmouseout="this.src='news.png'" /></a>
                </center>
                </td>
                <td width = "14%">
                <center>
                <a href="contact.html"><img src="contact.png" onmouseover="this.src='contact2.png'" onmouseout="this.src='contact.png'" /></a>
                </center>
                </td>
                </center>
            </tr>
        </table>
    </div>
    <div class = "main">
    </div>
    <div class = "opacity2">
    </div>
    <br><br><br><br><br><br><br>
    <hr size = "5" noshade color = "#6699FF">
    <hr size = "10" noshade color = "#092b51">
</div>
<font face = "arial" color = "#092b51" size = "2">United Construction & Global Painters, Inc. Copyright, 2014.</font>

Answer 1

我认为您的问题是包装器如何设置为某个像素宽度。尝试将其更改为

.wrapper{
    width: 100%;
    margin: 0 auto;
}

调整浏览器大小

1 个答案: