2-9 练习,这样写会代码冗余吗?还有怎么把标题跟文字左对齐啊~怎么我我设置背景色它不显示的?

2-9 练习,这样写会代码冗余吗?还有怎么把标题跟文字左对齐啊~怎么我我设置背景色它不显示的?

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

  body{margin: 0;padding: 0;font-family: "微软雅黑";color: #fff;font-size: 18px;}

  a:link,a:visited,a:hover,a:active{

                color: #fff;

                text-decoration: none;

            }

    .nav{

    background-color: #333;

    height: 100px;

    width: 100%;

    margin: 0 auto;

    position: absolute;

      position: fixed;

    }

    .clear{clear: both;}

    .logo{float: left;}

    .nav-list{

        float: right;

        font-size: 20px;

        line-height: 100px;

      }

    .nav-list span{

        padding: 20px;

      }

      .content{

        width: 1000px;

        margin:0 auto;

        padding-top: 100px;

        margin-bottom: 80px;

        background-color: #add8e6;

        text-align: center;

      }

      .left{

      float: left;

      width: 50%;

      margin-top: 100px;

      }

      .tit{

      font-size: 30px;

      color: #000;

      margin-bottom: 20px;


      }

      .con{

      color: #000;

      line-height: 40px;

      }

      .con span{

      background-color: #f89d9f;

      margin-right: 20px;

      }

      .right{

      float: right;

      width: 50%;

      margin-top: 100px;


      }

      .con1{

      color: #000;

      line-height: 40px;

      }

      .con1 span{

      margin-right: 20px;

      }

      .footer{

        width: 100%;

        height: 80px;

        position: fixed;

        text-align: center;

        line-height: 80px;

        bottom: 0;

        background-color: #333;

      }

  </style>

</head>

<body>

  <div class="nav">

  <div class="logo"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"></div>

<div class="nav-list">

<span><a href="#">课程</a></span>

<span><a href="#">职业路径</a></span>

<span><a href="#">实战</a></span>

<span><a href="#">猿问</a></span>

<span><a href="#">手记</a></span>

</div>

  </div>

  <div class="content">

    <div class="left">

    <div class="tit">课程推荐</div>

    <div class="con"><span>职业路径</span>html与css3实现动态网页</div>

    <div class="con"><span>职业路径</span>html与css3实现动态网页</div>

    <div class="con"><span>职业路径</span>html与css3实现动态网页</div>

    <div class="con"><span>职业路径</span>html与css3实现动态网页</div>

    <div class="con"><span>职业路径</span>html与css3实现动态网页</div>

    </div>

    <div class="right">

    <div class="tit">相关课程</div>

    <div class="con1">

<span>企业合作</span>

   <span>人才招聘</span>

   <span>联系我们</span>

   <span>讲师招募</span>

    </div>

    <div class="con1">

<span>企业合作</span>

   <span>人才招聘</span>

   <span>联系我们</span>

   <span>讲师招募</span>

    </div>

    <div class="con1">

<span>企业合作</span>

   <span>人才招聘</span>

   <span>联系我们</span>

   <span>讲师招募</span>

    </div>

    <div class="con1">

<span>企业合作</span>

   <span>人才招聘</span>

   <span>联系我们</span>

   <span>讲师招募</span>

    </div>

    </div>

  </div>

  <div class="footer">

    <span><a href="#">企业合作</a></span>

    <span><a href="#">人才招聘</a></span>

    <span><a href="#">联系我们</a></span>

    <span><a href="#">讲师招募</a></span>

    <span><a href="#">常见问题</a></span>

    <span><a href="#">意见反馈</a></span>

    <span><a href="#">慕课大学</a></span>

    <span><a href="#">友情链接</a></span>


  </div>

</body>

</html>

http://img1.sycdn.imooc.com/climg//59d74f7d0001ef5e19190928.jpg

这样写会代码冗余吗?还有怎么把标题跟文字左对齐啊~怎么我我设置背景色它不显示的?

正在回答 回答被采纳积分+1

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

2回答
yjw123 2017-10-15 16:41:55

.tit{

      font-size: 30px;

      color: #000;

      margin-bottom: 20px;

      margin-left: -180px;


  }


yjw123 2017-10-07 09:46:22

设置左对齐不能到达效果,可以使用margin:-180px;  背景色不显示是因为你用了浮动,导致高度伸展不开,你可已在.content中加入边框可以下高度,解决方法是在.content中加入一个新的div 设置成clear:both 清除浮动

  • 提问者 choyuky #1
    margin: -180px;在哪里加啊
    2017-10-14 20:13:17
  • yjw123 回复 提问者 choyuky #2
    .tit{ font-size: 30px; color: #000; margin-bottom: 20px; margin-left: -180px; }
    2017-10-15 16:52:16
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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