我总感觉我做的是样子差不多，但是里面很混乱..经不起推敲，有没有参考的代码啊老师

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    *{
          color:#fff;
      margin:0;padding: 0;
    }
    .header,.footer{text-align: center;
          width:100%;
          height:100px;
          background: black;
          line-height: 100px;
          position:relative;
        }
 
     .pic{
        width:300px;
        height:100px;
        background: url(http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png);
        float:left;
        cursor:pointer;
    }
    .word{
        float:right;
        margin-right: 60px;
        cursor:pointer;
    }
    .word2{
      float:left;
      margin-left: 60px;
      cursor:pointer;
    }
    .test{
      position:absolute;
      width:800px;
      height:100px;
      left:50%;
      margin-left:-400px;
    }
    .container{
      width:100%;
      height:500px;
      background:#5880f9;
      line-height: 40px;
      position:relative;
    }
    .left{
      width:50%;
      height:500px;
      float:left;
      position:absolute;
      left:337px;
      top:50px;
    }
    .right{
      width:50%;
      height:500px;
      float:right;
      position:absolute;
      top:50px;
      left:769px;
    }
    span{
      background: red
    }
     
  </style>
</head>
<body>
 
  <div class="header">
     
        <div class="pic"></div>
         
        <div class="word">手记</div>
        <div class="word">猿问</div>
        <div class="word">实战</div>
        <div class="word">职业路径</div>
        <div class="word">课程</div>
     
  </div>
 
  <div class="container">
     
    <div class="left">
      <h2>课程推荐</h2>
      <p><span>职业路径</span>&nbsp;&nbsp;HTML与CSS3实现动态网页</p>
      <p><span>职业路径</span>&nbsp;&nbsp;零基础入门Android语法与界面</p>
      <p><span>职业路径</span>&nbsp;&nbsp;IOS基础语法与常用控件</p>
      <p><span>职业路径</span>&nbsp;&nbsp;PHP入门开发</p>
      <p><span>职业路径</span>&nbsp;&nbsp;JAVA入门开发</p>
    </div>
 
    <div class="right">
      <h2>相关课程</h2>  
      <p>HTML&nbsp;&nbsp;CSS&nbsp;&nbsp;JavaScript</p>
      <p>HTML5&nbsp;&nbsp;CSS3&nbsp;&nbsp;Jquery</p>
      <p>移动端基础&nbsp;&nbsp;移动端APP开发</p>
    </div>
 
  </div>
 
  <div class="footer">
      <div class="test">
        <div class="word2">网站首页</div>
        <div class="word2">企业合作</div>
        <div class="word2">人才招聘</div>
        <div class="word2">联系我们</div>
        <div class="word2">常见问题</div>
        <div class="word2">友情链接</div>
      </div>
  </div>
 
</body>
</html>

xcopfans 2018-02-01

源自：CSS网页布局基础 2-10 编程练习

收起

1回答

Miss路回答被采纳获得+3积分 2018-02-02 10:24:10

从你的代码中可以看出，你非常的会用定位去实现布局，但是也不能每个都用定位去实现，用多了可能会问题的，因为用定位会有很多的副作用，有利有弊。目前这个作业中的内容比较少，假如以后要做一个像京东、淘宝首页那样丰富复杂的页面时，还大量的用定位就可能会出问题。所以必须要用定位的地方用，不需要用的地方就不要用了，比如你作业中，底部部分，用定位来做了导航菜单的居中，其实这里只要一浮动就可以了。还有头部布局的问题，你的效果其实也实现了，但是不是太合理，比较合理的布局方式是：头部分为两大部分，左边的logo和右边的导航，也就是说，你右边的导航要整体放到一个容器中。

整体实现的还可以，但是建议你把可以不用定位的内容用其他方式去实现，然后中间的部分整体有点偏左，可以做稍微的调整。这个题是对整体布局的考察，没有做太多细化的要求，但是自己要严格要求自己。

建议多听课，多练习一下老师讲过的例子，老师讲的例子每个都是经典，所以这个不要忽略了。

继续加油！

收起回答

xcopfans 提问者 #1

非常感谢！

2018-02-02 14:09:56
xcopfans 提问者 #2

您说的底部用浮动，还要跟margin-left或right一起配合才能居中吧

2018-02-02 17:07:32
Miss路回复提问者 xcopfans #3

可以的，但是我个人觉得这样的方法更好：可以给每个小div word2设置固定的宽度，给父级div footer设置他们的总和，然后直接margin：0 auto，就可以居中了，其中要把test div删掉，这里没必要。祝学习愉快！

2018-02-02 17:32:15