请老师帮忙检查、优化,谢谢!

来源:2-10 编程练习

慕标4507442

2019-05-02 18:23:55

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

  *{

  margin: 0;

  padding: 0;

  font-family: "微软雅黑";

  }

    .header{

    width: 100%;

    height: 100px;

    background-color: black;

    overflow: hidden;

    *zoom:1;

    }


    .logo{

    width: 300px;

    height: 100px;

    background:url(http://climg.mukewang.com/58c0d2d900016ce303000100.png);

    float: left;

    margin-left: 20px;

    }


    .nav{

    text-align: center;

    line-height: 100px;

    float: right;

    margin-right: 20px;

    }

    .nav span{

    margin: 0 20px;

    color: #fff;

    }


    .con{

    width: 100%;

    height: 500px;

    background-color: #aee;

    overflow: hidden;

    *zoom:1;

    }


    .left{

    width: 25%;

    float: left;

    margin: 50px 200px;

    }

    .right{

    width: 25%;

    float: left;

    margin: 50px 0;

    }

    ul li{

    list-style: none;

    margin: 10px auto;

    }

    ul li span{

    background-color: pink;

    margin-right: 5px;

    }


    .footer{

    width: 100%;

    height: 100px;

    background-color: #000;

    text-align: center;

    }

    .footer span{

    color: #fff;

    line-height: 100px;

    margin: 40px;

    }

  </style>

</head>

<body>

  <div class="container">

  <div class="header">

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

  <div class="nav">

  <span>课程</span>

<span>职业路径</span>

<span>实战</span>

<span>猿问</span>

<span>手记</span>

  </div>

  </div>

  <div class="con">

  <ul class="left">

  <h3>课程推荐</h3>

  <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>

  <ul class="right">

  <h3>相关课程</h3>

  <li>HTML CSS JavaScript</li>

  <li>HTML5 CSS3 Jquery</li>

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

  </ul>

  </div>

  <div class="footer">

  <span>网站首页</span>

<span>企业合作</span>

<span>人才招聘</span>

<span>联系我们</span>

<span>常见问题</span>

<span>友情链接</span>

  </div>

  </div>

</body>

</html>


写回答

1回答

好帮手慕慕子

2019-05-04

同学你好, 效果实现正确, 代码也很简洁, 可以不用优化哦~~

欢迎采纳, 祝学习愉快~~~

0

0 学习 · 40143 问题

查看课程