6-4 浮动与单侧尺寸固定的流体布局
本节编程练习不计算学习进度,请电脑登录imooc.com操作

浮动与单侧尺寸固定的流体布局

固定布局写法和流体布局写法

任务

老师视频里的不同布局写法,不是习题!!不是习题!!!

  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; -webkit-transition: width .35s; transition: width .35s; }
  13. .mib_x { margin-bottom: 10px; background-color: #fff; }
  14. .mib_list { padding: 20px; overflow: hidden; _zoom: 1; }
  15. .mib_vip { display: inline-block; width: 11px; height: 10px; margin-left: 1px; background: url(data:image/gif;base64,R0lGODlhCwAKAJEDAPyZCveDBuJmBP///yH5BAEAAAMALAAAAAALAAoAAAIdhD1zopgTXgMpsBdylVCPK2UCKI0j95hoRa0NVwAAOw==); }
  16.  
  17. .mib_head_a { width: 56px; float: left; }
  18. /* 下面这个是固定布局写法 */
  19. .mib_feed_fixed { width: 484px; float: right; }
  20. /* 下面这个是流体布局写法 */
  21. .mib_feed_flow { margin-left: 76px; }
  22.  
  23. .mib_sms { line-height: 22px; padding-bottom: 6px; font-size: 14px; }
  24. .mib_input { width: 70px; padding: 4px; font-size: 100%; }
  25. .mib_btn { width: 70px; padding: 5px; font-size: 100%; }
  26.  
  27. </style>
  28. </head>
  29.  
  30. <body>
  31. <div id="mibBody" class="mib_body">
  32. <div class="mib_x">
  33. <div class="mib_list">
  34. <a href="http://t.sina.com.cn/xuruoxuan" class="mib_head_a">
  35. <img title="徐若瑄VIVIAN" src="http://img1.sycdn.imooc.com//53e2e9470001dfd200500050.jpg">
  36. </a>
  37. <div class="mib_feed_fixed">
  38. <p class="mib_sms"><a title="徐若瑄VIVIAN" href="#">徐若瑄VIVIAN<i title="新浪认证" class="mib_vip"></i></a>:一個人的晚餐!茶泡飯!飯、飯、飯… 今日不減肥,先把病治好再說! 我認真吃完這,燒就會退了吧?! 開動啦~~~~~~~~~~~~~~~~~~</p>
  39. <div class="feed_img"><img src="http://img1.sycdn.imooc.com//53e2e9b10001948000890120.jpg" height="120"></div>
  40. </div>
  41. </div>
  42. </div>
  43. <div class="mib_x">
  44. <div class="mib_list">
  45. <a href="http://t.sina.com.cn/xuruoxuan" class="mib_head_a">
  46. <img title="徐若瑄VIVIAN" src="http://img1.sycdn.imooc.com//53e2e9470001dfd200500050.jpg">
  47. </a>
  48. <div class="mib_feed_flow">
  49. <p class="mib_sms"><a title="徐若瑄VIVIAN" href="#">徐若瑄VIVIAN<i title="新浪认证" class="mib_vip"></i></a>:一個人的晚餐!茶泡飯!飯、飯、飯… 今日不減肥,先把病治好再說! 我認真吃完這,燒就會退了吧?! 開動啦~~~~~~~~~~~~~~~~~~</p>
  50. <div class="feed_img"><img src="http://img1.sycdn.imooc.com//53e2e9b10001948000890120.jpg" height="120"></div>
  51. </div>
  52. </div>
  53. </div>
  54.  
  55. <div class="mib_x">
  56. <div class="mib_list">
  57. <p class="mib_sms">
  58. 修改外框的宽度:<input type="number" id="mibInput" step="100" class="mib_input" value="600"> 像素
  59. </p>
  60. <button type="button" id="mibBtn" class="mib_btn">确定</button>
  61. </div>
  62. </div>
  63. </div>
  64. <script>
  65. var ele_mibBody = document.getElementById("mibBody"),
  66. ele_mibInput = document.getElementById("mibInput"),
  67. ele_mibBtn = document.getElementById("mibBtn");
  68.  
  69. if ( ele_mibBody && ele_mibInput && ele_mibBtn ) {
  70. ele_mibBtn.onclick = function() {
  71. var value = ele_mibInput.value;
  72. if (!/^\d+$/.test(value)) {
  73. value = 600;
  74. ele_mibInput.value = value;
  75. }
  76. // 改变最外面容器的尺寸
  77. ele_mibBody.style.width = value + "px";
  78. };
  79.  
  80. if (ele_mibInput.type == "number") {
  81. ele_mibInput.onchange = function() {
  82. ele_mibBtn.click();
  83. };
  84. }
  85. }
  86. </script>
  87. </body>
  88. </html>
下一节