網站建設
                                                       
                                                          收藏本站 
                                                      用戶ID/郵箱: 密 碼:
                                                      客戶中心 Customer service 您目前的位置:首 頁 > 客戶中心 > DIV+CSS 



                                                      DIV+CSS,網站建設DIV+CSS:關于左邊固定,右邊自適應布局的響應式布局寫法

                                                      關于左邊固定,右邊自適應布局的響應式布局寫法

                                                      關于響應式布局現才接觸到,雖然代碼很簡單,但是對基礎要求還是有一些。

                                                      1.left設置position:absolute和width:70px;那么右邊用margin-left:70px;
                                                      因為是響應式的我用jquery設置了一下高度(不用jquery,直接設置高度為
                                                      100%好像不行,不知道為什么有知道的小伙伴,可以在下面留言,有改進的也可以在下面留言);
                                                      代碼如下

                                                      <!DOCTYPE html> 
                                                      <html> 
                                                          <head> 
                                                              <meta charset="UTF-8"> 
                                                              <title></title> 
                                                              <style type="text/css"> 
                                                                 html{ height: 100%;} 
                                                                 body{ margin: 0; height: 100%;} 
                                                                 .left{ 
                                                                     position: absolute; 
                                                                     width: 88px; 
                                                                     height:100%;
                                                      background:red; } .right{ margin-left: 88px; border: 1px red solid;
                                                      background:blue; } </style> <script src="js/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".right").css("height",$(window).height()+"px"); $(window).resize(function(){ $(".right").css("height",$(window).height()+"px"); }); }); </script> </head> <body> <div class="container"> <div class="left"></div> <div class="right"></div> </div> </body> </html>

                                                      2.左邊浮動,右邊overflow:auto;

                                                      <!DOCTYPE html> 
                                                      <html> 
                                                          <head> 
                                                              <meta charset="UTF-8"> 
                                                              <title></title> 
                                                              <style type="text/css"> 
                                                                 html{ height: 100%;} 
                                                                 body{ margin: 0; height: 100%;} 
                                                                 .left{ 
                                                                     float:left; 
                                                                     width: 88px; 
                                                                     background:red; 
                                                                 } 
                                                                 .right{ 
                                                                     overflow: auto; 
                                                                     height: 200px; 
                                                                     background: blue; 
                                                                 } 
                                                              </style> 
                                                              <script src="js/jquery.min.js"></script> 
                                                              <script type="text/javascript"> 
                                                                 $(function(){ 
                                                                     $(".right").css("height",$(window).height()+"px"); 
                                                                     $(window).resize(function(){ 
                                                                     $(".right").css("height",$(window).height()+"px");     
                                                                     }); 
                                                                 }); 
                                                                 $(function(){ 
                                                                     $(".left").css("height",$(window).height()+"px"); 
                                                                     $(window).resize(function(){ 
                                                                     $(".left").css("height",$(window).height()+"px");     
                                                                     }); 
                                                                 }); 
                                                              </script> 
                                                          </head> 
                                                          <body>

                                                       


                                                      上一條: html實現 頁面禁止右鍵 禁止復制 禁止圖片拖動 禁止復制和剪切
                                                      下一條: css常用屬性總結之 id和class的區別,使用類還是ID?
                                                      相關文章
                                                      css常用屬性總結之 id和class的區別,使用類還是ID?
                                                      關于左邊固定,右邊自適應布局的響應式布局寫法
                                                      html實現 頁面禁止右鍵 禁止復制 禁止圖片拖動 禁止復制和剪切
                                                      推廣經驗分享
                                                      其它
                                                      網站建設資源
                                                      常見問題
                                                      網站知識
                                                      首頁關于我們業務范圍新聞資訊成功案例客服中心聯系我們深圳網站建設網站優化付款帳戶
                                                      COPYRIGHT(C) 2005-2019 亞網互聯·中國 版權所有 ALL RIGHTS RESERVED (粵ICP備15005241號)
                                                      深圳網站建設公司地址:深圳市寶安區龍華民治大道東明大廈15樓 1529-1531 室   E-Mail:[email protected]  
                                                      公司電話:0755-89812581(8線)  
                                                      深圳市亞網科技有限公司 深圳網站建設常年法律顧問:朱運德律師
                                                      四川金7乐18061809期

                                                                                                                                                              排列三走势图 预测 360新疆时时走势图 广东时时走势图 台湾时时彩五星走势图 快速时时计划 张家口双色球中奖者 辽宁11选5走势图一定牛手机 天津时时彩最多多少期连号 广东时时20选 时时彩开奖能控制开奖号码吗 重庆时时走试图 下载秒速时时结果 pk10前五1码计划 北京赛pk10走势图 彩票计划软件大全 重庆麻将楼