CSS固定不动宽度的3列合理布局应用案例分析

日期:2021-01-20 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

固定不动宽度3列合理布局
这很基本,大家立即看编码便能搞清楚:

XML/HTML Code拷贝內容到剪贴板
  1. <div id="wrapper">  
  2.  <div id="header">header</div>  
  3.  <div id="body" class="cls">  
  4.   <div id="aside">  
  5.    <div class="inner">  
  6.     aside   
  7.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
  8.    </div>  
  9.   </div>  
  10.   <div id="content" class="cls">  
  11.    <div id="main">  
  12.     <div class="inner">  
  13.      main   
  14.      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
  15.     </div>  
  16.    </div>  
  17.    <div id="content-aside">  
  18.     <div class="inner">  
  19.      content-aside   
  20.      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
  21.     </div>  
  22.    </div>      
  23.   </div>  
  24.  </div>  
  25.  <div id="footer">footer</div>  
  26. </div>  
CSS Code拷贝內容到剪贴板
  1. #headerwidth980pxheight90pxmargin: 0 autobackground#f60;}   
  2. #bodywidth980pxmargin: 0 auto;}   
  3. #asidefloatleftwidth240pxbackground#ccc;}   
  4. #content{ margin-left240px;}   
  5. #mainfloatleftwidth540pxbackground: pink;}   
  6. #content-aside{  floatleftwidth200pxbackground: orange; }   
  7. #footerwidth980pxheight90pxmargin: 0 autobackground#08f;}  

案例:完成3列照片等宽等间隔合理布局

每一个照片块左波动,宽30%,左外边距2.5%:
100%=(2.5%+30%)+(2.5%+30%)+(2.5%+30%)+2.5%

CSS Code拷贝內容到剪贴板
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4. <meta charset="utf⑻">    
  5. <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">    
  6. <title>3列照片等宽合理布局</title>    
  7. <style>    
  8. * {    
  9.     margin: 0;    
  10.     padding: 0;    
  11. }    
  12. img {    
  13.     displayblock;    
  14.     width: 30%;    
  15.     margin: 2.5% 0 0 2.5%;    
  16.     floatleft;    
  17. }    
  18. </style>    
  19. </head>    
  20. <body>    
  21. <div>    
  22. <img src="byd.jpg" /><img src="byd.jpg" /><img src="byd.jpg" />    
  23. <img src="byd.jpg" /><img src="byd.jpg" /><img src="byd.jpg" />    
  24. <img src="byd.jpg" /><img src="byd.jpg" /><img src="byd.jpg" />    
  25. </div>        
  26. </body>    
  27. </html>   

width: 30%; 表明父级元素宽度的30%.
height: 30%; 假如沒有设定父级元素的实际高宽比,那末这个height是沒有实际效果的.
要完成回应式的正方形,可使用企业vw(Viewport Width):

CSS Code拷贝內容到剪贴板
  1. .square {    
  2.     width: 30%;    
  3.     height: 30vw;    
  4.     backgroundurl("byd.jpg"no-repeat scroll center 0 transparent;    
  5.     background-size: 100% 100%;    
  6.     margin: 2.5% 0 0 2.5%;    
  7.     floatleft;    
  8. }   

但是必须留意的是,低版本号IE和低版本号Android/iOS访问器都不适用视窗(viewport)企业.
或应用JS依据宽设定高,确保适配性:

JavaScript Code拷贝內容到剪贴板
  1. <script src="jquery.js"></script>    
  2. <script>    
  3. $(document).ready(function(){    
  4.     $("img").height($("img").width());    
  5. });    
  6. $(window).resize(function(){    
  7.     $("img").height($("img").width());    
  8. });    
  9. </script>   

百分比合理布局还可以看作是1种回应式合理布局.
简易好用的 百分比合理布局 還是很合适手机上WAP网页页面合理布局的:

CSS Code拷贝內容到剪贴板
  1. min-width:320px;    
  2. max-width:980px;    
  3. width:100%;    
  4. overflow-x: hidden;    
  5. margin: 0 auto;   

最少宽度320px,最大宽度980px,在320px和980px之间全自动融入宽度,看起来还行.
在<img>标识里只用设定width特性百分比值,例如width="40%",无需设定height特性,这样照片可以自主按原占比放缩.
器皿里边的块,一样能够用百分比合理布局,例如左侧的60%,右侧的40%.

上一篇:css 常见款式(共享) 返回下一篇:没有了