Question

我目前正在学习UDemy课程，教师从头开始教我们全栈开发。问题是，他犯了很多我需要即兴创作的错误，就像在登录旁边添加<span>一样，而不是他对<p>的想法以及我需要的BBC徽标和登录按钮的屏幕截图它的高度经过修改，以便它们适合放在那个小导航栏中。

以下是代码：

<!DOCTYPE html>
<html>
<head>
    <title>Wadson's BBC</title>
    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />   
</head>

<style type="text/css">

    body {
        margin: 0px;
        padding: 0px;
        font-family: Helvetica, Arial, sans-serif;
    }

    #topbar {
        background-color: #7A0000;
        width: 100%;
        height: 45px;
        color: #fff;
    }

    .fixedwidth {
        width: 1050px;
        margin: 0 auto;

    }

    #logodiv {
        padding-top: 15px;
        float: left;
        border-right: 1px solid #990000;
        padding-right: 10px;
    }

    #signindiv {
        font-weight: bold;
        font-size: 0.9em;
        border-right: 1px solid #990000;
        position: relative;
        width: 200px;
        height: 45px;
        float: left;
    }

    #signindiv img {
        position: relative;
        top: 15px;
        left: 15px; 
    }

    #signintext {
        position: relative;
        top: 10px;
        left: 25px;
    }

    #topmenudiv {
        float: left;
    }

    #topmenudiv ul {
        margin: 0px;
        padding: 0px;

    }

    #topmenudiv li {
        list-style: none;
        font-weight: bold;
        font-size: 0.9em;
        border-right: 1px solid #990000;
        padding: 15px 20px 0px 20px

    }


</style>
<body>
    <div id="container">
            <div id="topbar">
                <div class="fixedwidth">
                    <div id="logodiv">
                        <img src="images/logo.png" height="25px" />
                    </div>
                    <div id="signindiv">
                        <img class="signinhead" src="images/signin.png" height="20px"/><span id="signintext">Sign In</span>
                    </div>
                    <div id="topmenudiv">
                        <ul>
                            <li>News</li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>      
    </div> <!-- /#container -->
</body>
</html>

对有抱负的程序员有什么建议吗？我怎么能以不同的方式思考，以便在他说话时我能发现错误而不是逐字复制他的东西？我非常了解HTML，我会遇到位置，边距和填充。

Answer 1

这里的代码存在一些问题，我不会深入研究结构或者如何使用CSS框架对于初学者来说是一个很好的选择（我强烈建议使用bootstrap并按照教程了解它们如何按照最新的CSS教程使用每个组件。

一些快速指示，可以解决边界超过#topbar的问题，因为列表项目是垂直堆叠而不是水平堆叠。这是通过添加float：right来解决的。到#topmenudiv li。您需要通过设置高度来偏移列表项元素上的填充 - 在这种情况下为30px的填充。

检查下面的更新版本，并尽可能尝试将codepen或jsfiddle包含在您的答案中。

http://codepen.io/anon/pen/VLEENL

Answer 2

据我了解你的问题：

对有抱负的程序员有什么建议吗？我怎么能以不同的方式思考，以便在他说话时我能发现错误而不是逐字复制他的东西？我非常了解HTML，我会遇到位置，边距和填充。

使用CSS property outline当您将其应用于元素的类，标记或ID时，它看起来像CSS property border。 border和outline之间的区别在于outline不会影响元素周围的区域，因为它非常适合查看div及其实际位置。

将此css放在body {...}区块中的身体规则（即<style>）下：

的 CSS

/* body * { outline: 1px solid blue; } */ /* Uncomment to see all elements */ .green { outline: 2px dashed green } /* Highlight in green */ .black { outline: 3px dotted #000; } /* Highlight in black */ .yellow { outline: 4px double #fc0; } /* Highlight in yellow */

为了更轻松地处理填充和边距，请将以下内容放在CSS的顶部：

的 CSS

html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

这将统一一个box-sizing规则下的所有元素。元素的尺寸，填充和边框包含在元素的内容中。通常默认情况下（content-box），只考虑宽度和高度。有关box-sizing
的更多信息，请参阅此处

破碎的Div - 太多的边缘/填充等

2 个答案:

的 CSS

的 CSS