Html 如何在调整页面大小时防止div移动_Html_Css

Html 如何在调整页面大小时防止div移动

html css

Html 如何在调整页面大小时防止div移动,html,css,Html,Css,我正在创建一个新网站，我不知道html和css，这是我的第一个网站，但我搜索了很多关于如何创建网站的信息但当我从浏览器调整窗口大小时，所有div都会自动移动我的网站：-语言是葡萄牙语，但你可以理解发生了什么正如您所看到的，当您调整窗口大小时，div会自动更改，是否有任何方法可以防止div在调整页面大小时移动我的Html代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

我正在创建一个新网站，我不知道html和css，这是我的第一个网站，但我搜索了很多关于如何创建网站的信息

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

我的网站：-语言是葡萄牙语，但你可以理解发生了什么

正如您所看到的，当您调整窗口大小时，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>

将其添加到样式表中：

body { min-width: 750px; }

（根据需要调整宽度）。

当浏览器窗口小于750px时，将显示水平滚动条。

将其添加到样式表中：

body { min-width: 750px; }

（根据需要调整宽度）。

当浏览器窗口小于750px时，将显示水平滚动条。

如果希望页眉和页脚不再变宽，请添加：

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

如果你不想让它们变小，那么加上：（就像LinkinTED所做的那样）

如果希望其宽度始终相同：

.class{width:960px}

这完全取决于你想要什么

.class

可以是您的正文，或者任何包装所有html正文元素的内容。

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

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

如果你不想让它们变小，那么加上：（就像LinkinTED所做的那样）

如果希望其宽度始终相同：

.class{width:960px}

这完全取决于你想要什么

.class

可以是你的主体，也可以是任何包装你所有html主体元素的东西。

我在你的网站上试用过，似乎效果不错

body { 
    width: 100%; 
}

我在你的网站上试过了，似乎很管用

body { 
    width: 100%; 
}

非常感谢你，你救了我的命没问题，请不要忘记将答案标记为解决方案。这对我不起作用，我的

仍会折叠到导航栏上的下一行。它们被设置为

显示：内联块，我将最小
宽度
设置为等于导航栏图标的总宽度
。但是，在调整大小时，它们只是开始相互填充。有人有什么想法吗？回应我上一篇帖子：对不起，我按错了刷新页面的命令。。。昨天在我的linux机器上按了很多次Alt-R，我回到了我的Mac电脑上，它没有刷新！非常感谢你，你救了我的命没问题，请不要忘记将答案标记为解决方案。这对我不起作用，我的
仍会折叠到导航栏上的下一行。它们被设置为显示：内联块，我将最小
宽度
设置为等于导航栏图标的总宽度
。但是，在调整大小时，它们只是开始相互填充。有人有什么想法吗？回应我上一篇帖子：对不起，我按错了刷新页面的命令。。。昨天在我的linux机器上按了很多次Alt-R，我回到了我的Mac电脑上，它没有刷新！