码迷,mamicode.com
首页 > Web开发 > 详细

CSS篇之DIV+CSS布局

时间:2016-08-16 23:50:58      阅读:260      评论:0      收藏:0      [点我收藏+]

标签:

<div></div>

  div与其他标签一样,也是一个XHTML所支持的标签。

  div是XHTML中指定的,远门用于布局设计的容器标记。

简单的CSS布局

头部
内容

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .header{
                width: 1000px;
                height: 100px;
                background-color:#ccc;
            }
            
            .content{
                width: 1000px;    
                height: 500px;
                background-color: bisque;            
            }
            
            .footer{
                width: 1000px;
                height: 100px;
                background-color: darkkhaki;
            }
        </style>
    </head>
    <body>
        <div class="header">头部</div>
        <div class="content">内容</div>
        <div class="footer">页脚</div>
    </body>
</html>

上面是简单地布局方法,然而上面有多个值可以精简我最后精简的(把它们相同的值另起一个class名称 三个都有就可以了)

代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .container{
                width: 1000px;
                height: 100px;
            }
            
            .header{
                background-color:#ccc;
            }
            
            .content{
                height: 500px;
                background-color: bisque;            
            }
            
            .footer{
                background-color: darkkhaki;
            }
        </style>
    </head>
    <body>
        <div class="header container">头部</div>
        <div class="content container">内容</div>
        <div class="footer container">页脚</div>
    </body>
</html>

如果内容要分开两个部分或更多时可以这样

头部
内容1
内容2

 

 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .container {
                width: 1000px;
                height: 100px;
                background-color: #FF0000;
                border: 1px solid #333;
            }
            
            .content {
                height: 500px;
            }
            
            .left {
                float:left;
                height: 500px;
                width: 300px;
                background-color: #5CBE3E;
            }
            
            .right  {
                float:left;
                height: 500px;
                width: 300px;
                background-color: #CCCCCC;
            }
            
        </style>
    </head>

    <body>
        <div class="header container">头部</div>
        <div class="content container">
            <div class="left">内容1</div>
            <div class="right">内容2</div>
        </div>
        <div class="footer container">页脚</div>
    </body>

</html>

这里用到一个float(元素的浮动)

 

float(元素浮动)

 left:向左浮动

 right:向右浮动

none:不浮动

它的改变属于行内元素。浮动有个注意的地方。浮动的窗口宽度越大可以放的数量越多,反之窗口宽度越下它的数量多的话就会自动换行显示。

div{float:left}

 

clear(浮动清除)

none:默认值。两边都有浮动

 left:清楚左浮动

right:清除右浮动

both:不允许有浮动(这个比较常用)

div{clear:both}

 

 

position(对象定位)

staitc:无定位,默认。

absolute:绝对定位。脱离文档流通过top、right、left、bottom定位。

如果父元素position为static时,将以body坐标原点进行定位。

如果父元素position为relative时,将父元素进行定位。

div { position:absolute; left:100px; top:100px;}

 

relative:相对定位。(想对自己原来的位置而言)

不脱离文档流

参考自身静态位置通过top、right、left、bottom定位。

div { position: relative; left:100px; top:100px;}

 

 

fixed:固定定位

固定死的位置一直在那里不会乱跑。它是以浏览器窗口来固定的,而不是相对于其包含元素,即时滚动页面,它也会在浏览器窗口一模一样的地方。

(可以用作返回顶部功能)

div { position: fixed; right:0; bottom:0;}

 

 

 z-index

当元素发生重叠是可以通过z-index属性,设置其层叠的先后顺序。较大number值的对象会覆盖在较小number值的对象之上。

z-index:none| number

 

div { z-index:number}

 

 

display(元素显示模式

block   块对象指的是元素显示为一个方块,默认显示状态下将占据整行,其他的元素只能另起一行显示。(可以调节宽度和高度)

inline 行间对象与block刚好相反,它允许多个元素在同一行显示。(不可以调节宽度和高度)

none 隐藏对象

inline-block 上面两个元素的集合体可以调节宽度和高度。

 

div{display:block}

 

CSS篇之DIV+CSS布局

标签:

原文地址:http://www.cnblogs.com/azq6252930/p/5778061.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!