0

我正在创建一个新网站，而我是 html 和 css 的新手，那是我的第一个网站，但我搜索了很多关于如何创建网站的信息。

但是当我从浏览器调整窗口大小时，所有 div 都会自动移动。

我的网站：http ://teteste.herobo.com/ - 语言是葡萄牙语，但你可以理解发生了什么。

如您所见，当您调整窗口大小时，div 会自动更改，有什么办法可以防止 div 在调整页面大小时移动？

我的 HTML 代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link href='http://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

<title>AngoBooks</title>
</head>
<script type="text/javascript">

$(document).ready(function(){
    $('img.g1').hover(function() {
        $(this).stop().animate({opacity:1}, 'fast');
    }, function() {
        $(this).stop().animate({opacity:.5}, 'slow');
    });

});

</script>


<script type="text/javascript">

var i = 0;
var path = new Array();

path[0] = "imagens/1.png";
path[1] = "imagens/2.png";
path[2] = "imagens/3.png";

var k = path.length-1; 

var caption = new Array();


caption[0] = "Primeira descrição";
caption[1] = "Segunda descrição";
caption[2] = "Terceira descrição";


function swapImage(){
var el = document.getElementById("mydiv");
el.innerHTML=caption[i];
var img= document.getElementById("slide");
img.src= path[i];


if(i < k ) { i++;} 
else  { i = 0; }
setTimeout("swapImage()",5000);


}

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}



addLoadEvent(function() {
swapImage();


}); 
</script>




<body>

<div class="cbc">
<div id="redes">


<div style="width:90%; solid #000;">
<div style="float:left; width:33.3%;">
      <div align="center"><img src="imagens/facebook.png" height="40" width="40" />
        <img src="imagens/twitter.png" height="40" width="40" />
        <img src="imagens/g+.png" height="40" width="40" />


      </div>
    </div>
    <div style="float:left; width:33.3%;">

    <form method="POST" action="http://YOUR_DOMAIN_HERE:81/login/login.php">
  <div align="right"><font color="#FFFFFF" face="'Armata', sans-serif">Utilizador:</font>
  <input type="text" name="Utilizador" size="15" />

      </div>
</div>
    <div style="float:left; width:33.4%;"><font color="#FFFFFF" face="'Armata', sans-serif">Password:</font> <input type="text" name="username" size="15" />


    <button type="submit" value="Login" class="botao">Entrar</button>

    <button type="submit" value="Cadastrar" class="botao">Registar</button></div>
<div style="clear:both;"></div>


</div></div>
</div>

</div>
<div id="principal">
<div class="centered-block">
        <a href="/" class="logo-lnk">
          <img src="imagens/logo.png"/>
        </a> 
<nav id="menu">
    <ul>
        <li><a href="#"><font color="white">Ínicio</font></a></li>
        <li><a href="#"><font color="white">Categorias</font></a></li>
        <li><a href="#"><font color="white">Outros produtos</font></a></li>
        <li><a href="#"><font color="white">Carrinho</font></a></li>
        <div id="divisoria"></div>
    </ul>

</nav>
</div>
  <div class="subtitulo">

<p><font color="white">Vendemos Online, desde 2011, os melhores livros</p>

<p> do mercado em Angola, encomende já o seu.</font></p>
</div>

<div id="slideshow">

<body>
<img name="slide" id="slide" alt ="my images" height="300" width="900" src="imagens/1.png"/>
<div id="mydiv"></div>


  <script>
document.getElementById("mydiv").style.color="white";
</script>

</div>
</div>
</div>
</div>

<div style="width:100%; padding: 160px 0 10px 0;">

<div style="clear:both;"></div>



<div style="width:100%; padding: 3px 0 10px 0;">
    <div style="float:left; width:33.3%; height:28px; background-image:url(imagens/titulo.png)"></div>
    <div style="float:left; width:33.3%; height:28px;"><p align="center"><font size="6" color="#ff7c00" face="'Roboto', sans-serif"> Principais categorias </p></div>
    <div style="float:left; width:33.4%; height:28px; background-image:url(imagens/titulo.png)"></div>
<div style="clear:both;"></div>




</div>

<div class="fade1">
<img src="imagens/g1.png" alt="foto" class="g1" />
<img src="imagens/g2.png" alt="foto" class="g1" />
</div>

<div class="fade2">
<img src="imagens/g3.png" alt="foto" class="g1"/>
<img src="imagens/g4.png" alt="foto" class="g1"/>
<img src="imagens/g5.png" alt="foto" class="g1"/>
</div>





<div style="clear:both;"></div>
<div class="creditos">
<div class="empresa">

<div style="width:90%; solid #000; position:relative;">
    <div style="float:left; width:25%;"><h1 align="left"



    ><font color="#A66100">Atendimento</font></h1>
      <div align="left">
        <ul id="atendimento">
          <li>Contacte-nos</li>
          <li>Devoluções</li>
          <li>Mapa do site</li>
        </ul>
      </div>
<ul id="atendimento">
</ul></div>
    <div style="float:left; width:25%;"><h1 align="left">Conta</h1>
      <div align="left">
        <ul id="Conta">
          <li>Conta</li>
          <li>Histórico de Pedido</li>
          <li>Newsletter</li>
        </ul>
      </div>
<ul id="Conta">
</ul></div>
    <div style="float:left; width:25%;"><h1 align="left">Extras</h1>
      <div align="center">
        <ul id="Extras">
          <li>
            <div align="left">Fabricantes
            </div>
          </li>
          <li>
            <div align="left">Vale Presente
            </div>
          </li>
          <li>
            <div align="left">Promoções</div>
          </li>
        </ul>
      </div>
      <ul id="Extras">
</ul></div>
    <div style="float:left; width:25%;"><div class="informacao">
<h1 align="left">Informação</h1>
<div align="left">
  <ul id="info">
    <li>Sobre nós</li>
    <li>Sobre as Encomendas</li>
    <li>Termos e Condições</li>
  </ul>

</div>
<ul id="info">
</ul>
</div>

</div>
</div>
</div> 
</div>
</div>


<div style="width:100%; padding: 0px 0 10px 0;">
    <div style="float:left; width:33.3%; height:18px;><div id="redessociais">
</div>
    <div style="float:left; width:33.3%; height:18px;"><div class="developer">Copyright © 2013 AngoBooks. Todos os direitos reservados. <br> Site desenvolvido por: Rúben Diogo.</p></div></div>
<div style="clear:both;"></div>
    <div style="float:left; width:33.4%; height:18px;"></div>
    </div>
    </div>

</body>
</html>

我的CSS代码：

* {
    padding:0;
    margin:0 auto;
}
 div#principal {
    background-image:url(../estrutura/bg.png);
    height:410px;
    background-repeat:repeat-x;
    width:100%;
}
 #menu ul {
    padding:0px;
    margin:23px;
    text-aligne:center;
    list-style:none;
    text-align:enter !important;
    left:162px;
    float:right;
    font-family:'Armata', sans-serif;
}
 #menu ul li {
    display:inline;
}
 #menu ul li a {
    padding:2px 10px;
    display:inline-block;
    color:black;
    text-decoration:none;
    z- ndex:12;
    horizontal-align:middle;
}
 #menu ul li a:hover {
    color:white;
    border-bottom:3px solid white;
}
 .logo-lnk {
    width:250px;
    display:block;
    float:left;
}
 .logo-lnk img {
    width:100%;
    border:0;
}
 .centered-block {
    width:987px;
    margin:0 auto;
    padding:23px 0 20px 0;
}
 div#divisoria {
    height:1px;
    weight:100%;
    background:white;
}
 .subtitulo {
    padding:56px 0 20px 0;
    text-align:center;
    font-size:45px;
    font-family:'Roboto', sans-serif;
    text-shadow:0.0em 0.0em 0.01em #FFB873;
}
 .g1 {
    background:none;
}
 .g1:hover {
    background:#0000ff;
}
 .fade1 {
    padding:10px 0 20px 0;
    text-align:center;
}
 .fade2 {
    text-align:center;
}
 div#slideshow {
    margin:0 auto;
    text-align:center;
}
 div#mydiv {
    background-color:#ff7c00;
    width:900px;
    font-family:'Armata', sans-serif;
}
 .creditos {
    background-image:url(../estrutura/bg2.png);
    height:75px;
    weight:100%;
    padding:90px 0 20px 0;
    text-align:center;
}
 .empresa {
    list-style-type:none;
    color:#A66400;
    font-family:'Roboto', sans-serif;
    font-size:12px }
 ul#atendimento {
    list-style-type:none;
    font-size:13px;
}
 ul#Extras {
    list-style-type:none;
    font-size:13px;
}
 ul#Conta {
    list-style-type:none;
    font-size:13px;
}
 ul#info {
    list-style-type:none;
    font-size:13px;
}
 div#titulo {
    background-image:url(../imagens/titulo.png);
    width:100%;
    height:28px;
}
 .facebook {
    text-align:left;
    width:60px;
    height:60px;
}
 .youtube {
    text-align:left;
    width:60px;
    height:60px;
}
 .twitter {
    text-align:left;
    width:60px;
    height:60px;
}
 .developer {
    font-size:12px;
    color:#bebebe;
    text-align:center;
}
 div#redes {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:40px;
    background:url(../imagens/bgg.jpg);
    z-index:30;
    opacity:0.6;
    filter:alpha(opacity=60);
}
 .cbc {
    height:40px;
}
 .botao {
    background-color:#ff7c00;
    color:white;
    font-family:'Armata', sans-serif;
    position:absolute;
}
4

3 回答 3

9

将此添加到您的样式表中：

body { min-width: 750px; }

（根据您的需要调整宽度）。当浏览器窗口小于 750px 时，会出现水平滚动条。

于 2013-08-02T18:13:21.280 回答
0

如果您希望页眉和页脚停止变宽，请添加：

.class{max-width:960px}/*or whatever you want the px to be*/

如果您不希望它们变得更小，请添加：（就像 LinkinTED 一样）

.class{min-width:960px}/*or whatever you want the px to be*/

如果您希望它始终具有相同的宽度：

.class{width:960px}

这一切都取决于你想要什么。.class可以是你的身体，或者任何包装你所有的 html 身体元素的东西。

于 2013-08-02T18:22:38.473 回答
-3

我在您的网站上尝试过，似乎有效！

body { 
    width: 100%; 
}
于 2013-08-02T18:24:54.337 回答