CSS系列教材（二十九）- 练习

下载区
文件名	文件大小
img.rar	41k
answer.rar	42k

工具版本兼容问题

用到的图片在右侧

纠

步骤 1 :

练习-综合练习1

edit 顶折

纠问

CSS系列教材（二十八）- 布局 - 块之间的空格

CSS系列教材（三十）- 练习 - 综合性练习2

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2022-12-06 这样应该还好

54Mozu

关于前端部分-CSS-综合性练习1 的提问

新写的一个

<!DOCTYPE html>
<head>
    <title>综合练习1</title>
    <link rel="stylesheet" href="zongh1.css" type="text/css">
</head>
<body>
    <div id="l1">
        <img src="img/1.png" id="p1">
        <span id="l11">  最新动态</span> 
        <span id="l12">设置</span>
        <img src="img/2.png" id="p2">
    </div>
    <div class="content">
        <div class="I">
            <div id="l21" style="float: left;">
                <img src="img/4.png" id="p4" >
                <br>
                <div id="l211">
                    <span id="l211" style="background-image:url(img/5.png);padding: 2px;">
                        6551
                    </span>
                </div>
            </div>

            <div id="l22">
                <span id="l21">热门回答,来自 机械<a href="" id="l21">关注话题</a></span>
                <img src="img/3.png" id="p3">
                <br>
                <a href="" id="l22">人类史上令人叹为观止的极限精度制作成果有哪些?</a>
                <span id="l22">Vincent Fu, Materials Science, PhD</span>
                <br>
                <img src="img/6.png" id="p6">
                <div id="l221">
                    <span>
                        说到精度，就不得不提在材料学中最重要的一个方面：表征。要想研究一种材料性能，握在手里把玩是远远不够的，就算你拿出放大镜离近了看，也只能看到表面一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...&nbsp&nbsp
                    </span>
                    <a href="" id="l221">显示全部</a>
                </div>
            
            </div>
        
            <div id="l23">
                <img src="img/7.png" id="p7" name="last">
                <span id="l231">关注问题</span>
                <img src="img/8.png" id="p8" name="last">
                <span id="l231">867条评论</span>
                <img src="img/9.png" id="p9" name="last">
                <span id="l231">作者保留权利</span>
            </div>
        </div>


    </div>
    


    
</body>



下面是css内容
img#p1{
    position: fixed;
    left: 8px;
    top: 8px;
}
span#l11{
    position: fixed;
    left: 38px;
    top: 8px;
    font-weight: bold;
    font-family: 'Times New Roman', Times, serif;
}
img#p2{
    position: fixed;
    right: 48px;
    top: 8px;
}
span#l12{
    position: fixed;
    right: 8px;
    top: 3px;
}
div#l1{
    display: block;
    width: 100%;
    border-bottom: gainsboro 2px solid;
    position: fixed;
    top: 32px;
    color: gray;
    float: left;
}
div.content{
    position: relative;
    top: 50px;
    width: 100%;

}
div.I{
    margin-top: 10px;
    border-bottom: gainsboro 2px solid;
}
img#p3{
    float: right;
    margin-right: 30px;
}
img#p4{
    /* float: left;*/  
    margin-bottom: 10px;
}
div#l22{
    margin-left: 60px;
    margin-bottom: 30px;
}
span#l21{
   /* margin-left: 20px;*/    
   color: gray;
}
a#l21{
    margin-left: 15px;
    text-decoration: none;
    color: cornflowerblue;
}
a#l22{
    display: block;
   /* margin-left: 58px;*/
    margin-bottom: 10px;
    text-decoration: none;
    color: cornflowerblue;
    font-weight: bold;

}

img#p6{
    margin-top: 15px;
    margin-right: 15px;
    float: left;
}
div#l221{
    margin-top: 15px;
    width: 650px;
}
a#l221{
    text-decoration: none;
    color: cornflowerblue;
}
div#l23{
    margin-left: 60px;
    margin-bottom: 20px;
}
img#p7{
    margin-left: 5px;
    margin-right: 5px;
}
img#p8{
    margin-left: 5px;
    margin-right: 5px;
}
img#p9{
    margin-left: 5px;
    margin-right: 5px;
}
span#l231{
    /* margin-left: 20px;*/    
    color:gainsboro;
 }

1 个答案

LUO萝北
答案时间：2023-05-30

代码超过 5行，点击查看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .top{
            position: fixed;
            width: 400px;
            top: 10px;
            left: 10px;
            border-bottom: 1px solid black;
        }
        #span1{
            float:right;
        }
        .gray{
            color: gray;
        }
        #span2{
            background-color: rgb(202, 201, 201);
            border-radius: 10%; 
            font-size: 0.9em;
        }
        #pic3{
            float:right;
        }
        #table1{
            margin: auto;
        }
    </style>
</head>
<body>
    <div id="top">
        <img src="img/1.png" alt="" id="pic1">
        <b><span>最新动态</span></b>
        <b><span id="span1"><img src="img/2.png" alt="" id="pic2">设置</span></b>
    </div>
    <div style="clear:both"></div>
    <hr>
    <table id="table1">
        <tr>
            <td rowspan="2">
                <img src="img/4.png" alt="" id="pic1">
            </td>
            <td>
                <span class="gray">热门回答，来自 机械 <a href="#">关注话题</a></span>
                <img src="img/3.png" alt="" id="pic3">
            </td>
        </tr>
        <tr>
            <td>
                <a href="#"><span>人类历史上令人叹为观止的极限精度制造成果有哪些？</span></a>
            </td>
        </tr>
        <tr>
            <td>
                <span id="span2" class="gray">6551</span>
            </td>
            <td>
                <span><b><span>Vincent Fu,</span></b>b>Msterials Sciencxe, PhD</span>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <table>
                    <tr>
                        <td>
                            <img src="img/6.png" alt="" id="pic1">
                        </td>
                        <td>
                            <span>在上面的示例中，第一行的第二个单元格会跨越两列，<br>
                                合并成一个单元格。合并行（垂直合并）：使用 rowspan <br>
                                属性来指定要合并的行数。该属性应用于需要合并的单元<br>
                                格，其值为合并的行数。</span>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <img src="img/7.png" alt="" id=>
                <span class="gray">关注问题</span>
                <img src="img/8.png" alt="" id=>
                <span class="gray">867条评论</span>
                <img src="img/9.png" alt="" id=>
                <span class="gray">作者保留权利</span>
                    
            </td>
        </tr>
    </table>
</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2022-11-22 写成这样，算是屎山吗？TAT

dongdayo

关于前端部分-CSS-综合性练习1 的提问

body里写了134行，对比各位作业后，人傻了。。

<body>
    <style>
        .first{
            padding: 25px 0;
            width:100%;
            height: 25px;
            vertical-align: middle;
        }
        .first_left{
            width:200px;
            float:left;
            padding:0px 0px 0px 20px;
            font-weight:bold;
            font-size:15px;
        }
        .first_right{
            width:50px;
            float:right;
            font-size:10px;
            overflow:hidden;
        }
        .second{
            height:300px;
            width:100%;
            position:absolute;
            border-bottom:2px solid lightgray;
            border-top:2px solid lightgray;
        }
        .second_head{
            float:left;
            width:50px;
            margin:20px 20px 0 20px;
        }
        #follower_number{
            line-height:2;
            background-image:url(img/5.png);
            font-size:14px;
            text-align:center;
            margin:5px 0 0 0;
            color:black;
        }
        .second_title{
            margin:20px 0 0;
            line-height:1.7;
        }
        .second_close{
            width:21px;
            float:right;
            overflow:hidden;
            margin:20px;
        }
        #location{
            font-size:10px;
        }
        .content_preview{
            width:80%;
            padding:0 90px 30px;
        }
        .picture_preview{
            width:200px;
            float:left;
        }
        .text_preview{
            overflow:hidden;
            line-height:1.5;
            padding-left:10px;
        }
        a{
            color:rgb(0, 200, 255);
            text-decoration:none;
        }
        a:visited{
            color:rgb(#6baadd);
        }
        .foot{
            margin:20px;
            position: absolute;
            left:50px;
            bottom:0px;
            color:lightgray;
        }
        .down_a{
            color:lightgray;
            float:bottom;
        }
    </style>

    <div class="first">
        <div class="first_left">
            <img src="img/1.png">
            <span>最新动态</span>
        </div>

        <div  class="first_right">
            <img src="img/2.png">
            <span>设置</span>
        </div>
    </div>
    <div class="second">
        <div class="second_head">
            <a href="" ><img src="img/4.png" width="50px" height="50px"></a>
            <a href=""><div id="follower_number">6565</div></a>
        </div>

        <div class="second_close">
            <img src="img/3.png">
        </div>

        <div class="second_title">
            <span>热门回答，来自 机械&nbsp <a href="">关注话题</a><br>
            <a href=""><strong>人类史令人叹为观止的极限精度制造成果有哪些？</strong></a></span>
        </div>

        <div id="location">
            <p><strong>Vincent Fu,</strong>Materials Science,PhD</p>
        </div>

        <div class="content_preview">
            <div class="picture_preview">
                <img src="img/6.png">
            </div>
            <div class="text_preview">
                <span>说到精度，就不得不提在材料学中最重要的一个方面：表征。要想研究一种材料性能，握在手里把玩是远远不够的，就算你拿出放大镜离近了看，也只能看到表面一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...&nbsp&nbsp</span>
                <a href="" class="show_all">显示全部</a>
            </div>
        </div>

        <div class="foot">
            <a href="" class="down_a"><img src="img/7.png"><span> 关注问题&nbsp&nbsp</span></a>
            <a href="" class="down_a"><img src="img/8.png"><span> 867条评论&nbsp</span></a>
            <span> · 作者保留权利</span>
        </div>
    </div>
</body>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2022-08-04 我这个算是好理解一点的了吧，修修补补用了点时间

M_GX

关于前端部分-CSS-综合性练习1 的提问

加了注释，可以看一下相对应块的作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合练习1</title>
</head>
<body>
<style>
    p{
        /*先写个本，方便后面改动*/
        font-size: 90%;
        font-family: 宋体;
        position: absolute;
        color: gray;
    }
    p.body{
        /*中间一长串文字的文本域大小*/
        width: 270px;
    }
    p.top{
        /*顶部和底部的文字格式*/
        font-size: 80%;
        color: gray;
        position: absolute;
    }
    img.top{
        /*最上面几张图的位置*/
        position: absolute;
        top: 15px;
    }
    img.bottom{
        /*最下面几张图的位置*/
        position: absolute;
        top: 271px;
    }
    span{
        /*主要为了写用户名*/
        position: absolute;
        background-image: url("CSSpic/5.png");
    }
    a.no_underline{
        /*设定超链的颜色和取消下划线*/
        text-decoration: none;
        color: deepskyblue;
    }
    div{
        /*用来划线*/
        position: absolute;
        width: 600px;
        height: 260px;
        border-bottom: 1px darkgray solid;
        border-top: 1px darkgray solid;
        top: 40px;
    }
</style>
<!--这里是头部-->
    <img  class="top" style="left: 30px" src="CSSpic/1.png">
    <p class="top" style="left: 50px;top: 0px;font-weight: bold">最新动态</p>
    <img class="top" style="left: 500px" src="CSSpic/2.png">
    <p class="top" style="left: 515px;top: 0px">设置</p>
    <img src="CSSpic/3.png" style="position: absolute;top: 55px;left: 530px">
<!--不知道咋划线就直接用块边框了-->
<div></div>
<!--左边的图和用户名-->
    <img src="CSSpic/4.png" style="position: absolute;top: 55px;left: 29px">
    <span style="position: absolute;top:100px;left: 32px">6551</span>
<!--右边的内容，这是头-->
    <p style="top: 40px;left: 90px">热门回答，来自 机械 <a class="no_underline" href="">关注话题</a> </p>
    <p style="color:deepskyblue;top:60px;left: 90px;font-weight: bold">人类史上令人叹为观止的极限精度制造成果有哪些？</p>
    <p style="color: #14151c;top: 85px;left: 90px"><strong>Vincent Fu，</strong>Materials Science，Phd</p>
<!--右边的内容，这是文字和图骗-->
    <img class="bottom" src="CSSpic/6.png" style="left: 90px;top: 140px">
    <p class="body" style="color: #262626;top: 125px;left:300px">说到精度,就不得不提在材料科学中最重要的一个方面：表征。
    要研究一种材料性能，握在手里把玩是远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼
    ，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（方法千倍），如果要获得更深...<a class="no_underline" href="">显示全部</a> </p>
<!--这里是最下面的几个元素-->
    <img class="bottom" style="left: 50px" src="CSSpic/7.png">
    <p class="top" style="top: 255px;left: 65px;color: darkgray">关注问题</p>
    <img class="bottom" src="CSSpic/8.png"style="left: 140px" src="CSSpic/7.png">
    <p class="top" style="top: 255px;left: 155px;color: darkgray">867条评论</p>
    <img class="bottom" src="CSSpic/9.png"style="left: 220px" src="CSSpic/7.png">
    <p class="top" style="top: 255px;left: 235px;color: darkgray">作者保留权利</p>
</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2022-06-15 我的代码可能是最乱的了，不会排版啊

田萬

关于前端部分-CSS-综合性练习1 的提问

我的代码可能是最乱的了吧

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	   <style type="text/css">
	   	body{
			width: 500px;

		}
		.center{
			display: block;
			float: right;
		}
		.aaa{
			background-color: aliceblue;
            margin: 5px;
		}
		.tupian{
			float: left;
			
		}
		.f{
			
			position: absolute;
			top: 150px;
			left: 100px;
		}
		a{
			text-decoration: none;
		}
		.foot{
			position: absolute;
			top: 280px;
			left: 100px;
		}
		.foot span{
			font-size: 14px;
			font-family:楷体;
			color: #A9A9A9;
		}
	   </style>
	</head>
	<body>
		<div class="header">
        <img src="img/1.png" >&nbsp;<span>最新动态 </span> 
		<a href="" class="center" style="text-decoration: none;"><img src="img/2.png">&nbsp;<span style="color: black;">设置</span></a>
		  
		</div>
		<hr >
		<img src="img/4.png" style="float: left; margin: 2px; padding:10px 15px;" >
		<span style="font-size: 10px; font-family: 宋体; color: #808080; ">热门回答，来自&nbsp;机械&nbsp;</span><a href="" style="text-decoration: none; color:royalblue;font-size: 10px; font-family: 宋体;">关注话题</a><img src="img/3.png" style="float: right;" >
<br>
	     <span style="font-size: 13px; font-family: 宋体; font-weight: bold; color: dodgerblue;">人类史上令人叹为观止的极限精度制造成果有哪些？</span>
	    <br><br>
		&nbsp;&nbsp;&nbsp;<span class="aaa">6551</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b style="font-family: 宋体;">Vincent Fu,</b><span>Materials Science,PhD</span>
	     <div class="f"><img src="img/6.png" class="tupian"><span style="float: right; width: 200px; margin:0px 15px; font-size: 14px;" >说到精度，就不得不提在材料学中最重要的一个方面
		 :表征。要想研究一种材料性能，握在手里把玩是远远不够的，就算你拿出放大镜看，也只能看到表面的坑坑洼洼...&nbsp;&nbsp;&nbsp;<a href="" style="font-size: 13px; color: dodgerblue; font-fimaly:宋体;">显示全部</a></span>
</div>
       <div class="foot">
		   <img src="img/7.png" >&nbsp;<span>关注问题	</span>&nbsp;<img src="img/8.png" >&nbsp;<span>867条评论</span>&nbsp;<img src="img/9.png" >&nbsp;<span>作者保留权利</span>
	   </div>
	</body>
</html>

1 个答案

monika-zqq
答案时间：2022-06-17

代码超过 5行，点击查看

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body{
    background-color: aliceblue;
    font-family: '宋体', sans-serif;
    font-size: 15px;
    color: #666666;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
  }
  .container {
    background-color: white;
    width: 60vw;
    border-radius: 6px;
    padding: 20px 30px 40px;
    display: flex;
    flex-direction: column;
  }

  .top {
    height: 6vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding-bottom: 6px;
  }
  .underline {
    border-bottom: 1px solid gainsboro;
  }
  .top p span {
    padding-left: 3px;
  }
  .content {
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
  }

  .left-img img {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    margin-bottom: 5px;
  }
  .left-img span {
    background-color: #d9edf7;
    padding: 2px 6px;
    border-radius: 3px;
  }
  .right-toptic {
    font-size: 14px;
    padding-left: 20px;
  }

  .topic {
    margin-bottom: 6px;
  }

  .topic a {
    color: #337ab7;
  }
  .topic img {
    float: right;
    margin-right: 15px;
  }
  .title {
    color: #337ab7;
  }

  .left-img-detail img {
    float: left;
  }
  .right-detail {
    margin-left: 220px;
    line-height: 23px;
  }
  .right-detail a {
    color: #337ab7;
    text-decoration: none;
  }
  .interact {
    display: flex;
    color: gray;
  }
  .interact a {
    color: gray;
    text-decoration: none;
  }
  .interact img, .interact span {
    margin-right: 5px;
  }
</style>
<body>
  <div class="container">
    <div class="top underline">
      <p>
        <img src="img/1.png" alt="">
        <strong>最新动态</strong>
      </p>
     <p>
      <img src="img/2.png" alt="">
      <span>设置</span>
     </p>
    </div>
    <div class="content underline">
      <div class="left-img">
        <img src="img/4.png" alt="">
        <span>6551</span>
      </div>
      <div class="right-toptic">
        <div class="topic">
          <span>热门回答，来自机械</span>
          <a>关注话题</a>
          <a href=""><img src="img/3.png" alt=""></a>
        </div>
        <a class="title">
          <strong>人类史上令人叹为观止的极限精度制造成果有哪些？</strong>
        </a>
        <p class="issues">
          <strong>Vincent Fu</strong>, MaterialsScience, PhD
        </p>
        <div class="detail">
          <div class="left-img-detail">
            <img src="img/6.png" alt="">
          </div>
          <div class="right-detail">
            <p>说到精度，就不得不提在材料学中最重要的一个方面：表征。
              要想研究一种材料性能，握在手里把玩是远远不够的，就算你
              拿出放大镜近了看，也只能看到表面的一些坑坑洼洼，而为了
              知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千
              倍），如果要获得更深...<a href="nowhere">显示全部</a>
            </p>
          </div>
        </div>
        <div class="interact">
          <span><a href=""><img src="img/7.png" alt="">关注问题</a></span>
          <span><a href=""><img src="img/8.png" alt="">72条评论</a></span>
          <span><img src="img/9.png" alt=""></span>
          <span>作者保留权利</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2022-03-20 还是要活学活用啊

Dfantuan

关于前端部分-CSS-综合性练习1 的提问

没参考答案，自己一点点根据上面看的东西写出来，然后看看答案，自己写的好复杂。多练习练习吧！

<!DOCTYPE html>
<html lang="zh">
<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
          body{
               font-family: "宋体";
               font-size: 10px;
               color: black;
               width: 600px;
          }
          .blod{
               font-weight: bold;
          }
          div.a{
               border-bottom: 1px solid silver;
               padding-bottom: 10px;
               margin-bottom: 15px;
          }
          .right{
               float: right;
          }
          span.bt{
              position: absolute;
              top: 10%;
              left: 8%;
          }
          div.end{
               font-family: "新宋体";
               font-style: 12px;
               color: rgb(161, 161, 161);
               position: absolute;
               top: 28%;
               border-bottom: 1px solid gray;
               width: 600px;
               padding:0px 1px 20px;

          }
     </style>

</head>
<body>
     <div class="a">
          <img src="./img/1.png" alt="">
          <span class="blod">最新动态</span>
          <span class="right" >设置</span>
          <img class="right" style="margin-right: 5px;" src="./img/2.png" alt="">
     </div>
     <div>
          <img style="float: right;margin-right: 10px;" src="./img/3.png" alt="">
          <img style="float: left;padding:0px 20px 15px 0px;" src="./img/4.png" alt="">
          <span>热门回答，来自 机械 </span>
          <a href="" style="text-decoration: none;color: blue;">关注话题</a>
          <span style="display: block;padding-top:6px;font-weight: bold;font-size: 10px;color: chocolate;">人类史上令人叹为观止的极限精度制造成果有哪些？</span>
          <span style="position: relative;font-weight: bold;position: absolute;top: 10%;">Vincent Fu,</span>
          <span class="bt">Materials Science, PhD</span>
          <span style="background-color: rgba(223, 218, 218, 0.842);position: absolute;left: 0.6%;top: 10.5%;padding:3px;color: rgb(117, 92, 61);">4524</span>
     </div>
     <div style="position: relative;top: 25px;">
          <img style="float: left;" src="./img/6.png" alt="">
          <p style="display: block;position: relative;left: 15px;width: 90%;" >说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...
          <a style="overflow: hidden;text-decoration: none;" href="">显示全部</a>
          </p>
     </div>
     <div class="end">
          <img style="margin-left:10%;" src="./img/7.png" alt="">
          <span>关注问题</span>
          <img src="./img/8.png" alt="">
          <span>264条评论</span>
          <img src="./img/9.png" alt="">
          <span>作者保留权利</span>
     </div>
</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 59 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-CSS-综合性练习1 的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图