虽然这个问题太宽泛,但我也是一个后台人员,在着陆前温还没有通过很多想法,所以我决定发布一个答案,并分享我的经验。
我的目的是展示代码是多么简单,多么少,一个人可以创建一些可重用和易于维护的东西。
不要将样式从JSON转换为HTML,而是使用CSS,这里有几个示例,介绍如何使用一个小的样式指南管理多个模板,并获得其中一个最好的特性,即性能。
有了一个CSS,使用flexbox制作,以及为不同模板提供的逻辑,它可能看起来像这样。
示例1(带CSS注释)
html, body, .container {
height: 100%;
margin: 0;
}
.container, main {
display: flex; /* make children flex items */
flex-direction: column; /* default flow is row */
}
header, footer { /* flex column item will by default fill parent's width */
/* height is controlled by content */
}
.wrapper {
flex: 1; /* fill remaining height (flex column item) */
display: flex;
}
aside { /* flex row item will by default fill parent's height */
flex-basis: 20%; /* set width (flex column item) */
}
main {
flex: 1; /* fill remaining width (flex row item) */
}
section {
flex-basis: 60%; /* set height (flex column item) */
}
section + section { /* target the 2nd section */
flex-basis: 40%;
}
/* for demo purpose */
header, footer, aside, section {
border: 1px dotted gray;
}
<div class="container">
<header>Header</header>
<div class="wrapper">
<aside>Aside</aside>
<main>
<section>Section</section>
<section>Section</section>
</main>
</div>
<footer>Footer</footer>
</div>
样品2
html, body, .container {
height: 100%;
margin: 0;
}
.container, main {
display: flex;
flex-direction: column;
}
header, footer {
}
.wrapper {
flex: 1;
display: flex;
}
aside {
flex-basis: 20%;
}
main {
flex: 1;
}
section {
flex-basis: 60%;
}
section + section {
flex-basis: 40%;
}
header, footer, aside, section {
border: 1px dotted gray;
}
<div class="container">
<header>Header</header>
<div class="wrapper">
<aside>Aside</aside>
<main>
<section>Section</section>
<section>Section</section>
</main>
<aside>Aside</aside>
</div>
<footer>Footer</footer>
</div>
样品3
HTML,正文,.container{
身高:100%;
保证金:0;
}
.容器,主{
显示:Flex;
弯曲方向:立柱;
}
页眉、页脚{
}
包装器{
Flex:1;
显示:Flex;
}
旁侧{
弹性基础:20%;
}
主{
Flex:1;
}
节{
弹性基础:60%;
}
截面+截面{
弹性基础:40%;
}
页眉、页脚、侧边、节{
边框:1px点灰色;
}
<div class="container">
<header>Header</header>
<main>
<section>Section</section>
<section>Section</section>
</main>
<footer>Footer</footer>
</div>
或者对于给定的模板,使用不同的CSS(此处仅显示1和3,因为2与上述相同)
样品1
html, body, .container {
height: 100%;
margin: 0;
}
.container, main {
display: flex;
flex-direction: column;
}
header, footer {
}
.wrapper {
flex: 1;
display: flex;
}
aside {
flex-basis: 20%;
}
main + aside { /* target the 2nd/right aside */
display: none;
}
main {
flex: 1;
}
section {
flex-basis: 60%;
}
section + section {
flex-basis: 40%;
}
/* for demo purpose */
header, footer, aside, section {
border: 1px dotted gray;
}
<div class=“container”>
<header>标题</header>
<DIV class=“wrapper”>
<靠边>靠边</靠边>
主& GT;
<section>节</section>
<section>节</section>
&;
<靠边>靠边</靠边>
&L/DIV & GT;
<footer>页脚</footer>
&L/DIV & GT;
样品3
html, body, .container {
height: 100%;
margin: 0;
}
.container, main {
display: flex;
flex-direction: column;
}
header, footer {
}
.wrapper {
flex: 1;
display: flex;
}
aside {
display: none;
}
main {
flex: 1;
}
section {
flex-basis: 60%;
}
section + section {
flex-basis: 40%;
}
/* for demo purpose */
header, footer, aside, section {
border: 1px dotted gray;
}
<div class=“container”>
<header>标题</header>
<DIV class=“wrapper”>
<靠边>靠边</靠边>
主& GT;
<section>节</section>
<section>节</section>
&;
<靠边>靠边</靠边>
&L/DIV & GT;
<footer>页脚</footer>
&L/DIV & GT;
