一次前端作业的收获 Minoz

这几天在做一个前端学院留的第一个作业,学习到了许多，现在来整理消化一下

布局方面：
1.如何让一个宽度自适应块状元素居中

HTML代码：

<div class="wrap">
    <div class="parent">
        <div class="child">
            <div class="a">我居中咯！</div>
            <div class="a">我居中咯！</div>
        </div>
    </div>
</div>

css代码：

.wrap{
    position: relative;    /*注释处为重要部分*/
    overflow: hidden;      /**/
    width: 600px;
    border: 1px solid red;
}
.parent{
    position: relative;   /**/
    left: 50%;            /**/
    float: left;          /**/
}
 .child{
    position: relative;   /**/
    right: 50%;          /**/
    border: 1px solid black;
} 
.a{
    width: 100px;
    height: 100px;
    border: 1px solid green;
}

运行结果：

原理呢，想必会前端的看看代码就知道怎么回事了，就不在多此一举了。ps：不要介意样式以及代码质量哦！

2.上面是自适应宽度，那么，固定宽度呢？

HTML代码：

<div class="parent">
    <div class="child">
        我水平垂直居中咯!
    </div>
</div>

CSS代码：

.parent{
    position: relative;
     200px;
    height: 200px;
    border: 1px solid red;   
}
.child{
    position: absolute;
    left: 50%;
    margin-left: -25px;  /*负的宽度的一半*/
    top: 50%;
    margin-top: -30px;   /*负的高度度的一半*/
     50px;
    height: 60px;
    background-color: #eee;
}

运行结果

顺便带上垂直居中，这是我经常用的一个方法~~

3.如何让几个块状元素等高且自适应呢？

HTML代码

<div class="parent">
    <div class="child">
        我们等高咯我们等高咯我们等高咯我们等高咯我们等高咯我们等高咯我们等高咯
    </div>
    <div class="child">
        我们等高咯我们等高咯我们等高咯我们等高咯我们等高咯
    </div>
    <div class="child">
        我们等高咯我们等高咯我们等高咯我们等高咯我们等高咯我们等高咯我们等高咯我们等高咯我们等高咯我们等高咯我们等高咯
    </div>
</div>

CSS代码

.parent{
   overflow: hidden;
}
.child{
   padding-bottom: 9999px; /*要足够大哦！*/
   margin-bottom: -9999px; 
   width: 200px;
   float: left;
   background-color: #eee;
   margin-left: 10px;
}

运行结果

并且高度自适应，还有除了ie5都兼容哦！！！

 6.在这次写代码中又学习了新的布局方式

  1>圣杯布局

HTML代码

<div class="header">header</div>
<div class="contant">
    <div class="main">main</div>
    <div class="sub">
    subsubs ubsub subsubs ubsubsubsub
    </div>
    <div class="extra">extra extr aex traextra</div>
</div>
<div class="footer">footer</div>

CSS代码

.header{
    height: 20px;
    background-color: #E081B2;
}
.footer{
    height: 20px;
    background-color: #B2D867;
}
.contant{
    padding: 0 240px 0 200px;  /**/  
    overflow: hidden;          /**/ 
    _zoom: 1;                  /*ie5,6*/
}
.main{
    float: left;              /**/ 
    width: 100%;              /**/ 
    background-color: #66D9D0;
}
.sub{
    float: left;             /**/ 
    margin-left: -100%;      /**/ 
    width: 200px;            /**/ 
    position: relative;      /**/ 
    left: -200px;            /**/ 
    background-color: #AE81BC;
}
.extra{
    float: left;            /**/ 
    margin-left: -240px;    /**/ 
    width: 240px;           /**/ 
    position: relative;     /**/ 
    right: -240px;          /**/  
    background-color: #E82E4D;
}

运行代码：

ps：中间部分不等高，很不美丽吧，那我们是不是可以添加上面说过的实现等高的方法，让布局更加美丽些！

 2>双飞翼布局

    在main里嵌套了一层div，在此div设置margin属性

HTML代码

<div class="header">header</div>
<div class="contant">
    <div class="main">
        <div class="main-wrap">main</div>   ////
    </div>
    <div class="sub">subsubs ubsub subsubs ubsubsubsub</div>
    <div class="extra">extra extr aex traextra</div>
</div>
<div class="footer">footer</div>

CSS代码

.header{
    height: 20px;
    background-color: #E081B2;
}
.footer{
    height: 20px;
    background-color: #B2D867;
}
.contant{
    overflow: hidden;         /**/       
    _zoom: 1;                 /**/
} 
.main-wrap{
    margin: 0 240px 0 200px;  /*margin*/
}
.main{
    float: left;              /**/ 
    width: 100%;              /**/ 
    background-color: #66D9D0;
}
.sub{
    float: left;             /**/ 
    margin-left: -100%;      /**/ 
    width: 200px;            /**/ 
    background-color: #AE81BC;
}
.extra{
    float: left;            /**/ 
    margin-left: -240px;    /**/ 
    width: 240px;           /**/  
    background-color: #E82E4D;
}

运行代码如上一个。

两种布局兼容性极好，ie5.5以上都支持，并且可以通过双飞翼布局实现各种布局，大家可以搜一下淘宝UED双飞翼布局哦！值得大家研究！