编程练习，请求帮助完善

html>

<head>

/*此处写代码*/

*{margin:0;padding:0;

}

ul{list-style:none;display:inline;}

a{text-decoration:none;}

.container{width:100%;height:100%;margin:0 auto;

}

.header{width:100%;background:#333;overflow:hidden;

zoom:1;

}

.header .logo{width:200px;float:left;

margin:10px; 40px;

}

.header .nav{float:right;overflow:hidden;zoom:1;}

.header .nav li{float:left;margin-right:20px;

}

.header .nav li a{padding:0 10px;

line-height:100px;

display:block;

font-family:"微软雅黑"

font-size:25px;

color:#fff;

}

.main{width:100%;background:skyblue;overflow:hidden;zoom:1;}

.left{width:40%;height:300px;

padding-top:10%;padding-left:10%;

padding-bottom:20%;

float:left;

}

.right{width:40%;height;300PX;float:right;

padding-top:10%;}

.footer{width:100%;background:#333;height:100px;overflow:hidden;zoom:1;}

.footer .nav1{float:right;overflow:hidden;zoom:1;

}

.footer .nav1 li{float:left;padding-right:60px;

}

.footer .nav1 li a{height:100px;

line-height:100px;

display:inline-block;

font-family:"微软雅黑"

font-size:25px;

color:#fff;

text-align:center;

}

span{background-color:pink}

}

</style>

</head>

<body>

</ul>

</div>

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

<br/>

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

<br/>

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

<br/>

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

<br/>

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

</div>

<br/>

<p>HTML CSS JavaScript</p>

<br/>

<p>HTMLS CSS3 Jquery</p>

<br/>

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

<br/>

</div>

</ul>

</div>

</body>

</html>

感觉编写的比较复杂，页脚部分字体间距太大，请老师帮助，谢谢

江7856 2019-01-05

源自：CSS网页布局基础 2-10 编程练习

收起

4回答

卡布琦诺回答被采纳获得+3积分 2019-01-07 10:25:07

1、footer这里的两个清楚浮动是因为老师在调试你的代码的时候，测试效果用的，同学可以两者留其一即可，如：

2、页脚设置字体大小不起作用的原因是：font-family: "微软雅黑"后面缺少结束的分号导致的，可以修改如下：

在font-family: "微软雅黑"后面加上结束的分号，再改变字体大小就会生效啦

希望可以帮到你！

收起回答

卡布琦诺 2019-01-06 15:03:31

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    /*此处写代码*/
    * {
        margin: 0;
        padding: 0;
    }
    ul li{
        list-style: none;
        /*display: inline;*/
    }
    a {
        text-decoration: none;
    }
    .container {
        width: 100%;
        height: 100%;
        margin: 0 auto;
    }
    .header {
        width: 100%;
        background: #333;
        height:100px;
        overflow: hidden;
        zoom: 1;
    }
    .header .logo {
        width: 200px;
        float: left;
        /*margin: 10px;*/
        /*40px;*/
    }
    .header .nav {
        float: right;
       overflow: hidden;
        zoom: 1;
    }
    .header .nav li {
        float: left;
        margin-right: 20px;
    }
    .header .nav li a {
        padding: 0 10px;
        line-height: 100px;
        display: block;
        font-family: "微软雅黑"
        font-size:25px;
        color: #fff;
    }
    .main {
        width: 100%;
        background: skyblue;
        overflow: hidden;
        zoom: 1;
    }
    .left {
        width: 40%;
        height: 300px;
        /*padding-top: 10%;
        padding-left: 10%;
        padding-bottom: 20%;*/
        /*合并简化代码*/
        padding:10% 0 20% 10%;
        float: left;
    }
    .left h3{
      padding-bottom:20px;
    }
    .right {
        width: 40%;
        /*height的值书写错误*/
       /* height;
        300PX;*/
        height:300px;
        float: right;
        padding-top: 10%;
    }
    .footer {
        clear:both;
        width: 100%;
        background: #333;
        height: 100px;
        overflow: hidden;
        zoom: 1;
    }
    /*页脚的导航是居中显示的，不是在右侧显示，因此建议设置为*/
    .footer ul.nav1{
      width:600px;
      margin:0 auto;
      /*float: right;*/
      overflow: hidden;
      zoom: 1;
    }
    .footer ul.nav1 li {
        float: left;
        margin:0 auto;
        /*这是导致导航间距过大的原因就是padding-right的值设置的过大*/
        /*padding-right: 60px;*/
        /*建议设置导航项左右的间距都为10，而不是设置导航项右侧得值*/
        padding:0 10px;
    }
    .footer .nav1 li a {
        height: 100px;
        line-height: 100px;
        display: inline-block;
        font-family: "微软雅黑"
        font-size:25px;
        color: #fff;
        text-align: center;
    }
    span {
        background-color: pink
    }
    /*多了而结束的括号*/
    /*}*/
    </style>
</head>
<body>
    <!-- 此处写代码 -->
    <div class="container">
        <div class="header">
            <div class="logo"><a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/></a></div>
            <ul class="nav">
                <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>
        <div class="main">
            <div class="left">
                <h3>课程推荐</h3>
                <p><span>职业路径</span>&nbsp;&nbsp; HTMLS与CSS3实现动态网页</p>
                <br />
                <p> <span>职业路径</span>&nbsp;&nbsp;零基础入门Android语法与界面</p>
                <br />
                <p><span>职业路径</span>&nbsp;&nbsp; ios基础语法与常用控件</p>
                <br />
                <p><span>职业路径</span>&nbsp;&nbsp; PHP入门开发</p>
                <br />
                <p><span>职业路径</span>&nbsp;&nbsp;JAVA入门开发</p>
            </div>
            <div class="right">
                <h3>相关课程</h3>
                <br />
                <p>HTML CSS JavaScript</p>
                <br />
                <p>HTMLS CSS3 Jquery</p>
                <br />
                <p>移动端基础 移动端APP开发</p>
                <br />
                <br />
            </div>
        </div>
        <div class="footer">
            <ul class="nav1">
                <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>
    </div>
</body>
</html>

希望可以帮到你！

收起回答

提问者江7856 #1

谢谢您的帮助，1)请教footer为何有两个清除浮动呢clear:both;overflow: hidden; zoom: 1;2)设置的字体大小不起作用？谢谢

2019-01-06 17:16:19

提问者江7856 2019-01-06 14:45:57

<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{margin:0;padding:0;
    }
    ul{list-style:none;display:inline;}
    a{text-decoration:none;}
    .container{width:100%;height:100%;margin:0 auto;
    }
    .header{width:100%;height:100px;
            background:#333;
            overflow:hidden;
            zoom:1;
    }
    .header .logo{width:200px;float:left;
    }
    .header .nav{float:right;overflow:hidden;zoom:1;}
    .header .nav li{float:left;margin-right:20px;
    }
    .header .nav li a{padding:0 10px;
                      line-height:100px;
                      display:block;
                      font-family:"微软雅黑"
                      font-size:25px;
                      color:#fff;
    }
    .main{width:100%;background:skyblue;overflow:hidden;zoom:1;}
    .left{width:40%;height:300px;
          padding:10% 0 20% 10%;
          float:left;
    }
    .right{width:40%;height;300PX;float:right;
           padding-top:10%;}
    .footer{width:100%;background:#333;height:100px;overflow:hidden;zoom:1;}
    .footer .nav1{width:75%;float:right;overflow:hidden;zoom:1;
                 
    }
    .footer .nav1 li{float:left;margin:0 10px;
                    
    }
    .footer .nav1 li a{height:100px;
                      line-height:100px;
                      display:inline-block;
                      font-family:"微软雅黑"
                      font-size:30px;
                      color:#fff;
                      text-align:center;
    }
    span{background-color:pink
    }
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="container">
      <div class="header">
        <div class="logo"><a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/></a></div>
        <ul class="nav" >
            <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>
      
      <div class="main">
        <div class="left">
            
                <h3>课程推荐</h3>
                <br/>
                <p><span>职业路径</span>&nbsp;&nbsp; HTMLS与CSS3实现动态网页</p>
                <br/>
                <p> <span>职业路径</span>&nbsp;&nbsp;零基础入门Android语法与界面</p>
                <br/>
                <p><span>职业路径</span>&nbsp;&nbsp; ios基础语法与常用控件</p>
                <br/>
                <p><span>职业路径</span>&nbsp;&nbsp; PHP入门开发</p>
                <br/>
                <p><span>职业路径</span>&nbsp;&nbsp;JAVA入门开发</p>
            
        </div>
        <div class="right">
                      
                <h3>相关课程</h3>
                <br/>
                <p>HTML CSS JavaScript</p>
                <br/>
                <p>HTMLS CSS3 Jquery</p>
                <br/>
                <p>移动端基础 移动端APP开发</p>
                <br/>
                <br/>
            
        </div>  
      </div>
      <div class="footer">
          <ul class="nav1">
              <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>
  </div>
</body>
</html>

老师您好！这里字体设置后不起作用，谢谢

收起回答