从一个基本的电子商务网站开始，我有一个带有 Logo 和一些导航的漂亮标题设计。我注意到，当我按住 ctrl + scrolling 放大和缩小页面时，网站上的内容会四处移动，这也适用于我使用右上角的调整大小按钮调整网络窗口大小时浏览器的一 Angular 并在浏览器的边框周围拖动。
当我这样做时，我网站的设计和内容真的错位和扭曲了。 div 和文本重叠等...
有没有办法让内容完全不移动，使其成为静态的？我更具体地想要的是，当您调整浏览器大小时，Web 内容只会隐藏在浏览器窗口已调整大小的位置。
这是我的 HTML/CSS:
#cartlist {
float: right;
margin-right: 353px;
margin-top: -50px;
padding-left: 300px;
}
#carttext {
font-family: arial;
margin-left: 50px;
margin-top: -51px;
}
#text {
font-size: 14px;
}
#count {
font-size: 12px;
margin-top: -28px;
}
#img a:hover {
background-color: e3e3e3;
}
#img a {
padding-top: 25px;
padding-right: 150px;
padding-left: 5px;
padding-bottom: 5px;
}
#headerbackground {
background-image: url(bit.jpg);
background-repeat: repeat-x;
margin-top: -10px;
margin-left: -10px;
margin-right: -10px;
padding-bottom: 1px;
}
#headernav {
margin-left: 244px;
padding-top: 5px;
margin-bottom: 10px;
margin-right: 250px;
}
#headernav li {
display: inline;
font-family: arial;
font-size: 11px;
padding-left: 0px;
padding-right: 32px;
}
#headernav li a {
text-decoration: none;
color:black;
}
#headernav li a:hover {
color:adadad;
}
#headerlogo {
margin-left: 280px;
margin-right: 680px;
margin-top: 10px;
}
#nav {
margin-left: 240px;
margin-right: 675px;
margin-top: 24px;
}
#nav li {
display:inline;
font-size: 12px;
font-family: arial black;
padding-left: 0px;
padding-right: 0px;
}
#nav li a{
text-decoration: none;
color:white;
background-color: 0f0f0f;
padding:8px 19px;
}
#nav li a:hover{
background-color: 333232;
}<html>
<head lang = "sv-se">
<meta charset="utf-8">
<title>SSDKUNGEN</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="header.css">
</head>
<body id = "body">
<div id ="header">
<div id ="headerbackground">
<ul id ="headernav">
<li><a href ="">HEM</a></li>
<li><a href ="">LOGGA IN / REGISTRERA DIG</a></li>
<li><a href ="">INFOCENTER</a></li>
<li><a href ="">OM OSS</a></li>
</ul>
<div id ="headerlogo">
<img src="ssdkungen.png" style="width 410px;height:41px;">
</div>
<div id = "cartlist">
<p id = "img"><a href = ""><img id = "cart" src ="cart.png";></a></p>
<div id = "carttext">
<p id = "text">Din kundvagn</p><br>
<p id = "count">kundvagnen är tom</p>
</div>
</div>
<ul id ="nav">
<li><a href ="product_list.php">PRODUKTER</a></li>
<li><a href ="installation_guide.php">INSTALLATIONSGUIDE</a></li>
<li><a href ="ssd_info.php">OM SSD</a></li>
</ul>
</div>
</div>
</body>
</html>代码很乱，但我只想就我的问题寻求一些建议。
最佳答案
一种可能的方法是为页面设置最小宽度。但是，这可能并且将会阻止页面响应。
html, body {
min-width: 1000px;
}
您还可以使用模板系统，例如 Bootstrap，它允许您以围绕网格系统为中心的方式设计页面。这允许您为较小的屏幕和分辨率优雅地折叠您的布局。
关于html - 使网页上的设计静态化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33902599/