HTML5语义元素页面轮廓

Semantic Element Document Outline 使用html5的常用标签元素构建的页面模板。

html5, tags

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

*,
*::before,
*::after {
    box-sizing: border-box;
}
body {
    font-family: 'Open Sans', sans-serif;
    margin: 2em;
    padding: 0;
    background-color: #111D4A;
    font-size: 66.5%;
}
header,
nav,
section,
article,
p,
aside,
footer,
div {
    text-align: center;
    padding: 1em;
    margin: 0.5em;
    background-color: #e4e4e4;
    border: 0.1em dashed #111D4A;
}
div.main,
div.with-aside {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    padding-top: 2em;
}
div.main::before,
div.with-aside::before {
    position: absolute;
    top: 0.5em;
    left: 0;
    width: 100%;
    content: 'flexbox div';
}
div.main .grow,
div.with-aside .grow {
    flex-grow: 1;
}
section.left {
    width: 66.6%;
}
section.right {
    width: 33.3%;
    display: flex;
    flex-flow: column nowrap;
}
@media (max-width: 768px) {
    section.main {
        flex-flow: column nowrap;
    }
    section.left,
    section.right {
        width: 100%;
    }
    div.with-aside {
        flex-flow: column nowrap;
    }
}

HTML

Semantic Element Document Outline 使用html5的常用标签元素构建的页面模板。

html5, tags

编辑器支持Emmet

快捷键

Semantic Element Document Outline 使用html5的常用标签元素构建的页面模板。

html5, tags

HTML5 P5.js 曼荼罗花的轮廓线变换动画

HTML5 CSS3 SVG团队成员介绍卡片页面模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：