最近跟着某大牛学CSS3,下面是跟着大牛做的两个实例项目,不得不说CSS3真的很强大.另外最近用SAE搭建了一个网站,把最近的实例都放到了里面,等搭建好放出,这样大家就能直观的看到演示效果了

建立HTML文件

CSDN相关课程

效果如下

配置CSS3样式

body{
    margin: 0;
    padding:0;
}
/*
 绿色  #35B558
 橙色  #ff5c00
 深灰  #666666
 浅灰  #F8F8F8
 * */
h1{
    text-align: center;
    font-size: 30px;
    color: #666;
}
.responsive a{
    text-decoration: none;
    padding: 5px;
    color:  #ff5c00;
}
.responsive{
    width: 98%;
    margin: 0 auto;
    color: #000;
    border-collapse: collapse;
    border:1px solid #666666;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}
.responsive th{
    background-color: #35B558;
}
.responsive th,.responsive td{
    border: 1px solid #666666;
    padding: 10px;
}
.responsive .number,.responsive .actions{
    text-align: center;
}

效果:

响应式配置

/*响应式配置*/
@media (max-width: 480px) {
    /*去掉边框和阴影*/
    .responsive{
        border: none;
        box-shadow: none;
    }
    /*去掉表头*/
    .responsive thead{
        display: none;
    }
    /*把各项设置为块元素分布*/
    .responsive tr,.responsive td{
        display: block;
    }
    /*设置number和name距离,使用子选择器*/
    .responsive td:nth-child(1), .responsive td:nth-child(2){
        padding-left: 25%;
    }
    /*使用伪元素添加表头*/
    .responsive td:nth-child(1)::before{
        content: "课程序号";
        position: absolute;
        left: .5em;
        font-weight: bold;
    }
    .responsive td:nth-child(2)::before{
        content: "课程名称";
        position: absolute;
        left: .5em;
        font-weight: bold;
    }
    /*给表头添加框和阴影*/
    .responsive tr{
        position: relative;
        border: 1px solid #666666;
        box-shadow: 0 0 0 3px rgba(0,0,0,.4);
    }
    /*给表头部分添加背景色*/
    .responsive .number{
        text-align: left;
        background-color: #35B558;
    }
    .responsive td.actions{
        position: absolute;
        right: 0;
        top:0;
        border: none;
    }

}

响应式图片布局

这个很简单,就是不同分辨率下显示不同的图片,就直接把图片分享上来了,不写了