-1

这是我当前使用的布局的 CSS 代码。它与 Google Chrome 和Opera完全兼容，但与 Firefox 11 和 Internet Explorer 9 不同步。

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, Verdana, Sans-serif;
    font-size: 12px;
    color: Black;
}

.hidden {
    display: none;
}

#page-container {
    width: 100%;
    margin: auto;
}

#main-nav {
    background: #6e98ba;
    height: 58px;
}

#main-nav dl { margin: 0; padding: 0; border: 4px solid #6e98ba;}

#main-nav dt { float: left;}

#main-nav  dt a {
    display: block;
    height: 0px;
    padding:50px 0 0 0;
    overflow: hidden;
    background-repeat: no-repeat;
}

#main-nav dt a:hover { background-position: 0 -50px;}
#main-nav dt#home, #main-nav dt#home a { width: 90px; background-image: url();}
#main-nav dt#lncrna, #main-nav dt#lncrna a { width:89px; background-image: url();}
#main-nav dt#rbps, #main-nav dt#rbps a { width:151px; background-image: url();}
#main-nav dt#interaction, #main-nav dt#interaction a { width:102px; background-image: url();}
#main-nav dt#downloads, #main-nav dt#downloads a { width:102px; background-image: url();}
#main-nav dt#references, #main-nav dt#references a { width:102px; background-image: url();}

#header {
    height: 100px;
}

#sidebar-a {
    float: right;
    width: 280px;
    line-height: 18px;
}

#sidebar-a .padding (
    padding:25px;
}

#content {
    margin-right: 280px;
    line-height: 18px;
}

#content .padding {
    padding: 25px;
    margin-right: 280px;
}

#footer {
    clear: both;
    font-family: Tahoma, Arial, Helvetica, Sans-serif;
    font-size: 11px;
    color: Black;
    border: 2px solid #3d7bc1;
    padding: 13px 25px;
    line-height: 18px;
}

#footer #altnav {
    width: 350px;
    float: right;
    text-align: right;
}

#footer a {
    color: Black;
    text-decoration: none;
}

#footer a:hover {
    color: #db6d16;
}

#header h1 {
    margin-left: 10px; margin-top: 5px; margin-bottom: 0; margin-right: 0; padding: 0; color: #0996d7;
}

#content h2 {
    margin: 0;
    padding: 0;
    padding-bottom: 15px;
}

#content p {
    margin: 0;
    padding: 0;
    padding-bottom: 15px;
}

页脚边框不显示链接颜色不显示，并且标题文本的颜色不是我设置的颜色，非常感谢任何关于这方面的建议或修复。正如这里所问的，是一个示例 html 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>

        <style>
            input[type="text"] {margin: 0; padding: 4px; border: 2px solid #3d7bc1; border-radius: 5px;}
            input[name="bla"] {
                margin: 0;
                padding: 4px;
                border: 2px solid #3d7bc1;
                border-radius: 5px;
            }
            input[type=text]:focus {
                border-color: orange;
                box-shadow: 0px 0px 25px -2px #333;
            }
        </style>
    </head>

    <body>
        <div id="page-container">
            <div id="header"><h1>bla</h1>
                <center>
                    <form style="display:inline" name=rna method="POST" action="http://localhost/searchengine.php">
                    <input id="search" name="search" placeholder="Search" type="text" value="" size="100" style="margin-bottom:0;">
                    <input class="button" name="Submit" type="Submit"><br>
                    <input name="search" type="Radio" value="1" align="left" id="bla" checked><label for="bla">bla<label>
                    <input name="search" type="Radio" value="2" align="left">bla</form>
            </div>
            <div id="main-nav">
                <dl>
                    <dt id="home"><a href="http://localhost/home.html">Home</a></dt>
                    <dt id=""><a href="http://localhost/bla.html">bla</a></dt>
                    <dt id=""><a href="http://localhost/bla.html">bla</a></dt>
                    <dt id=""><a href="#">bla</a></dt>
                    <dt id=""><a href="#">bla</a></dt>
                    <dt id=""><a href="#">bla</a></dt>
                </dl>
            </div>
        </div>

        <div id="content">
            <div class="padding">
                <h2>About</h2>
                <p><strong>beam</strong> </p>
                <p></p>
            </div></div>

            <div id="footer">
                <div id="altnav">
                    <a href="#">About</a> -
                    <a href="#">Services</a> -
                    <a href="#">Contact Us</a>
                </div>
                Copyright © bickering and lime

                Powered by <a href="#">bla</a> and
                <a href="#"></a>
            </div>
        </div>
    </body>
</html>
4

1 回答 1

1

这里有一个错字：

#sidebar-a .padding (
    padding:25px;
    }

这应该是：

#sidebar-a .padding {
    padding:25px;
    }

Firefox Web 控制台是发现此类错误的有用工具。每当您有疑问时，请在选中 CSS 选项的情况下打开它，它会列出所有无法解释的选择器。

于 2012-05-26T10:50:06.437 回答