Question

根据我原来问题的答案，我修改了我的代码。我希望有人能告诉我这是否是一个比较好的方法。我的原帖和代码如下。

更新代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Language" content="en-us" />

    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content= "" />

    <title>Example</title>

    <base href="" />

    <link rel="stylesheet" type="text/css" href="" />

    <style type="text/css">

        * {

            margin: 0;
            padding: 0;

        }

        #wrapper {


        }

        #header {

            background-image: url('images/bg-inner-page.gif');
            height: 200px;

        }

        #logo {

            float: left;
            margin-top:  50px;
            margin-left: 100px;

        }

        #topnav {

            float: right;
            margin-top: 50px;
            margin-right: 1250px;

        }

        #topnav ul {

            word-spacing: 10px;

        }


        #topnav ul li {

            list-style-type: none;
            display: inline;

        }

        #content {

            background-color: orange;

        }

        #footer {

            background-color: blue;

        }

    </style>
</head>

<body>

    <div id="wrapper">
        <div id="header">

            <div id="logo">
                logo
            </div>

            <div id="topnav">
                <ul>
                    <li>home</li>
                    <li>about</li>
                    <li>browse</li>
                    <li>faq</li>
                    <li>contact</li>
                </ul>
            </div>


        </div>
        <div id="content">content</div>
        <div id="footer">footer</div>
    </div>
</body>
</html>

原始帖子

我是编码和CSS的新手。我试图排队CSS元素，但不知道如何我可以放置某种线来获得确切的行高，位置等。我试图使用FireBug然而无济于事。是否有一些我可以使用的工具可以在画布上放置网格？

修改

以下是我正在使用的代码示例。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Language" content="en-us" />

    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content= "" />

    <title>Example</title>

    <base href="" />

    <link rel="stylesheet" type="text/css" href="" />

    <style type="text/css">

    body {

        margin: 0;
        padding: 0;

    }

    #wrapper {


    }

    #header {

        background-image: url('images/bg-inner-page.gif');
        height: 200px;

    }

    #logo {

        width: 20px;
        position: relative;
        top: 50px;
        left: 100px;

    }

    #topnav {

        width: 500px;
        position: relative;
        top: 14px;
        left: 150px;

    }

    #topnav ul {

        word-spacing: 10px;

    }

    #topnav ul li {

        list-style-type: none;
        display: inline;
        word-spacing: 10px;

    }

    #content {

        background-color: orange;

    }

    #footer {

        background-color: blue;

    }

    </style>
</head>

<body>

    <div id="wrapper">
        <div id="header">

            <div id="logo">
                logo
            </div>

            <div id="topnav">
                <ul>
                    <li>home</li>
                    <li>about</li>
                    <li>browse</li>
                    <li>faq</li>
                    <li>contact</li>
                </ul>
            </div>

        </div>
        <div id="content">content</div>
        <div id="footer">footer</div>
    </div>
</body>
</html>

Answer 1

通常不建议在网页中进行逐像素布局。您永远无法确定哪个浏览器，哪个平台以及未来客户安装了哪种字体的分辨率将会查看该页面。

使用HTML和CSS指定文档的逻辑布局。告诉渲染机器，哪些部分具有enphasis，哪些不太重要等等，让渲染器决定如何在目标显示和UI主题上表示它是最佳方式。

如果你开始担心像素精确的行高，你的页面最可探测的看起来会在一个浏览器上膨胀，在一个平台上的一个分辨率和turd中的世界其他地方。

从物理标记移动到逻辑标记。

Answer 2

Firefox的Web Developer Extension（http://chrispederick.com/work/web-developer/）具有网格功能。

或者，在html / css中，您可以使用网格背景创建一个覆盖的全屏div来为您提供视觉效果，但它不是最佳解决方案，因为您还必须使其成为最高的z-index元素，或使所有其他元素都具有透明背景，这可能会影响您的设计。

强烈建议只使用插件，你不想仅仅作为开发人员工具混合使用html / css。

<subjective>虽然我同意“不做像素级设计”的观点，但有时项目的要求需要它。使用像YUI-reset这样的重置css是让大多数浏览器渲染保持一致的更好方法之一，但是还要求你从头开始对所有元素进行stye声明。 </subjective>

Answer 3

我同意上面的Hyperboreus，尝试在所有浏览器中使网站完全相同是令人头疼的秘诀。

但是，我经常使用xscope（http://iconfactory.com/software/xscope）来覆盖我的mac上的指南和网格。这不是免费的，但值得花25美元。

编辑：刚看到你的代码。如果您只想尝试将徽标和导航放在同一行，请尝试以下方法：

<title>Example</title>

<base href="" />

<link rel="stylesheet" type="text/css" href="" />

<style type="text/css">
body {
    margin: 0;
    padding: 0;
}

#header {
    background-image: url('images/bg-inner-page.gif');
    height: 200px;
}

#logo {
    width: 20px;
    float: left;
    margin-top: 50px;
    margin-left: 100px;
}

#topnav {

    width: 500px;
    margin-left: 150px;
    margin-top: 14px;

}

#topnav ul {

    word-spacing: 10px;

}

#topnav ul li {

    list-style-type: none;
    display: inline;
    word-spacing: 10px;

}

#content {

    background-color: orange;

}

#footer {

    background-color: blue;

}

</style>

<div id="wrapper">
    <div id="header">

        <div id="logo">
            logo
        </div>

        <div id="topnav">
            <ul>
                <li>home</li>
                <li>about</li>
                <li>browse</li>
                <li>faq</li>
                <li>contact</li>
            </ul>
        </div>

    </div>
    <div id="content">content</div>
    <div id="footer">footer</div>
</div>

您可以在此处查看：http://jsfiddle.net/BRKrx/

我如何排列CSS元素？我有可以使用的工具吗？

3 个答案: