Question

所以，为了开始这个，我想只是说任何帮助都表示赞赏，我不是在寻找为我准备的整个代码。我试图创建这个但是每次都失败，因为它会破坏页面的整个布局。我对编程很陌生，但我对概念有很好的把握，而且我很乐意学习新东西。

我想在这个网站上创建一个顶部栏，带有徽标和社交图标。没有搜索栏。 http://www.complex.com/

感谢任何人的帮助

Answer 1

首先，作为一般提示：每当您看到要重新创建的内容时，在Chrome中右键单击它并选择＆＃34;检查元素＆＃34;。然后你可以看一下用来创建它的css。

为了让社交图标像您的示例网站一样，他们可以简单地将它们放到正确的位置。

所以HTML：

<div class="header">
  <div class="leftThing">
  </div>
  <div class="rightThing">
  </div>
</div>

CSS：

.leftThing { float:left;}
.rightThing { float:right;}

浮动将使元素尽可能远地移动到您选择的一侧，然后坐在那里。这是关于这个概念的一篇很好的css技巧文章：http://css-tricks.com/all-about-floats/

Answer 2

我让你成为一个小小的JS-Fiddle，向你展示当你向下滚动时如何在屏幕顶部修复标题。希望它有所帮助！

HTML：

<div id="WebContent" class="Content">
    <img src='http://apod.nasa.gov/apod/image/9712/orionfull_jcc_big.jpg'></img>
</div>

CSS：

.Header{
    top: 0px;
    left: 0px;
    min-height: 50px;
    max-height: 50px;
    min-width: 1024px;
    background-color: #2C2C2C;
    color: white;
    position: fixed;
}

.icon{
    height: 50px;
}

.Content{
    max-width: 300;
    max-height: 300;
    overflow-y: auto;
}

小提琴：http://jsfiddle.net/wujood/pgqeLr7s/

或者您可以在标题中插入固定位置：

<div class="header" style="position:fixed">
  <div class="leftThing">
  </div>
  <div class="rightThing">
  </div>
</div>

Answer 3

将CSS float: left或display: inline-block应用于您的元素。

http://jsfiddle.net/njoh7x73/

CSS代码

.menu {
    background-color: #333;
}

.menu div.item {
    width: 64px;
    height: 16px;
    background-color: #888;
}

.menu .item {
    float: left;
    padding: 10px;
    margin: 5px;
}

.menu .item:hover {
    background-color: #555;
}

HTML代码

<div class="menu">
    <a class="item" href="#">LINK</a>
    <div class="item"></div>
    <a class="item" href="#">LINK</a>
    <div class="item"></div>

    <div style="clear:both"></div>
</div

如果您使用此方法（浮动元素），请不要忘记clear它们。

创建图像对象和链接的水平列表

3 个答案: