老师帮看下 好像边框没有

来源:3-4 编程练习

黄华仔

2020-11-27 22:34:38

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码,切记添加代码注释(请勿截图)

在这里输入代码,可通过选择【代码语言】突出显示

<!DOCTYPE html>

<html>

<head>

     <style type="text/css">

         *{margin:0;

         padding:0;

          

         }

         .qo0{width:1200px;

         

             overflow: hidden;

             zoom:1;

          

           

             

         }

         .qo1{

             float:left;

             margin:10px;

             text-align:center;

             border:1px #f2f2f2 solid;

      

         }

      

             

         }

         .wo{width:1200px;

              overflow: hidden;

              zoom:1;

             

         }

         .wo1{float:left;

         text-align:center;

           margin:10px;

            border:1px #f2f2f2 solid;

         }

      p{font-family:"微软雅黑";

           

      }

         

     </style>  

</head>

<body>   

       <div class="qo0">

            <div class="qo1">

                <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">

                <p >欢迎来到慕课网学习新知识!</p>

            </div>

            <div class="qo1">

                 <img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">



                  <p>欢迎来到慕课网学习新知识!</p>

            </div> 

            <div class="qo1">

                 <img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg


">

                  <p>欢迎来到慕课网学习新知识!</p>

            </div>

       </div>

       <div class="wo">

           <div class="wo1">

               <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">

                <p>欢迎来到慕课网学习新知识!</p>

           </div>

           <div class="wo1">

               <img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">



                  <p>欢迎来到慕课网学习新知识!</p>

            </div> 

          

           <div class="wo1">

                <img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg


">        <p>欢迎来到慕课网学习新知识!</p>

           </div>

       </div>

</body>

</html>


写回答

1回答

好帮手慕慕子

2020-11-28

同学你好,代码中有一个细节问题,需要注意一下,如下图所示位置多写了一个括号。建议去掉

http://img.mukewang.com/climg/5fc1c21509708a5104160372.jpg

针对同学的问题,解答如下:

因为没有给大盒子设置边框,所以外层盒子没有边框。建议:可以外层盒子添加border属性设置边框样式

http://img.mukewang.com/climg/5fc1c11a09a8abe204080170.jpg

http://img.mukewang.com/climg/5fc1c14f09bf817603980182.jpg

添加之后,可以发现图片与图片之间的间距,和图片与大盒子之间的间距不相等,如下图所示:

http://img.mukewang.com/climg/5fc1c1460938710316100489.jpg

由于每个小盒子的样式都是一样的,可以设置相同的类名,统一设置样式,然后使用一个大盒子包裹所有的六个小盒子,给大盒子设置固定的宽度(等于三个小盒子实际占据的宽度即可),最后通过调整大盒子的padding值,实现所有间距相等。

http://img.mukewang.com/climg/5fc1c25b0972a57809930732.jpg

http://img.mukewang.com/climg/5fc1c30b09b026f305860265.jpg

http://img.mukewang.com/climg/5fc1c3780900efc509110457.jpg

祝学习愉快~

0

0 学习 · 40143 问题

查看课程