Question

jsfiddle

我正在尝试创建最好描述为网格格式的博客标题。每个项目都有一个指定的位置 - 顶部，底部，左侧，右侧 - 每个侧面都有一个边框。我已经有了基本的布局，但是把它变成像素完美的网格有点超出了我的能力范围。我附上了一张最终应该是什么样子的图片。下面是代码..我错过了什么？

html-

<div id="blog-header">
        <span class="blog-logo"><img src="http://placehold.it/262x134" alt="logo" /></span><!-- end blog-logo -->
        <div class="mid">
            <p class="blurb">Hi, this is a brief bio.<br/>Ok that's it!</p><!-- end blurb -->
            <div class="blog-social">
                <ul>
                <li><a href="#"><img src="http://placehold.it/25x25" alt="facebook" /></a></li>
                <li><a href="#"><img src="http://placehold.it/25x25" alt="twitter" /></a></li>
                <li><a href="#"><img src="http://placehold.it/25x25" alt="instagram" /></a></li>
                <li><a href="#"><img src="http://placehold.it/25x25" alt="pinterest" /></a></li>
            </ul>
            </div><!-- end blog-social -->
        </div><!-- end mid -->
        <div class="right">
            <p class="blog-nav"><a href="index.php?page_id=7">PORTFOLIO<span style="padding: 0 5px 0 5px;">|</span></a><a href="index.php?page_id=26">BLOG<span style="padding: 0 5px 0 5px;">|</span></a><a href="index.php?page_id=5">ABOUT<span style="padding: 0 5px 0 5px;">|</span></a><a href="index.php?page_id=9">CONTACT</a></p>
            <div class="email">
                <img src="http://placehold.it/350x50">
            </div><!-- end email -->
        </div><!-- end right -->
    </div><!-- end blog-header -->

css-

#blog-header {
    height: 124px;
    width: inherit;
    margin: 0 auto;
}

#blog-header .mid,
#blog-header .blog-logo {
    border-right: 2px solid #333333;
    float: left;
}

#blog-header .mid {
    padding-left: 15px;
    width: 230px;
}

#blog-header .right {
    padding-left: 15px;
    float: right;
}

#blog-header .blog-logo {
    padding-right: 15px;
    width: 262px;
}

#blog-header .blurb {
    border-bottom: 2px solid #333333;
    padding-bottom: 15px;
    font-family: Alexandria;
    font-size: 80%;
    text-align: center;
    width: 200px;
}

#blog-header .blog-social {
    clear: both;
    width: 125px;
    margin: 0 auto;
    padding: 10px 0 10px 0;
}

#blog-header .blog-nav {
    padding: 7px 0 15px 0;
    width: 350px;
}

#blog-header .email {
    border-top: 2px solid #333333;
    padding-top: 17px;
    width: 350px;
}

enter image description here

Answer 1

首先，尽量不要在HTML中使用id标记设置标记样式。事实上，如果可能的话，尽量不要用类来设置样式，除非你需要。你应该使用谷歌CSS选择器，并尝试使用尽可能多的那些来设置你的HTML样式。

由于您使用的唯一图像是左侧的大图像，因此您无需在其周围放置跨度。只需浮动：离开图像。

另外，您使用的是HTML5吗？如果是这样，那么＃blog-header应该是一个标签。如果您的文档中有多个标题，那么如果需要，可以给它一个类来区分它。

您也不需要在无序的社交图标列表中使用div。只需浮动列表，然后显示：内嵌图标。而不是使用图像作为图标，你应该谷歌图标字体。

还有更多，但是从那里开始，一旦你做出这些改变就回到我们身边。请记住，当涉及到HTML和CSS时，少即是多了！

Answer 2

请告诉我们你被困的部分，而不是整个css，你究竟想要什么，然后我们可以提供帮助。当您完成整个项目的％90并要求我们重新编写整个项目以便我们修复您的错误时，这是毫无意义的。

顺便说一句，对于这样的横幅，代码似乎太长了。我删除了你的一半css，他们的工作完全一样。要么你从某个地方拿走这些，要么你在学习曲线上没有任何方法论。

我建议你参加专业的开发课程，这些课程可以帮助你建立清晰的代码。

网格状网站标题，创建像素完美排列

2 个答案: