Question

我跟着这个tutorial video关于时间23:46到达了我并且我没有得到相同的结果。

下面是我写的html代码 - 我认为这正是他在教程中所拥有的，出于某种原因，div＆＃34; pageTopWrap＆＃34;并没有包含在＆＃34; pageTop＆＃34;中，它似乎最终落在了它之下。

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title> Teyta social network tutorial demo </title>

<style type="text/css">
body { margin: 0px; }
#pageTop {
    background:url(style/headerSliver.png) repeat-x;
    height: 90px
}
#pageTop > #pageTopWrap {
    width: 1000px;
    margin: 0px auto;
    height: 90px;
}
#pageTop > #pageTopWrap > #pageTopLogo {
    float: left;
    height: 90px;
    width: 108px;
}
#pageTop > #pageTopWrap > #pageTopRest {
    float: left;
    height: 90px;
    width: 892px;
}
#pageTop > #pageTopWrap > #pageTopRest {
    height: 43px;
    background:#CCC;
    border:#F00 1px solid;
}
</style>
<body>
<div id="pageTop"></div>
  <div id="pageTopWrap">
     <div id="pageTopLogo">
        <a href="http://www.teyta.com"> 
            <img src="images/logo.png" alt="logo" title="Teyta social network" />
        </a>
    </div>
    <div id="pageTopRest">
        <div></div>
        <div></div>
    </div>
  </div>
<div id="pageMiddle"></div>
<div id="pageBottom"></div>
</body>
</html>

Answer 1

<div id="pageTop"></div>

这是因为您没有在pageTopWrap内嵌套pageTop。

注意你是如何创建div并在同一行中关闭它的。

正确嵌套

<div id="pageTop">
  <div id="pageTopWrap">
    <div id="pageTopLogo">
      <a href="http://www.teyta.com">
        <img src="http://placehold.it/100x100" alt="logo" title="Teyta social network" />
      </a>
    </div>
    <div id="pageTopRest">
      <div></div>
      <div></div>
    </div>
  </div>
</div>
<!-- end #pageTop -->

<div id="pageMiddle"></div>
<div id="pageBottom"></div>

Answer 2

上面的那个人是绝对正确的。您必须在CSS中正确嵌套您的条件。注意：我不希望使用像DOCTYPE这样的东西并且有样式标签。如果您正在观看教程，则应添加link rel标记，以便在编程时获得更多空间！

另外，当你可以用onMouse事件制作一个可点击的链接表时，你为什么要在选项卡上创建菜单？更酷，更快，更有代码效率！

html css div元素没有按照我的预期显示 - 遵循教程

2 个答案: