响应式网站框架案例

响应式网站框架搭建案例

css3, template, responsive

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3320
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    padding: 0;
    margin: 0;
}
.hd {
    margin: 0 auto;
    background: #ccc;
    margin-bottom: 10px;
}
.hd:after {
    content: "";
    display: block;
    clear: both;
}
.hd .logo {
    width: 20%;
    height: 100px;
    background: #066;
    float: left;
}
.hd .nav {
    width: 70%;
    height: 100px;
    background: #6C0;
    float: right;
}
.banner {
    width: 100%;
    height: 400px;
    background: #CC0;
    margin-bottom: 10px;
}
.pro {
    width: 1000px;
    margin: 0 auto;
    background: #ccc;
    margin-bottom: 10px;
}
.pro:after {
    content: "";
    display: block;
    clear: both;
}
.pro .box {
    height: 200px;
    background: #033;
    float: left;
}
.news {
    width: 1000px;
    margin: 0 auto;
    background: #CF6;
    margin-bottom: 10px;
}
.news:after {
    content: "";
    display: block;
    clear: both;
}
.news .video {
    width: 495px;
    height: 300px;
    background: #069;
    float: left;
}
.news .list {
    width: 495px;
    height: 300px;
    background: #F60;
    float: right;
}
.ft {
    width: 100%;
    height: 100px;
    background: #333;
}
@media (max-width: 767px) {
    .hd {
        width: 100%;
    }
    .pro {
        width: 100%;
    }
    .pro .box {
        width: 49%;
        margin: 5px 0.5%
    }
    .news {
        width: 100%;
    }
    .news .video {
        width: 100%;
    }
    .news .list {
        width: 100%;
    }
}
@media (min-width: 768px) {
    .hd {
        width: 100%;
    }
    .pro {
        width: 80%;
    }
    .pro .box {
        width: 49%;
        margin: 5px 0.5%
    }
    .news {
        width: 100%;
    }
    .news .video {
        width: 49.5%;
    }
    .news .list {
        width: 49.5%;
    }
}
@media (min-width: 1000px) {
    .hd {
        width: 1000px;
    }
    .pro {
        width: 1000px;
    }
    .pro .box {
        width: 240px;
        margin: 0 5px;
    }
    .news {
        width: 1000px;
    }
    .news .video {
        width: 495px;
    }
    .news .list {
        width: 495px;
    }
}

HTML

响应式网站框架搭建案例

css3, template, responsive

编辑器支持Emmet

快捷键

响应式网站框架搭建案例

css3, template, responsive

使用css flexbox（弹性框）实现的响应式布局网站模板

使用aos.js、css弹性框和网格布局实现的一款毛纺织品在线营销页面（响应式设计）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：