`
oolala
  • 浏览: 99580 次
  • 性别: Icon_minigender_1
  • 来自: 北京
博客专栏
09c341db-7f05-3f2b-a572-9ee69a5d8a77
unix环境高级编程
浏览量：21622
社区版块
存档分类
最新评论

精通CSS 第8章 布局

    博客分类：
  • CSS
阅读更多

所有css布局技术的根本都是3个基本概念：定位、浮动和外边距操作。

 
8.1 计划布局
  要想创建可伸缩且容易维护的css系统，首先应该检查设计，寻找重复的模式，这包括页面结构中的模式或在站点中元素反复出现的方式。
 
8.2 设置基本结构
 使用margin:auto 让设计居中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
body {
            text-align: center;
}

        .wrapper {
            width: 920px;
margin: 0 auto;
text-align: left;
}

        .header {
            height: 300px;
background-color: green;
}

        .content {
            height: 800px;
background-color: gray;
}

        .footer {
            height: 300px;
background-color: #ff6600;
}

    </style>

</head>

<body>

<div class="wrapper">
    <div class="header">
<!-- 头部-->
</div>

    <div class="content">

    </div>

    <div class="footer">
<!--底部 -->
</div>

</div>
</body>
</html>




8.3 基于浮动的布局


基于浮动的布局中，只需要设置希望定位的元素的宽度,然后将它们向左或向右浮动。




浮动元素不再占据文档流中的任何空间，它们就不再对包围它们的块框产生任何影响。


为了解决这个问题，需要对布局中各个点上的浮动元素进行清理。非常常见的做法不是连续地浮动和清理元素，而是浮动几乎所有东西，然后在整个文档的 战略点（比如页脚）上进行一次或二次清理。




8.3.1 两列浮动布局




8.4 固定宽度、流式和弹性布局


8.4.1 流式布局


Liquid Fold http://liquidfold.net






多栏布局有三种基本实现方案：固定宽度、流动、弹性






  


  

    
    
分享到：
      
      
    

  


  

    

      
      |
      精通CSS:第4章 背景图像效果
    

  

  

        
  

    
  

    
评论

    
    
    
    
  


  

    
发表评论

            
   您还没有登录,请您登录后再发表评论 

      

  

  





  

    
相关推荐

    
    
  





  
    Magicbox
  













      

      
        

          

            

              

                

                
              

            

            


            

          

        

            
    

    
    
  

  



   Global site tag (gtag.js) - Google Analytics