Question

我已经在预制的网页模板上工作了近一年了，我开始在PSD中从零开始创建自己的模板。该网站可以在这里：

http://gamelabs.webege.com/

我第一次将PSD切换为HTML / CSS。尽管如此，我还是可以在我的笔记本电脑上工作，直到我在多个其他浏览器（Mac / iPad / Android）上查看等等。整件事搞砸了，我现在已经搜索了将近3天，现在仍然没有解决方案。尝试在margin：0;中包装网站，使用其他技术，如最小/最大宽度，使用定位并仍然对齐，在许多浏览器屏幕上显示底部滚动，但我自己的计算机。这里没有溢出，因为我可以隐藏滚动但网站被剪切。这是我第一次从头开始一个网站，我仍然停留在地面。我还想提一下，我不打算使用grid.less或bootstrap构建一个响应式WD，我只是希望网站在任何打开的浏览器窗口上均匀对齐并且宽度适中。 我的不稳定CSS的摘录如下：

  body {
    margin: 0;
    padding: 0;
    background-color:#000;
}

#wrapper {
    margin: 0 auto;
    position:relative;
width: 100%;
        }

 #bottombar 
{ 
     left: 0px; 
     top: 750px; 
     position: absolute; 
     width: 100%;
     height: 200px;
     z-index:1;
     background:url(images/foot.png) repeat-x;
} 

 #bottombarglow 
{ 
     left: 260px; 
     top: 733px; 
     position: absolute; 
     width: 800px;
     height: 51px;
     z-index:2;
     background:url(images/bottombarglow.png);
} 

 #topbar 
{ 
     left: 0px; 
     top: 0px; 
     position: absolute; 
     width: 100%;
     height: 82px;
     z-index:3;
     background:url(images/tb.png)repeat-x;
} 

 #blueline 
{ 
     left: 80px; 
     top: 648px; 
     position: absolute; 
     width: 1200px;
     height: 2px;
     z-index:4;
     background:url(images/blueline.png);
} 

 #bullets 
{ 
     left: 100px; 
     top: 660px; 
     position: absolute; 
     width: 860px;
     height: 87px;
     z-index:5;
     background:url(images/gallery_left.png);
}  

 #gallerybutton 
{ 
     left: 980px; 
     top: 670px; 
     position: absolute; 
     width: 257px;
     height: 67px;
     z-index:6;
     background:url(images/gallery.png);
} 

 #menu 
{ 
     left: 840px; 
     top: 14px; 
     position: absolute; 
     width: 450px;
     height: 54px;
     z-index:7;
     background:url(images/menu.png);
} 

 #footer 
{ 
     left: 156px; 
     top: 810px; 
     position: absolute;
     z-index:8;
     width: 400px;
     height: 98px;
     background:url(images/footer.png);
} 

 #logo 
{ 
     position: absolute; 
     width: 237px;
     height: 156px;
     z-index:9;
     background:url(images/logo.png);
}

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 content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Title and CSS -->
<title>Game Art Labs | Play for Fun</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="bootstrap.min.css">
<!-- Fav and touch icons -->
<link rel="icon" href="http://appbuzzsolutions.com/gal/favicon.png" type="image/png">
    </head>
    <body>
    <div id="wrapper">
            <div id="logo"><a href="#" target="_self" class="logo"></a></div>
            <div id="topbar"></div>
            <div id="menu"></div>
            <div id="bullets"></div>
            <div id="gallerybutton"><a href="#" target="_self" class="gallery"></a></div>
            <div class="clearfix"></div>
            <div id="blueline"></div>
            <div id="bottombarglow"></div>
            <div id="footer"></div>
            <div id="bottombar"></div>
            <!-- BG SLIDER -->
<!-- set the active class on whichever image you want to show up as the default 
(otherwise this will be the last image) -->
<div id="slideshow">
    <img src="images/bg1.png" alt="Slideshow Image 1"/>
    <img src="images/bg2.png" alt="Slideshow Image 2" />
    <img src="images/bg3.png" alt="Slideshow Image 3" />
    <img src="images/bg4.png" alt="Slideshow Image 4" />
    <img src="images/bg5.png" alt="Slideshow Image 5" />
    <img src="images/bg6.png" alt="Slideshow Image 6" class="active"  />
</div>
<!-- Java Starts -->

    <script src="bootstrap.min.js"></script>
<script src="jquerry.js" type="text/javascript"></script>
        <script type="text/javascript">

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order

    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 4000 );
});

</script>
<!-- Java Ends -->
</div>
 </body>
 </html>

这开始让我有点紧张，我会承认。这里的错误必须非常基本，但我的知识也是如此。希望有人可以帮助我和我们在一起。将回复任何查询。提前谢谢！ PS：我在设计时受到了Kabam.com的启发。

Answer 1

如果您尝试实际定义整个网页窗口的宽度，则需要执行以下操作：

body {
  width: 1600px;  //You can set it to any width
  padding: 0px;
  background-color:#000;
}

更简单的可能是在测量后添加 px ，否则，它将不知道测量单位，因此它是无效的。想想这样。这个世界长约25万。厘米，还是光年？

如果您尝试更改页面的边距，则应执行以下操作：

body {
  width: 1000px;  //You can set it to any width
  margin: auto; //Auto will automatically center the whole page
  padding: 0px; //Don't forget px!
  background-color:#000;
}

网站对齐宽度，错了

1 个答案: