请问老师,2-9的练习,我的代码能怎样优化呢?

请问老师,2-9的练习,我的代码能怎样优化呢?

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
   *{padding:0;margin:0;}
   body{background:#add8e6;} 
    .header{
        width:100%;
        height:100px;
        background:#000;
    }
    .nav-ul{
        list-style:none;
        height:100px;
        float:right;
        line-height:100px;
        margin-right:50px;
    }
    .nav-li{
        float:left;
        color:#fff;
        padding-left:30px;
        font-size:18px;
        font-weight:bold;
    }
    .content{
        width:80%;
        height:500px;
        margin:0 auto;
    }
    .left{
       float:left;
       width:40%;
       font-size:14px;
    }
    .right{
        float:right;
        width:40%;
        font-size:14px;
    }
    p,h2{
        padding-top:30px;
    }
    span{
        background:#ff9999;
    }
    .footer{
        width:100%;
        height:100px;
        background:#000;
    }
    .foot-ul{
        list-style:none;
        width:600px;
        color:#fff;
        margin:0 auto;
    }
    .foot-li{
        float:left;
        line-height:100px;
        padding-left:30px;
    }
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="header">
      <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" />
      <ul class="nav-ul">
          <li class="nav-li">课程</li>
          <li class="nav-li">职业路径</li>
          <li class="nav-li">实战</li>
          <li class="nav-li">猿问</li>
          <li class="nav-li">手记</li>
      </ul>
  </div>
  <div class="content">
      <div class="left">
          <h2>课程推荐</h2>
          <p ><span>职业路径</span>&nbsp;&nbsp;&nbsp;&nbsp;HTML5与CSS3实现动态网页</p>
          <p><span>职业路径</span>&nbsp;&nbsp;&nbsp;&nbsp;零基础入门Android语法与界面</p>
          <p><span>职业路径</span>&nbsp;&nbsp;&nbsp;&nbsp;IOS基础语法与常用控件</p>
          <p><span>职业路径</span>&nbsp;&nbsp;&nbsp;&nbsp;PHP入门开发</p>
          <p><span>职业路径</span>&nbsp;&nbsp;&nbsp;&nbsp;JAVA入门开发</p>
      </div>
      <div class="right">
          <h2>相关课程</h2>
          <p>HTML&nbsp;&nbsp;&nbsp;&nbsp;CSS&nbsp;&nbsp;&nbsp;&nbsp;Javascript</p>
          <p>HTML5&nbsp;&nbsp;&nbsp;&nbsp;CSS3&nbsp;&nbsp;&nbsp;&nbsp;Jquery</p>
          <p>移动端基础开发&nbsp;&nbsp;&nbsp;&nbsp;移动端APP开发</p>
      </div>
  </div>
  <div class="footer">
      <ul class="foot-ul">
          <li class="foot-li">网站首页</li>
          <li class="foot-li">企业合作</li>
          <li class="foot-li">人才招聘</li>
          <li class="foot-li">联系我们</li>
          <li class="foot-li">常见问题</li>
          <li class="foot-li">友情链接</li>
      </ul>
  </div>
</body>
</html>

正在回答

登陆购买课程后可参与讨论,去登陆

3回答

这样修改,效果会不会更好点呢http://img1.sycdn.imooc.com/climg//596d7f1b0001ee2d04480714.jpg

  • Snikt 提问者 #1
    的确好了很多!谢谢!
    2017-07-18 15:01:02
  • Snikt 提问者 #2
    不过不是很明白,为什么content那里要去掉高度设置,而设置overflow:hidden属性呢?
    2017-07-18 15:04:24
好帮手慕糖 2017-07-18 17:33:41

你好,子元素设置浮动,导致父级元素的高度塌陷,这里使用overflow:hidden;可从新计算父级元素的高度,从而起到清楚浮动的效果。使用clear:both;也可以达到效果。祝学习愉快!

  • 提问者 Snikt #1
    好的,谢谢你!
    2017-07-18 17:35:17
海纳百川_ 2017-07-18 16:25:27

去掉高度,是为了让高度自适应变化。因为content里面的元素有浮动,高度无法自适应,所以还要使用overflow:hidden重新计算元素大小。

  • 提问者 Snikt #1
    其实意思是不是,因为有浮动元素,所以高度无法自适应,所以用overflow:hidden来清除浮动呢?那是不是用clear:both;也可以实现同样的效果呢?可是overflow:hidden好像会令溢出的元素不显示,会出现截断的问题?
    2017-07-18 16:32:37
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师