Question

我确实是整个网站的新手。我想创建一个类似于happycog.com/上的skicky导航栏。我想在导航上有7或8个链接。请问有人可以帮忙吗？

Answer 1

您可以从Foundation

这样的框架开始

或Bootstrap

开始使用这些文件比较容易，因为有很多文档，社区非常大。

Answer 2

我猜你的意思是css和html。

HTML

<div class="navbar">8 li items</div>

CSS

.navbar {
width:100%;
position:fixed;
top:0;
}

你必须给包含元素一个宽度（或者从'html'到100％）。

Answer 3

首先，要意识到您需要一个容器，用于指定宽度为980或1180像素的所有8个链接。此外，其父容器（包含我们的链接容器的容器）的宽度与浏览器的当前长度一样重要。

因此，假设您的链接容器为<div id="links-container">并包含 <a href="#">Home</a><a href="#">Contact Us</a>等。我们的.links-container的父级是body标签。 - 这就是html的全部内容，现在我们将使用的样式是CSS。

我们将为容器（带链接）设置样式，为其提供样式属性（内联或在css中）

.links-container {
    // this will make the container float
    // at the center of its parent container
    margin:0 auto;
    // this will set the container's width
    // if not set, it will inherit its parent's width
    width:980px;
}

如何创建居中并适应不同屏幕尺寸的Sticky Nav条？

3 个答案: