固定布局写法和流体布局写法
老师视频里的不同布局写法,不是习题!!不是习题!!!
<!doctype html> <html> <head> <meta charset="utf-8"> <title>浮动与单侧尺寸固定的流体布局</title> <style> body { font-size: 14px; background-color: #DDF3F7; color: #333; } a { color: #0082CB; text-decoration: none; } p { margin: 0; } img { border: 0; } .mib_body { width: 600px; margin-left: auto; margin-right: auto; -webkit-transition: width .35s; transition: width .35s; } .mib_x { margin-bottom: 10px; background-color: #fff; } .mib_list { padding: 20px; overflow: hidden; _zoom: 1; } .mib_vip { display: inline-block; width: 11px; height: 10px; margin-left: 1px; background: url(data:image/gif;base64,R0lGODlhCwAKAJEDAPyZCveDBuJmBP///yH5BAEAAAMALAAAAAALAAoAAAIdhD1zopgTXgMpsBdylVCPK2UCKI0j95hoRa0NVwAAOw==); } .mib_head_a { width: 56px; float: left; } /* 下面这个是固定布局写法 */ .mib_feed_fixed { width: 484px; float: right; } /* 下面这个是流体布局写法 */ .mib_feed_flow { margin-left: 76px; } .mib_sms { line-height: 22px; padding-bottom: 6px; font-size: 14px; } .mib_input { width: 70px; padding: 4px; font-size: 100%; } .mib_btn { width: 70px; padding: 5px; font-size: 100%; } </style> </head> <body> <div id="mibBody" class="mib_body"> <div class="mib_x"> <div class="mib_list"> <a href="http://t.sina.com.cn/xuruoxuan" class="mib_head_a"> <img title="徐若瑄VIVIAN" src="http://img1.sycdn.imooc.com//53e2e9470001dfd200500050.jpg"> </a> <div class="mib_feed_fixed"> <p class="mib_sms"><a title="徐若瑄VIVIAN" href="#">徐若瑄VIVIAN<i title="新浪认证" class="mib_vip"></i></a>:一個人的晚餐!茶泡飯!飯、飯、飯… 今日不減肥,先把病治好再說! 我認真吃完這,燒就會退了吧?! 開動啦~~~~~~~~~~~~~~~~~~</p> <div class="feed_img"><img src="http://img1.sycdn.imooc.com//53e2e9b10001948000890120.jpg" height="120"></div> </div> </div> </div> <div class="mib_x"> <div class="mib_list"> <a href="http://t.sina.com.cn/xuruoxuan" class="mib_head_a"> <img title="徐若瑄VIVIAN" src="http://img1.sycdn.imooc.com//53e2e9470001dfd200500050.jpg"> </a> <div class="mib_feed_flow"> <p class="mib_sms"><a title="徐若瑄VIVIAN" href="#">徐若瑄VIVIAN<i title="新浪认证" class="mib_vip"></i></a>:一個人的晚餐!茶泡飯!飯、飯、飯… 今日不減肥,先把病治好再說! 我認真吃完這,燒就會退了吧?! 開動啦~~~~~~~~~~~~~~~~~~</p> <div class="feed_img"><img src="http://img1.sycdn.imooc.com//53e2e9b10001948000890120.jpg" height="120"></div> </div> </div> </div> <div class="mib_x"> <div class="mib_list"> <p class="mib_sms"> 修改外框的宽度:<input type="number" id="mibInput" step="100" class="mib_input" value="600"> 像素 </p> <button type="button" id="mibBtn" class="mib_btn">确定</button> </div> </div> </div> <script> var ele_mibBody = document.getElementById("mibBody"), ele_mibInput = document.getElementById("mibInput"), ele_mibBtn = document.getElementById("mibBtn"); if ( ele_mibBody && ele_mibInput && ele_mibBtn ) { ele_mibBtn.onclick = function() { var value = ele_mibInput.value; if (!/^\d+$/.test(value)) { value = 600; ele_mibInput.value = value; } // 改变最外面容器的尺寸 ele_mibBody.style.width = value + "px"; }; if (ele_mibInput.type == "number") { ele_mibInput.onchange = function() { ele_mibBtn.click(); }; } } </script> </body> </html>