Question

我试图为一个有点棘手的网站设置标题/导航的样式。我有一个PSD图像，它需要如何看 -

我可以使用徽标，但我正在努力解决如何在右侧将所有其他元素放在彼此周围的问题。通常我只有徽标和导航链接。这是代码 -

HTML

<header>
        <h1 id="logo">
            <img src="images/Logo.png">
        </h1>
        <div id="phoneandemail">
          <h3>
                <img src="images/phone.png" alt="phone" >
                <p>0113 220 5265</p>
            </h3>
            <h3>
                <img src="images/email.png">
                <p>hello@featuremedia.co.uk</p>
            </h3>
        </div>

          <nav>
            <a href="index.html">HOME</a>
            <a href="portfolio.html">PORTFOLIO</a>
            <a href="products.html">PRODUCTS</a>
            <a href="about.html">ABOUT</a>
            <a href="contact.html">CONTACT</a>
            <a href="blog.html">BLOG</a>
          </nav>

        <h3>
            <i class="fa fa-facebook" aria-hidden="true"></i>
            <i class="fa fa-twitter" aria-hidden="true"></i>
            <i class="fa fa-instagram" aria-hidden="true"></i>
            <i class="fa fa-youtube-play" aria-hidden="true"></i>
            <i class="fa fa-linkedin" aria-hidden="true"></i>
        </h3>


    </header>

我正在使用重置＆amp;我的CSS旁边的骨架css网格。这是我到目前为止所做的事情 -

CSS

header {
    background: #ffffff;
    height: 100px;
    position: fixed;
    width: 100%;
    top: 0;
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    z-index: 10;
}

nav {
    float: right;
    line-height: 50px;
    font-weight: 400;
}

nav a {
    color: #bdc3c7;
    text-decoration: none;
    display: inline-block;
    padding: 0 10px 0 10px;
}

#phoneandemail {
    float: right;
    height: 10px;
    width: 200px;
}

h3 i {
    float: right;
}

我是否需要将它们全部漂浮或是否有更合适的方式将它们组合在一起，就像PSD图像一样？我需要尽可能接近它。

Answer 1

你可以很容易地习惯这个，这是如何：为每个div创建一个网格和颜色，这样您就可以知道自己在做什么了。在你获得所需的网格之前，不要填写任何内容。所以，让我们来看看：

首先制作两个向左浮动的div，这样就可以得到网格的第一部分：

<header>
    <div class="left-header"></div>
    <div class="right-header"></div>
</header>

现在您已经获得了第一部分（徽标的左侧，导航的右侧等）。其次给他们颜色，让你知道你正在改变什么以及你正在做什么。除此之外，给他们所需的所有选项，如宽度，浮动等。

.left-header { background:red; width:100px; float:left; height:50px; }
.right-header { background:blue; max-width:200px; float:left; height:50px; }

注意： 我也使用＆＃34;高度＆＃34;在这个例子中只是为了确保出现一些东西。如果您没有给出高度/宽度，您将无法看到屏幕上出现任何内容。但不要忘记在最后删除高度。内容将生成您的身高。

请记住：我给了他们一个宽度，但是你应该在photoshop中查看它的宽度。我想它应该是响应式的，所以给左边的div一个宽度（因为它有一个固定宽度的图像），右侧是一个min-width和/ max-width所以你的导航将保持响应。当您想要保持响应时，宽度很差。所以只能在真正需要的地方使用。

你的第一部分已完成：＆＃34;左标题＆＃34;只需要一张图片。但是等到你完成了你的网格之后。其次，我们要完成你的右边标题＆＃34;一部分。

再一次：需要两个div。顶部div（用于电话和邮件）和底部div用于导航和社交图标。

<header>
    <div class="left-header"></div>
    <div class="right-header">
         <div class="right-header-top"></div>
         <div class="right-header-bottom"></div>
    </div>
</header>

再一次给他们颜色。高度没有必要。内容将这样做。但是由于我们还没有内容，所以现在为元素添加一些高度。现在底部又是两个div;左右（左侧为导航，右侧为社交图标）。等...

请注意：有很多框架都有这种网格。但要了解它是如何工作的，你应该试试这个。如果您对所制作的网格感到满意并且它应该是这样，那么删除颜色并添加内容。

这部分的例子：

<header>
    <div class="left-header"></div>
    <div class="right-header">
        <div class="right-header-top"></div>
        <div class="right-header-bottom">
            <div class="right-header-bottom-left"></div>
            <div class="right-header-bottom-right"></div>
        </div>
    </div>
</header>

<style>
    .left-header { background:red; width:100px; float:left; height:50px; }
.right-header { background:blue; max-width:200px; float:left; height:50px; }

.right-header-top { background:green; width:100px; height:25px; }
.right-header-bottom { background:orange; width:100px; height:25px; } <!-- You won't see this as it's behind the blue and gray part. -->

.right-header-bottom-left { float:left; height:25px; width:50%; background:blue;}
.right-header-bottom-right { float:left; height:25px; width:50%; background:gray; }
</style>

CSS - 设置标题/导航的样式

1 个答案: