有没有更简洁的写法?

有没有更简洁的写法?

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title></title>

 <style type="text/css">

   /*此处写代码*/

   .part1{

      width:800px;

       height:300px;

       background:#add8e6;

       margin:0 auto;

       

       

   }

   .pic1{

     width: 360px;

     height: 215px;

     float: left;

     margin-left:30px;

     margin-top:42.5px ;

   }

   .pic2{

     width: 360px;

     height: 215px;

     float:right;

     margin-right:30px ;

     margin-top:42.5px ;

     


   }

 

   .part2{

       width:800px;

       height:100px;

       background:#ffb6c1;

       margin:0 auto;

   }

   .pic3{

     height: 60px;

     float: left;

     margin-left:50px;

     margin-top:20px ;

   }

   .pic4{

     width: 200px;

     height: 60px;

     float: left;

     margin-left:50px;

     margin-top:20px ;

   }

   .pic5{

     width: 200px;

     height: 60px;

     float:right;

     margin-right:50px ;

     margin-top:20px ;

   }

   

 

 

 

 </style>

</head>

<body>

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

 <div class=contanier>

     <div class=part1>

       <img class=pic1 src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg">

       <img class=pic2 src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg">

     </div>

     <div class="part2">

       <img class="pic3" src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg">

       <img class="pic4" src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg">

       <img class="pic5" src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg">

     </div>

 </div>

</body>

</html>


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

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

1回答
好帮手慕码 2019-04-02 16:14:50

同学你好!

代码效果实现很好!

更简洁的写法是:给最外层的div设置宽高、绝对定位,使用方法布局水平垂直居中,这样就可以不用在part1和part2中设置margin:0 auto了

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

图片之间间隙应该是相同的:

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

这里可以修改一下margin-left/right的值:(大div宽为800px-两个图片宽共720)/3:26.666

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

如果解决了你的疑惑,望采纳, 祝学习愉快~~


问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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