1-2 浮动的原本作用-文字环绕
本节编程练习不计算学习进度，请电脑登录imooc.com操作

浮动的原本作用-文字环绕

了解浮动的原本作用

任务

给图片添加浮动属性

index.html 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>浮动的原本作用-文字环绕</title>
  6. <style>
  7. .test-box { width: 600px; margin: 16px auto; line-height: 1.5; font-size: 14px; }
  8. .float-left { float: left; margin: 0 10px 5px 0; }
  9. </style>
  10. </head>
  11.  
  12. <body>
  13. <div class="test-box">
  14.     <img src="http://img1.sycdn.imooc.com//53d60af3000171a002560191.jpg"/>
  15.     <p>一直有这么一个美丽的误会，说我是张含韵的忠实粉丝，因为左边这种张含韵萝莉时候的照片频繁出现在我的文章中。</p>
  16.     <p>实际上，当年，我还在念大学那会儿，我就把我收藏的一些美女照片调成成固定的几个比例，专门用来做演示使用。</p>
  17.     <p>分别是128像素，256像素，512像素和原图。然后，非常巧合的是，这些示例图片中序号为1的妹子，就是张含韵。因此，只要有图片演示，无论是使用了1张还是10张，张含韵小妹妹自然都会出现。久而久之，大家都认为我是张含韵的忠实粉丝。</p>
  18.     <p>然而，事实是什么呢？</p>
  19.     <p>事实是，尼玛我以前还真的是张含韵的忠实粉丝，上大学那会儿，唯一关注的新浪名博就是张含韵的博客。不过现在嘛，普通粉丝，普通粉丝。</p>
  20. </div>
  21. </body>
  22. </html>
下一节