-1

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;
}

在此处输入图像描述

4

2 回答 2

1

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

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

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

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

还有更多，但从那里开始，一旦您做出这些更改，请回复我们。请记住，对于 HTML 和 CSS，少即是多！

于 2013-08-10T21:23:13.507 回答
0

请向我们发布您遇到的部分，而不是整个 CSS，您到底想要什么，然后我们可以提供帮助。当您制作整个项目的 %90 并要求我们重新编写整个项目以便我们可以修复您的错误时，这是​​没有意义的。

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

我建议您参加可能有助于您构建清晰代码的专业开发课程。

于 2013-08-10T21:26:34.963 回答