感觉还有很多问题,请大家帮我看一看,谢谢。

感觉还有很多问题,请大家帮我看一看,谢谢。

<!DOCTYPE html>
<html>
<head>
        <!-- 此处编写样式 -->
     <style>
         *{padding:0;
            margin:0;
         }
         .fys{width:800px;
              height:auto;
              border:1px dashed gray;
              float:left;
              
         }
         .zys{
         float:left;
         width:200px;
         margin:20px 30px;
         
                  }
        p{width:200px;
            border-bottom:1px dashed gray;
            border-right:1px dashed gray;
            border-left:1px dashed gray;
            padding:0px 19px;
        }
                 
     </style>
</head>
<body>   
        <!-- 此处写代码 -->    
        <div class="fys">
            <div class="zys"><img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
                <p>欢迎来到慕课网学习新知识!</p>   
            </div>
            <div class="zys">
                <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
                <p>欢迎来到慕课网学习新知识!</p> 
            </div>
            <div class="zys">
                <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
               <p>欢迎来到慕课网学习新知识!</p> 
            </div>
            <div class="zys">
                <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
                <p>欢迎来到慕课网学习新知识!</p> 
            </div>
            <div class="zys">
                <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
                <p>欢迎来到慕课网学习新知识!</p> 
            </div>
            <div class="zys">
                <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
                <p>欢迎来到慕课网学习新知识!</p> 
            </div>
        </div>
</body>
</html>


正在回答

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

2回答

zys宽度设置的有问题,图片宽度为240px,所以设置zys宽度应为240px,如果想要实现整体居中可以在外层包裹一层div盒子,用margin实现居中即可,参考修改代码:

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

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

自己可以再测试一下哦,祝学习愉快~~

  • AiChiRol 提问者 #1
    怎么看出图片的宽度是多少呢?打开网址然后用F12看吗
    2018-03-06 09:40:06
  • 好帮手慕星星 回复 提问者 AiChiRol #2
    可以用F12看,或者是把图片下载下来,用图片查看器查看都是可以的。
    2018-03-06 11:32:43
提问者 AiChiRol 2018-03-06 09:46:01

我外加了一个包裹zys的盒子,但是fys的宽度也要改动。我想问改动的这个数值是靠试出来的,还是算出来的呢。。。。我是猜了一个900px。

<!DOCTYPE html>
<html>
<head>
        <!-- 此处编写样式 -->
     <style>
         *{padding:0;
            margin:0;
         }
         .fys{width:900px;
              height:auto;
              border:1px dashed gray;
              float:left;
               
         }
         .zys{
         float:left;
         width:240px;
         margin:20px 30px;
          
                  }
        p{width:200px;
            border-bottom:1px dashed gray;
            border-right:1px dashed gray;
            border-left:1px dashed gray;
            padding:0px 19px;
        }
        .dys{width: 780px
            margin:0 auto;
            overflow: hidden;
        }
                  
     </style>
</head>
<body>   
        <!-- 此处写代码 -->    
        <div class="fys">
            <div class="dys">
            <div class="zys"><img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
                <p>欢迎来到慕课网学习新知识!</p>   
            </div>
            <div class="zys">
                <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
                <p>欢迎来到慕课网学习新知识!</p> 
            </div>
            <div class="zys">
                <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
               <p>欢迎来到慕课网学习新知识!</p> 
            </div>
            <div class="zys">
                <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
                <p>欢迎来到慕课网学习新知识!</p> 
            </div>
            <div class="zys">
                <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
                <p>欢迎来到慕课网学习新知识!</p> 
            </div>
            <div class="zys">
                <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
                <p>欢迎来到慕课网学习新知识!</p> 
            </div>
        </div>
        </div>
</body>
</html>


  • 一般的排版布局都是通过计算得出来的,也是考验自己的布局计算能力。
    2018-03-06 11:34:01
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师