老师, 帮我看下这样写有问题没, 还有复制到不同的浏览器显示不一样, 怎么解决兼容问题呢?

老师, 帮我看下这样写有问题没, 还有复制到不同的浏览器显示不一样, 怎么解决兼容问题呢?

<!DOCTYPE html>

<html>

<head>

        <!-- 此处编写样式 -->

        <style type="text/css">

            *{margin:0px;padding:0px;}

            .list{border:1px solid #ececec; margin:10px; width:786px;}

            .pic{ float:left;border:1px solid #ececec;margin:10px;}

            div p{line-height:30px;text-indent:0.5em;}

            .list{float:left;}

            

            

        </style>

</head>

<body>   

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

        <div>

            <div>

                <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">

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

            </div>

            <div>

                <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">

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

            </div>

            <div>

                <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">

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

            </div> 

             <div>

                <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">

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

            </div>

            <div>

                <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">

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

            </div>

            <div>

                <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">

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

            </div>            

        </div>

</body>

</html>


正在回答 回答被采纳积分+1

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

2回答
提问者 voating 2018-01-29 16:20:53
<!DOCTYPE html>
<html>
<head>
        <!-- 此处编写样式 -->
        <style type="text/css">
            *{margin:0px;padding:0px;}
            .list{border:1px solid #ececec; margin:10px; width:786px;}
            .pic{ float:left;border:1px solid #ececec;margin:10px;}
            div p{line-height:30px;text-indent:0.5em;}
            .list{float:left;}
            
            
        </style>
</head>
<body>   
        <!-- 此处写代码 --> 
        <div class="list">
            <div class="pic">
                <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
                <p>欢迎来到慕课网学习新知识!</p>
            </div>
            <div class="pic">
                <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
                <p>欢迎来到慕课网学习新知识!</p>
            </div>
            <div class="pic">
                <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
                <p>欢迎来到慕课网学习新知识!</p>
            </div> 
             <div class="pic">
                <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
                <p>欢迎来到慕课网学习新知识!</p>
            </div>
            <div class="pic">
                <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
                <p>欢迎来到慕课网学习新知识!</p>
            </div>
            <div class="pic">
                <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
                <p>欢迎来到慕课网学习新知识!</p>
            </div>            
        </div>
</body>
</html>


bbbboom 2018-01-29 14:54:08

同学,你上传的代码body中是没有class类的,如下:

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

现在测试的样式和编程中给出的效果图不符的,为了避免代码遗漏的情况,可以上传之前先把代码格式化一下哦,如下:

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

方便的话可以重新上传哦,一起加油啊,ヾ(◍°∇°◍)ノ゙

  • 提问者 voating #1
    始终粘贴不上类呢?
    2018-01-29 16:05:12
  • 提问者 voating #2
    已在本帖重新提交代码, 麻烦老师看下
    2018-01-29 16:21:44
  • bbbboom 回复 提问者 voating #3
    我测试了你的代码没有问题,关于你问的兼容问题,可以设置一下字符编码(<meta charset="utf-8">),因为有的浏览器有自己默认的编码,不加上的话也会正常显示。可以自己再试一下哦!
    2018-01-29 16:43:55
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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