2-9作业问题

来源：2-10 编程练习

Abracadabra2

2017-07-04 15:10:51

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{
padding:0;
margin:0;
}
.nav_con li,.foot_con li{
list-style:none;
float:left;
}
.nav{
background:#000;
height:100px;
color:#fff;
/*position:fixed;*/
width:100%;
line-height:100px;
}
.nav img{
float:left;
}
.nav_con{
float:right;
}
.nav_con li{
text-align:center;
width:80px;
}
.container{
background:#5880f1;
width:100%;
position:absolute;
/*此处无作用*/
margin:0 auto;
height:600px;

}
.left{
float:left;
/*为什么要设置位置才显示颜色*/
position:absolute;
/*padding-left:100px;*/
width:40%;
height:600px;
}
p{
margin:20px 10px 10px 0;
}
span{
background:pink;
margin-right:10px;
}
.right{
float:right;
/*position:relative;*/
/*padding-right:150px;*/
width:60%;
height:600px;
}
.con{
list-style:none;
}
.con li{
margin:20px 10px 10px 0;
}
.foot{
/*页脚自动上浮*/
background:black;
position:relative;
color:#fff;
width:100%;
height:100px;
line-height:100px;
}
.foot_con{
position:relative;
left:100px;
}
.foot_con li{
font-size:12px;
width:120px;
text-align:center;
}
</style>
</head>
<body>

<div class="nav">
<div>
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/>
</div>
<div>
<ul class="nav_con">
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
<div class="container">
<div class="left">
<h2>课程推荐</h2>
<p><span>职业路径</span>HTML5与CSS3实现动态网页</p>
<p><span>职业路径</span>零基础入门Android语法与见面</p>
<p><span>职业路径</span>iOS基础语法与常用控件</p>
<p><span>职业路径</span>PHP入门开发</p>
<p><span>职业路径</span>JAVA入门开发</p>
</div>
<div class="right">
<h2>相关课程</h2>
<ul class="con">
<li>HTML  CSS  JavaScript</li>
<li>HTML5  CSS3  Jquery</li>
<li>移动端基础  移动端APP开发</li>
</ul>
</div>
</div>
<div class="foot">
<ul class="foot_con">
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>

为什么不设置position就显示不了颜色有很多处我设置了位置之后就能显示颜色了在css .container代码处有标记
页脚自动上浮不知道为什么求解决办法
container内容无法居中显示求解答

写回答

2回答

樱桃小胖子

2017-07-04

已采纳

首先亲，你把绝对定位加错了位置，第二没有设置父级的相对定位，根据你的代码进行了调整

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{
        padding:0;
        margin:0;
    }
    .nav_con li,.foot_con li{
        list-style:none;
        float:left;
    }
    .nav{
        background:#000;
        height:100px;
        color:#fff;
        /*position:fixed;*/
        width:100%;
        line-height:100px;
    }
    .nav img{
        float:left;
    }
    .nav_con{
        float:right;
    }
    .nav_con li{
        text-align:center;
        width:80px;
    }
    .container{
        background:#5880f1;
        width:100%;
        position:absolute;
        /*此处无作用*/
        margin:0 auto;
        height:600px;
        
    }
    .container{
        position:relative;
    }
    .left{
        float:left;
        /*为什么要设置位置才显示颜色*/
        /*position:absolute;*/
        /*padding-left:100px;*/
        width:40%;
        height:600px;
        background:red;
    }
    .leftbox{
        position:absolute;
        left:150px;
        top: 150px;
    }
    p{
        margin:20px 10px 10px 0;
    }
    span{
        background:pink;
        margin-right:10px;
    }
    .right{
        float:right;
        /*position:relative;*/
        /*padding-right:150px;*/
        width:60%;
        height:600px;
    }
    .rightbox{
        position:absolute;
        right:550px;
        top: 150px;
    }
    .con{
        list-style:none;
    }
    .con li{
        margin:20px 10px 10px 0;
    }
    .foot{
        /*页脚自动上浮*/
        background:black;
        position:relative;
        color:#fff;
        width:100%;
        height:100px;
        line-height:100px;
    }
    .foot_con{
        position:relative;
        left:100px;
    }
    .foot_con li{
        font-size:12px;
        width:120px;
        text-align:center;
    }
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="nav">
      <div>
          <img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/>
      </div>
      <div>
          <ul class="nav_con">
              <li>课程</li>
              <li>职业路径</li>
              <li>实战</li>
              <li>猿问</li>
              <li>手记</li>
          </ul>
      </div>
  </div>
  <div class="container">
      <div class="left">
        <div class="leftbox">
            <h2>课程推荐</h2>
            <p><span>职业路径</span>HTML5与CSS3实现动态网页</p>
            <p><span>职业路径</span>零基础入门Android语法与见面</p>
            <p><span>职业路径</span>iOS基础语法与常用控件</p>
            <p><span>职业路径</span>PHP入门开发</p>
            <p><span>职业路径</span>JAVA入门开发</p>
        </div>
      </div>
      <div class="right">
          <div class="rightbox">
              <h2>相关课程</h2>
              <ul class="con">
                  <li>HTML&nbsp; CSS&nbsp; JavaScript</li>
                  <li>HTML5&nbsp; CSS3&nbsp; Jquery</li>
                  <li>移动端基础&nbsp; 移动端APP开发</li>
              </ul>
          </div>
      </div>
  </div>
  <div class="foot">
      <ul class="foot_con">
          <li>网站首页</li>
          <li>企业合作</li>
          <li>人才招聘</li>
          <li>联系我们</li>
          <li>常见问题</li>
          <li>友情链接</li>
      </ul>
  </div>
</body>
</html>

希望可以帮到你！

hbracadabra2

h 非常感谢！

h017-07-05

共3条回复

Abracadabra2

提问者

2017-07-04

而且我在foot处加了clear:both之后还是没有作用