Question

目前我正试图模仿这个网站进行一些练习 Link

但是我的网站布局存在重大问题。似乎我正在使用position: relative;很多导致我的网站搞砸了导航栏等等。我不确定是否有更简单的方法吗？正如你可以通过网站告诉的那样。徽标和导航栏已经浮动到左右两侧，但它位于屏幕中间。这是另一个我无法解决的问题。当我向右和向左漂浮时，它一直向边界移动。这就是为什么我使用position属性把它放在中间。

另一个大问题是该网站应该没有向右滚动，但是你可以向右走，然后向下走。首页应该都在屏幕上，没有滚动。我再次相信这归结为Div结构

目前我已经设置了背景图片。两个导航栏。顶部的一个和底部的一个。我已经放入了两个日志，并将导航栏放入。但是如上所述，div存在问题。

HTML: 
<body>
<div class="container"></div>

<ul class="nav">
  <li><a href="/">Home</a></li>
  <li><a href="/about/">About</a></li>
  <li><a href="/Member/">member</a></li>
</ul>

<div class="container1">
    <p>a</p>
        <div class="botLay">

        </div>
</div>

<div class="logo">
<img src="Image/Logo.png">
</div>

<div class="logo1">
<img src="Image/Logo.png">
</div>
</body>

导航div是顶部的黑色条。容器1是底杆。徽标1和2是两个徽标。

CSS：

html { 
 background: url(../Image/BackgroundImage.jpg) no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

html, body {
    height: 100%;
}


.logo{
    position: relative;
    top: -157px;
    left: 450px;
    width: 100px;
}
.logo1{
    position: relative;
    top: 521px;
    left: 450px;
}
.container1{
    position: relative;
    top: 446px; 
    right: 40px;
    background-color: rgba(0, 0, 0, 0.65);
    border-top: 0px solid rgba(0, 0, 0, 0.5);
    border-bottom: 0px solid rgba(0, 0, 0, 0.5);
    width: 2000px;
    padding:15px;

}
.nav{
    position: relative;
    top: 36px; 
    right: 40px;
    background-color: rgba(0, 0, 0, 0.65);
    border-top: 0px solid rgba(0, 0, 0, 0.5);
    border-bottom: 0px solid rgba(0, 0, 0, 0.5);
    list-style:none;
    text-align:center;
    width: 2000px;
}
.nav li {
  display: inline-block;
  position: relative;
  left: 280px; 
}
.nav li + li:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  border-left: 1px solid #ffffff;
  padding-left: 8px;
  height: 28px;
}
.nav a{
    display:inline-block;
    padding:35px;
    text-decoration: none;
    color: white;
    font: normal normal normal 12px/1.3em 'Open Sans',sans-serif;
    text-transform: uppercase;
}
ul a:hover {
color: #ffcb80;
}

任何有关修复此代码和建议的帮助都会受到极大的学问。感谢

Answer 1

这里你是一个简单的解决方案

{% for p in top_app %}
            {{ p.dst_port }}
            {{ p.traffic | filesizeformat}}
{% endfor %}

html, body {
    height: 100%;
}

body { 
 background: url('http://www.motionbackgroundsforfree.com/wp-content/uploads/2012/02/Screen-shot-2012-02-07-at-10.02.45-AM.png') no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

header > .logo{
   float: left;
  margin-left: 20&
    }
 

header nav {
  float: right;
}

header { 
    background-color: rgba(0, 0, 0, 0.65);
    border-top: 0px solid rgba(0, 0, 0, 0.5);
    border-bottom: 0px solid rgba(0, 0, 0, 0.5);
    width: 100%;
  height: 100px;
}

.nav {
  margin-right: 20%;
}

.nav li {
  display: inline-block;
  position: relative;
  
}
.nav li + li:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  border-left: 1px solid #ffffff;
  padding-left: 8px;
  height: 28px;
}
.nav a{
    display:inline-block;
    padding:28px;
    text-decoration: none;
    color: white;
    font: normal normal normal 12px/1.3em 'Open Sans',sans-serif;
    text-transform: uppercase;
}
ul a:hover {
color: #ffcb80;
}


footer > .logo{
   float: left;
  margin-left: 200px
}
 


footer { 
    background-color: rgba(0, 0, 0, 0.65);
    border-top: 0px solid rgba(0, 0, 0, 0.5);
    border-bottom: 0px solid rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100px;
position: absolute
  bottom: 0
}

考虑添加自适应导航菜单this question

Answer 2

进行这些更改

 .logo{    
   left: 150px;
   }

  body {    
   overflow-y:hidden; /* For right scrollbar*/
    /* overflow-x:hidden for horizontal scrollbar */
     }

  .nav li {  
    left: 1580px; 
     }

我建议你根据自己的要求进行一些试验和变更，因为职位是相对的。我还建议你使用Mozilla firebug，让你更容易理解。如果你得到你想要的东西，请告诉我。

网站上的Divs导致滚动

2 个答案: