Question

这是我生命中第一个网站，所以你的帮助很大！我还在学习HTML和CSS。我的第一个网站几乎已经完成，除了我为我的原始分辨率--1280x800构建它。当我改变分辨率时，元素会分开。为了补偿，我只需要更改body属性中右边距的值。例如，它目前是7em。如果我想以分辨率1920x1200为中心，则值应为27em。我尝试过使用site-wrapper和@media查询技术，但这似乎不起作用。解决方案显然很简单，但我无法自己解决。

请帮助我！

我的HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
        <title>Autoprevoznik Damjanić</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="description" content="Autoprevoznik Damjanić / Prevoz robe / Špediterske usluge" />
<meta name="keywords" content="Damjanić, autoprevoznik, špediter, prevoz robe, špediterske usluge" />
        <link rel="stylesheet" type="text/css" href="naslovna.css" />
        <link rel="shortcut icon" href="Truck.ico" />
</head>

<body>

<h1><a href="naslovna.html">:::Autoprevoznik Damjanić</a></h1>

<div id="border_left"></div>
<ul>
    <li><a href="kontakt.html">Kontakt Informacije</a></li>
    <li><a href="galerija.html">Galerija slika</a></li>
    <li id="empty"><a href="onama.html">O nama</a></li>
</ul>
<div id="border_right"></div>

<div id="content">
    <p>Ispum schmipsum.</p>
</div>

<div class="background">
<div class="border">
<div id="box1">
    <h2>Ukratko o nama</h2>
    <h3>Usluge prevoza</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="button" ><a href="galerija.html"  style="text-decoration:none" title="Galerija slika" class="read_more">galerija</a></div>
</div>
</div>
</div>

<div class="background">
<div class="border">
<div id="box2">
    <h2>Aktuelnosti</h2>
    <h3>Poslednje vesti</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="button" ><a href="onama.html"  style="text-decoration:none" title="Detaljnije" class="read_more">detaljnije</a></div>
</div>
</div>
</div>

<div class="background">
<div class="border">
<div id="box3">
    <h2>Kontakt informacije</h2>
    <h3>Identifikacija preduzeća</h3>
<p>Možete nas kontaktirati na brojeve telefona :</p>

<p>+381 (0) 6</p>

<p>+381 (0) 34</p>

<p>Email:</p>
 <div class="button" ><a href="kontakt.html" style="text-decoration:none" title="Detaljnije" class="read_more">detaljnije</a></div>
</div>
</div>
</div>

</body>
</html>

我的CSS：

body  {
    background:url(background.jpg);
    background-repeat: no-repeat;   
    background-position: top center;
    background-color:#b0d3f6;
    margin: 3em 7em 0em;
    }

p {
    font-size: 11px;
    margin: 0px 30px 0px 0px;
    color: rgb(111, 130, 150);
    line-height: 18px;
    text-align: left;
}

h1 a {
    color: rgb(27, 63, 150);
    position: relative;
    top: 30px;
    text-decoration: none;
}

h2 {
    font-size: 16px;
    color: rgb(27, 63, 98);
    margin-bottom: -5px;
}

h3 {
    font-size: 12px;
    color: rgb(84, 130, 175);
}

#box1, #box2, #box3 {
    display: inline-block;
    width: 306px;
    background: url(box_top.png) top left no-repeat;
    padding: 0px 18px;
    position: relative;
    top: -35px;
}

.border {
    display: inline-block;
    background: url(box_bottom.png) bottom left no-repeat;
    position: relative;
    top: 17px;
    vertical-align: top;
}

.background {
    display: inline-block;
    background: url(box_in.png) repeat-y;
}

.button {
    position: relative;
    left: -10px;
    width: 77px;
    height: 19px;
    line-height: 16px;
    background: url("button.png") no-repeat;
    font-size: 11px;
    color: rgb(255, 255, 255);
    text-align: center;
    margin: 20px 10px 0px;
}

a { color:white;}

ul {
    float:right;
    position:relative;
    top: -35px;
    left: -60px;
    list-style: none;
    padding:0;
    margin:0;
    height: 48px;
    line-height: 70px;
    background: url("menu_back.png") no-repeat;
}

ul a {
    color:  rgb(113, 136, 157);
    text-decoration: none;
    font-size: 12px;
    line-height: 45px;
    display:block;
}

ul li {
    background: url("menu_line.png") no-repeat;
    position: relative;
    float: right;
    margin: 7px 0px 0px;
    height: 40px;
}

li { 
    float: right;
    border-bottom-width: 0;
    padding: 0px 20px;
}

#content {
    position: relative;
    top: -35px;
    clear: both;
    width: 1005px;
    height: 247px;
    background: url("slider_back.png") no-repeat;
}

#content p {
    margin-left: 2em;
}

#border_left {
    background: url("menu_back_left.png") no-repeat;
    position: relative;
    right: 440px;
    top: -35px;
    height: 48px;
    width: 11px;
    float: right;
}

#border_right {
    background: url("menu_back_right.png")no-repeat;
    position: relative;
    right: -320px;
    top: -35px;
    height: 48px;
    width: 11px;
    float: right;
}

#empty {
    background: none;
}

如您所见，只有有问题的行是保证金：3em 7em 0em;如果我可以制作正确的保证金价值（7em）流体，问题就会解决！

Answer 1

您想要的是居中您的网页？如果你想要居中，我建议使用：

margin: 0 auto; /*left and right margin are "automatic"*/

您可以使用它以任何分辨率为您的身体居中：

body {
    margin: 0 auto;
    width: 80%;
}

如果你把100％的内容放宽，那么没有什么可以集中。如果你想要另一个中心，你想要居中的那个盒子的宽度应该比他父母的宽度要小。

无论如何使用body元素中的值来居中不好。

如何使我的边距适合许多分辨率？

1 个答案: