2018-11-22

导航条

  /*清除默认样式*/
    *{
        margin: 0;
        padding: 0;
    }

    /*设置ul*/
    .nav{
        /*去除项目符号*/
        list-style: none;
        /*为ul设置一个背景颜色*/
        background-color: #6495ed;
        /*设置一个宽度*/
        /*在IE6中，如果为元素指定了一个宽度，则会默认开启hasLayout*/
        width: 1000px;
        /*设置居中*/
        margin: 50px auto;
        /*解决高度塌陷*/
        overflow: hidden;
    }

    /*设置li*/
    .nav li{
        /*设置li向左浮动*/
        float: left;
        width: 12.5%;
    }

    .nav a{
        /*将a转换为块元素*/
        display: block;
        /*为a指定一个宽度*/
        width: 100%;
        /*设置文字居中*/
        text-align: center;
        /*设置一个上下内边距*/
        padding: 5px 0;
        /*去除下划线*/
        text-decoration: none;
        /*设置字体颜色*/
        color: white;
        /*设置加粗*/
        font-weight: bold;
    }

    /*设置a的鼠标移入的效果*/
    .nav a:hover{   background-color: #cc0000;
    }

清除浮动

.box1{
        width: 100px;
        height: 100px;
        background-color: yellow;
        /*设置box1向左浮动*/
        float: left;
    }
    .box2{
        width: 200px;
        height: 200px;
        background-color: yellowgreen;
        /*
        由于受到box1浮动的影响，box2整体向上移动了100px
        我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能
        可选值：
            none，默认值，不清除浮动
            left，清除左侧浮动元素对当前元素的影响
            right，清除右侧浮动元素对当前元素的影响
            both，清除两侧浮动元素对当前元素的影响
                清除对他影响最大的那个元素的浮动
        */
        /*
        清除box1浮动对box2产生的影响
        清除浮动以后，元素会回到其他元素浮动之前的位置
        */
        /*clear: left;*/
        float: right;
    }
    .box3{
        width: 300px;
        height: 300px;
        background-color: skyblue;
        clear: both;
    }

解决高度塌陷

    .box1{
        border: 1px solid red;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
    }
    /*
    解决高度塌陷方案二：
        可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的
        然后再对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用
        使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构
    */
    .clear{
        clear: both;
    }

2.

  .box1{
        border: 1px solid red;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
    }
    /*通过after伪类，选中box1的后边*/
    /*
    可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，
    这样做和添加一个div的原理一样，可以达到一个相同的效果，
    而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用
    */
    .clearfix:after{
        /*添加一个内容*/
        content: "";
        /*转换为一个块元素*/
        display: block;
        /*清除两侧的浮动*/
        clear: both;
    }
    /*在IE6中不支持after伪类,所以在IE6中还需要使用hasLayout来处理*/
    .clearfix{
        zoom: 1;
    }

相对定位

.box1{
        height: 200px;
        background-color: red;
        position: relative;
    }
    .box2{
        width: 200px;
        height: 200px;
        background-color: yellow;
        /*
        定位：
            - 定位指的就是将指定的元素摆放到页面的任意位置
                通过定位可以任意的摆放元素
            - 通过position属性来设置元素的定位
            -可选值：
                static：默认值，元素没有开启定位
                relative：开启元素的相对定位
                absolute：开启元素的绝对定位
                fixed：开启元素的固定定位（也是绝对定位的一种）
        */
        /*
        当元素的position属性设置为relative时，则开启了元素的相对定位
            1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
            2.相对定位是相对于元素在文档流中原来的位置进行定位
            3.相对定位的元素不会脱离文档流
            4.相对定位会使元素提升一个层级
            5.相对定位不会改变元素的性质，块还是块，内联还是内联
        */
        position: relative;
        /*
        当开启了元素的定位（position属性值是一个非static的值）时，可以通过left right top bottom四个属性来设置元素的偏移量
            left：元素相对于其定位位置的左侧偏移量
            right：元素相对于其定位位置的右侧偏移量
            top：元素相对于其定位位置的上边的偏移量
            bottom：元素相对于其定位位置下边的偏移量
        通常偏移量只需要使用两个就可以对一个元素进行定位，
        一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位
        */
        left: 100px;
        top: 200px;
    }
    .box3{
        width: 200px;
        height: 200px;
        background-color: yellowgreen;
    }

    .s1{
        position: relative;
        width: 200px;
        height: 200px;
        background-color: yellow;
    }

绝对定位

        .box1{
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .box2{
        width: 200px;
        height: 200px;
        background-color: yellow;
        /*
        当position属性值设置为absolute时，则开启了元素的绝对定位

        绝对定位：
            1.开启绝对定位，会使元素脱离文档流
            2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
            3.绝对定位是相对于离他最近的、开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位，都会同时开启父元素的相对定位）
                如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
            4.绝对定位会使元素提升一个层级
            5.绝对定位会改变元素的性质：
                内联元素变成块元素，
                块元素的宽度和高度默认都被内容撑开
        */
        position: absolute;
        /*left: 100px;
        top: 100px;*/
    }
    .box3{
        width: 300px;
        height: 300px;
        background-color: yellowgreen;
    }
    .box4{
        width: 300px;
        height: 300px;
        background-color: orange;
        /*开启box4的相对定位*/
        /*position: relative;*/
    }
    .s1{
        width: 100px;
        height: 100px;
        background-color: yellow;
        /*开启绝对定位*/
        position: absolute;
    }
</style>
  </head>
  <body>
<div class="box1"></div>
<div class="box5">
    <div class="box4">
        <div class="box2"></div>
    </div>
</div>
<div class="box3"></div>

<span class="s1">我是一个span</span>

固定定位

    .box1{
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .box2{
        width: 200px;
        height: 200px;
        background-color: yellow;
        /*
        当元素的position属性设置fixed时，则开启了元素的固定定位
        固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样
        不同的是：
            固定定位永远都会相对于浏览器窗口进行定位
            固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动

        IE6不支持固定定位
        */
        position: fixed;
        left: 0px;
        top: 0px;
    }
    .box3{
        width: 200px;
        height: 200px;
        background-color: yellowgreen;
    }

作业

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>近期开班</title>
<style type="text/css">
    *{
    margin: 0;
    padding: 0;
    }
    .all{
    width: 300px;
    height: 470px;
    margin: 50px auto;
    }
    .top{
    width: auto;
    height: 3px;
    margin: 0 auto;
    background-color: #019e8b;
    }
    .title{
    width: auto;
    height: 35px;
    margin-bottom: 3px;
    background-color: #f5f5f5;
    }
    a{
    text-decoration: none;
    }
    a:hover{
    color: orange;
    }
    .content{
    margin: 7px 0 0 16px;
    float: left;
    }
    .content1{
    margin: 10px 23px 0 0;
    float: right;
    font-size: 12px;
    }
    .border{
    width: auto;
    height: 430px;
    margin: 0 auto;
    border: 1.5px #deddd9 solid;
    }
    .border1{
    font-size: 10px;
    margin: 16px 0 0 20px;
    float: left;
    }
    .border2{
    font-size: 12px;
    margin: 12px 0 0 20px;
    float: left;
    }
    .border2 span{
    color: red;
    }
    .border3{
    font-size: 12px;
    margin: 12px 16px 0 20px;
    color: red;
    float: right;
    font-weight: bold;
    }
    .border4{
    font-size: 12px;
    margin: 12px 16px 0 20px;
    float: right;
    }
</style>
</head>
<body>
    <div class="all">
    <div class="top"></div>
    <div class="title">
    <div class="content">    
    <p>近期开班</p>               
    </div>
    <div class="content1">
        <p><a href="#">18年面授开班计划</a></p>
    </div>
    </div>
    <div class="border">
    <div class="border1">
    <h3><a href="#">人工智能+Python-高薪就业班</a></h3>
    </div>
    <div class="border2">
    <p><a href="#">开班时间：<span>2018-04-26</span></a></p>
    </div>
    <div class="border3">
    <p><a href="#">预约报名</a></p>
    </div>
    <div class="border2">
    <p><a href="#">开班时间：<span>2018-03-23</span></a></p>
    </div>
    <div class="border3">
    <p><a href="#">无座，名额爆满</a></p>
    </div>
    <div class="border2">
    <p><a href="#">开班时间：2018-01-23</a></p>
    </div>
    <div class="border4">
    <p><a href="#">开班盛况</a></p>
    </div>
    <div class="border2">
    <p><a href="#">开班时间：2017-12-20</a></p>
    </div>
    <div class="border4">
    <p><a href="#">开班盛况</a></p>
    </div>
    <div class="border2">
    <p><a href="#">开班时间：2017-11-18</a></p>
    </div>
    <div class="border4">
    <p><a href="#">开班盛况</a></p>
    </div>
    
    <div class="border1">
    <h3><a href="#">Android开发+测试-高薪就业班</a></h3>
    </div>
    <div class="border2">
    <p><a href="#">开班时间：<span>2018-04-26</span></a></p>
    </div>
    <div class="border3">
    <p><a href="#">预约报名</a></p>
    </div>
    <div class="border2">
    <p><a href="#">开班时间：2018-03-23</a></p>
    </div>
    <div class="border4">
    <p><a href="#">开班盛况</a></p>
    </div>
    <div class="border2">
    <p><a href="#">开班时间：2018-01-23</a></p>
    </div>
    <div class="border4">
    <p><a href="#">开班盛况</a></p>
    </div>
    <div class="border2">
    <p><a href="#">开班时间：2017-12-20</a></p>
    </div>
    <div class="border4">
    <p><a href="#">开班盛况</a></p>
    </div>
    <div class="border1">
    <h3><a href="#">大数据软件开发-青芒工作室</a></h3>
    </div>
    <div class="border2">
    <p><a href="#">开班时间：<span>2018-04-26</span></a></p>
    </div>
    <div class="border3">
    <p><a href="#">预约报名</a></p>
    </div>
    <div class="border2">
    <p><a href="#">开班时间：2018-01-23</a></p>
    </div>
    <div class="border4">
    <p><a href="#">开班盛况</a></p>
    </div>
    </div>
    </div>
</body>
</html>