6-2 浮动与两侧皆自适应的流体布局
本节编程练习不计算学习进度，请电脑登录imooc.com操作

浮动与两侧皆自适应的流体布局

老师视频里的不同布局写法，不是习题！！不是习题！！！

任务

把玩就好，把玩就好……

index.html 
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>浮动与两侧皆自适应的流体布局</title>
  6. <style>
  7.  
  8. body { font-size: 14px; background-color: #DDF3F7; color: #333; }
  9. a { color: #0082CB; text-decoration: none; }
  10. p { margin: 0; } img { border: 0; }
  11.  
  12. .mib_body { width: 600px; margin-left: auto; margin-right: auto; }
  13. .mib_x { margin-bottom: 10px; background-color: #fff; }
  14. .mib_list { padding: 20px; }
  15. .mib_resize { overflow: auto; resize: both; }
  16. .mib_vip { display: inline-block; width: 11px; height: 10px; margin-left: 1px; background: url(data:image/gif;base64,R0lGODlhCwAKAJEDAPyZCveDBuJmBP///yH5BAEAAAMALAAAAAALAAoAAAIdhD1zopgTXgMpsBdylVCPK2UCKI0j95hoRa0NVwAAOw==); }
  17.  
  18. .mib_head_a { float: left; margin-right: 20px; }
  19. /* 下面这个是固定布局写法 */
  20. .mib_cell { display: table-cell; *display: inline-block; width: 2000px; *width: auto; }
  21.  
  22. .mib_sms { line-height: 22px; padding-bottom: 6px; font-size: 14px; }
  23. .mib_select { width: 80px; padding: 5px; font-size: 100%; }
  24. </style>
  25. </head>
  26.  
  27. <body>
  28. <div id="mibBody" class="mib_body">
  29.     <div class="mib_x mib_resize">
  30.         <div class="mib_list">
  31.             <a href="http://t.sina.com.cn/xuruoxuan" class="mib_head_a">
  32.                 <img id="mibHeadImg" title="徐若瑄VIVIAN" src="http://img1.sycdn.imooc.com//53e2e9470001dfd200500050.jpg">
  33.             </a>
  34.             <div class="mib_cell">
  35.                 <p class="mib_sms"><a title="徐若瑄VIVIAN" href="#">徐若瑄VIVIAN<i title="新浪认证" class="mib_vip"></i></a>：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p>
  36.                 <div class="feed_img"><img src="http://img1.sycdn.imooc.com//53e2e9b10001948000890120.jpg" height="120"></div>
  37.             </div>    
  38.         </div>
  39.     </div>
  40.     <div class="mib_x">
  41.         <div class="mib_list">
  42.             <p class="mib_sms">
  43.             	选择头像的宽度：<select id="minSelect" class="mib_select">
  44.                 	<option value="56px">56px</option>
  45.                     <option value="70px">70px</option>
  46.                     <option value="84px">84px</option>
  47.                     <option value="100px">100px</option>
  48.                 </select>
  49.             </p>
  50.         </div>
  51.     </div>
  52. </div>
  53. <script>
  54. var ele_mibSelect = document.getElementById("minSelect"),
  55. 	ele_mibHeadImg = document.getElementById("mibHeadImg");
  56.  
  57. if (ele_mibSelect && ele_mibHeadImg) {
  58. 	ele_mibSelect.onchange = function() {
  59. 		ele_mibHeadImg.style.width = this.value;
  60. 	};
  61. }
  62. </script>
  63. </body>
  64. </html>
下一节