0

近一年来，我一直在研究预制的 Web 模板，我从在 PSD 中从头开始制作自己的模板开始。该网站可位于此处：

http://gamelabs.webege.com/

我也是第一次将 PSD 转换为 HTML/CSS。尽管如此，我还是可以在笔记本电脑上使用它，直到我在多个其他浏览器（Mac/iPad/Android）等上查看为止。整个事情都搞砸了，我已经搜索了将近 3 天，但仍然没有解决方案。尝试将网站包装在边距：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 的启发。

4

1 回答 1

0

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

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

更简单的方法可能是在测量后添加px，否则它不会知道测量单位，因此它是无效的。像这样想。世界大约有 250,000 长。厘米还是光年？

如果您尝试更改页面的边距，您应该这样做：

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;
}
于 2013-08-01T22:15:56.197 回答