今天学习，写的代码-CSDN博客

本文链接：https://blog.csdn.net/longwayyw/article/details/82597240
效果有一点问题，但是盒子里的元素浮动规则搞懂了。
几天有留意写注释的规则，一种是写在标签里面的，一种是写在标签外面的。
<!doctype html><!--声明文档类型为html5 HTML1 2 3 4 4.01 5-->
<html><!--html的开始标签 双 存放网页的所有内容-->
    <head><!--头部：给搜索引擎看给浏览器看的信息-->
         <title>猫眼电影信息列表--万章</title><!--网站的名字-->
         <meta charset="UTF-8"><!--网页的语言 meta是一个单标签--> 
         <meta name="keywords" content="网页列表页组件，信息展示，电影信息，万章"><!--网站的关键字-->
         <meta name="description" content="这是由万章老师亲自从猫眼电影网站上拔下来的案例，效果一级棒"><!--网站的简介-->
         <style> /*网页的装修公司 装修页面上元素的样式*/
              body{
                   margin:0;
              }
              .msg{
                   width:732px;
                   /*样式名称：样式值*/
                   height:552px;
                   background-color:#ff3366;/*背景颜色：给元素加个颜色*/
                   margin:100px auto 0 auto;
                   border:5px solid #660099;
              }
              .msglist{
                   float:left;/*竖着的元素横向排列*/
                   width:160px;
                   height:260px;
                   border:1px solid #cccccc;

              }
              .msglist:nth-child(1){
              /*找到用class命名为msglist的元素
                找到第一个子元素*/
                float:left;
              }
              .msglist:nth-child(2){
              /*找到用class命名为msglist的元素
                找到第一个子元素*/
                float:left;
              }
              .msglist:nth-child(3){
              /*找到用class命名为msglist的元素
                找到第一个子元素*/
                float:left;
              }
              .msglist:nth-child(4){
              /*找到用class命名为msglist的元素
                找到第一个子元素*/
                float:left;
              }
               .msglist:nth-child(5){
              /*找到用class命名为msglist的元素
                找到第一个子元素*/
                float:left;
              }
               .msglist:nth-child(6){
              /*找到用class命名为msglist的元素
                找到第一个子元素*/
                float:left;
              }
               .msglist:nth-child(7){
              /*找到用class命名为msglist的元素
                找到第一个子元素*/
                float:left;
              }
               .msglist:nth-child(8){
              /*找到用class命名为msglist的元素
                找到第一个子元素*/
                float:left;
                margin-right:0;
              }
              .listpic{
                   width:
                   height:
                   background-color:
              }
              .listtext{
                   width:160px;
                   height:40px;
                   background-color:#99ffcc;
                   text-align:center;
                   line-height:40px;
                   color:#ef4231
              }

         </style>
    </head>
    <body><!--用户再网页上能看到的所有内容-->
         <div class="msg">
              <div class="msglist">
                   <div class="listpic">
                        <img src="images/1.jpeg"></img>
                   </div>
                   <div class="listtext">购票</div>
              </div><!--子元素-->
              <div class="msglist"><div class="msglist">
                   <div class="listpic">
                        <img src="images/2.jpeg"></img>
                   </div>
                   <div class="listtext">购票</div>
             </div>
              <div class="msglist"><div class="msglist">
                   <div class="listpic">
                        <img src="images/3.jpeg"></img>
                   </div>
                   <div class="listtext">购票</div>
              </div>
              <div class="msglist"><div class="msglist">
                   <div class="listpic">
                        <img src="images/4.jpeg"></img>
                   </div>
                   <div class="listtext">购票</div>
              </div>
              <div class="msglist"><div class="msglist">
                   <div class="listpic">
                        <img src="images/5.jpeg"></img>
                   </div>
                   <div class="listtext">购票</div>
              </div>
              <div class="msglist"><div class="msglist">
                   <div class="listpic">
                        <img src="images/6.jpeg"></img>
                   </div>
                   <div class="listtext">购票</div>
              </div>
              <div class="msglist"><div class="msglist">
                   <div class="listpic">
                        <img src="images/7.jpeg"></img>
                   </div>
                   <div class="listtext">购票</div>
              </div>
              <div class="msglist"><div class="msglist">
                   <div class="listpic">
                        <img src="images/8.jpeg"></img>
                   </div>
                   <div class="listtext">购票</div>
              </div>
         </div><!--在网页内容区间划分区域-->

    </body>
</html><!--html的结束标签-->