编程练习，请求帮助完善

编程练习，请求帮助完善

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

  <!-- 此处写代码 -->

  <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 2019-01-05
源自：CSS网页布局基础   2-10 编程练习
0
收起

正在回答

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

4回答
樱桃小胖子 回答被采纳获得+3积分 2019-01-07 10:25:07

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

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

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

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

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

希望可以帮到你！


0
收起回答
樱桃小胖子 2019-01-06 15:03:31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!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>

希望可以帮到你！

0
收起回答
  • 提问者 江7856 #1
    谢谢您的帮助，1)请教footer为何有两个清除浮动呢clear:both;overflow: hidden; zoom: 1;2)设置的字体大小不起作用？谢谢
    2019-01-06 17:16:19
提问者 江7856 2019-01-06 14:45:57
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<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>

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

0
收起回答
樱桃小胖子 2019-01-06 13:38:46

1、右侧的导航没有垂直居中显示

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

建议修改：

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

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

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

希望可以帮到你！

0
收起回答
  • 提问者 江7856 #1
    麻烦你了，谢谢！我已做了修改，页脚的问题还望得到其他老师的帮助，思路堵塞~
    2019-01-06 14:11:20
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

2-4编程练习 请帮助完善
0 0 1
请问你们编程练习用的编辑器可以下载吗？用 sublimetext 怎么自动运行代码？
3 0 4
3-5编程练习 请老师帮助完善作业
0 1 1
编程练习 请老师帮忙完善一下代码
10 0 3
编程练习 请老师帮忙完善
15 0 4

登录后可查看更多问答，登录/注册

前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36712    个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

了解课程

本课精华内容

问答 作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答
请稍等 ...
微信客服

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

 帮助反馈 APP下载

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

 公众号

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

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师
插入代码