简单的CSS网页布局一二列布局_html/css_WEB-ITnose

企鹅博客
19514
文章
0
评论
2020年3月14日09:02:20 评论 15 views 496字阅读1分39秒

1.一列布局

  (一)一列自适应

  自适应浏览器,随着浏览器的拉伸而变化,一般宽度采用百分比的写法,很简

    
     一列布局自适应            
 
  head
         
 
  middle
          
 
  foot
 

  (二)一列固定

  顾名思义,固定布局的宽度,设置固定的PX值。

  只需要在上面一列自适应的HTML代码中,把width:50% 修改成 width:960px即可,当然,各部分如果要求设置的宽度不同,在每个部分的类选择器上进行适当修改即可。

2.二列布局

  (一)二列自适应

   二列的自适应,这时候要用到float属性。

  

    
     二列自适应            
 
  left
         
 
  right
 

注意:以上百分比30%和70%加起来刚好是100%,宽度会充满整个浏览器页面,如果加起来没有100%,则他们中间会空出一栏的空间出来。

  (二)二列居中自适应

  在左右部分包裹成一个div,在该div类选择器中选择 margrin:0,auto;设置宽度为:80%;则子代标签的宽度会基于80%的浏览器宽度来定。

 1  2  3  4     
  5     二列居中自适应 6     34 35 36     
 
  37         
  
   left
  38         
  
   right
  39     
 40 41 

  (三)二列居中固定

  

 1  2  3  4     
  5     二列居中固定宽度 6     34 35 36     
 
  37         
  
   left
  38         
  
   right
  39     
 40 41 

  

  • 版权声明: 发表于 2020年3月14日09:02:20
  • 转载注明:https://www.qieseo.com/365952.html
java 源码分析Arrays.asList方法详解 java教程

java 源码分析Arrays.asList方法详解

最近,抽空把java Arrays 工具类的asList 方法做了源码分析,在网上整理了相关资料,记录下来,希望也能帮助读者! Arrays工具类提供了一个方法asList, 使用该方法可以将一个变长...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: