老师,帮忙检查下代码

老师,帮忙检查下代码

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    *{

      margin: 0;

      padding: 0;

      list-style: none;

    }

    .page{

      width:100%;

      height:100px;

      background: black;

      overflow: hidden;

      position: fixed;

    }

    .logo{

      width:300px;

      height:100px;

      background: url("http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png");

      float: left;

      cursor: pointer;

    }

    .nav{

      float: right;

      line-height: 100px;

    }

    .nav ul li{

      list-style: none;

      float: left;

      padding: 0 50px;

    }

    a{

      text-decoration: none;

      color: white;

    }

    .main{

      padding: 100px 0;

      background: powderblue;

      width: 100%;

      height: 1000px;

    }

    .main .left{

      width: 40%;

      height: 800px;

      float: left;


    }

    .main .right{

      width: 60%;

      height: 800px;

      float: right;

    }

    .con_left,.con_right{

      padding-top: 100px;

      padding-left: 100px;

      line-height: 3em;

      word-spacing: 2em;

    }

    span{

      background: pink;

    }

    .footer{

      width:100%;

      height:100px;

      background: black;

      position: fixed;

      bottom: 0;

      text-align: center;

    }

    .footer ul li{

      line-height: 100px;

      display: inline-block;

      padding: 0 50px;

    }

  </style>

</head>

<body>

  <div class="page">

    <div class="logo"></div>

    <div class="nav">

      <ul>

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

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

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

        <li><a href="#">提问</a></li>

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

      </ul>

    </div>

  </div>

  <div class="main">

      <div class="left">

        <div class="con_left">

          <h3>课程推荐</h3>

          <ul>

            <li><span>职业路径</span> HTML5与CSS3实现动态网页</li>

            <li><span>职业路径</span> 零基础入门Android语法与界面</li>

            <li><span>职业路径</span> IOS基础语法与常用控件</li>

            <li><span>职业路径</span> PHP入门开发</li>

            <li><span>职业路径</span> JAVA入门开发</li>

          </ul>

        </div>

      </div>

      <div class="right">

        <div class="con_right">

          <h3>相关课程</h3>

          <ul>

            <li>HTML CSS JavaScript</li>

            <li>HTML5 CSS3 Jquery</li>

            <li>移动端基础 移动端APP开发</li>

          </ul>

        </div>

      </div>

  </div>

  <div class="footer">

    <ul>

      <li><a href="#">网站首页</a></li>

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

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

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

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

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

    </ul>

  </div>

</body>

</html>


正在回答

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

1回答

同学你好,代码效果实现的很棒,建议优化:相同的代码可以使用组合选择器书写一起,简化代码书写,示例:

http://img1.sycdn.imooc.com//climg/5eb60ea109d2fe0c06580410.jpg

http://img1.sycdn.imooc.com//climg/5eb60eab0982a72b06620406.jpg

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~


  • 乌冬面dd 提问者 #1
    Thanks♪(・ω・)ノ
    2020-05-09 12:09:27
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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