您可以在 github 仓库中找到这篇文章中的所有代码。
您可以在这里查看视觉效果：
有趣的css倾斜3dmax界面布局特效
有趣的css倾斜3dmax界面布局特效
50 查看详情 固定导航 – 布局 – codesandbox两列 – 布局 – codesandbox三列 – 布局 – codesandbox圣杯 – 布局 – codesandbox
通过 css 实现通用布局
固定导航布局
fixed navigation test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
nav { position: fixed; top: 0; z-index: 1000; width: 100%;}
两列布局
two columns layout <!----> <!--left side
right side
--> <!--left side
right side
--> <!--left side
right side
--> <!--left side
right side
-->left side
right side
left side
right side
.float-container .left { width: 200px; float: left; background-color: tomato;}.float-container .right { margin-left: 200px; background-color: aqua;}.absolute-container { position: relative;}.absolute-container .left { width: 200px; position: absolute; top: 0; left: 0; background-color: tomato;}.absolute-container .right { margin-left: 200px; background-color: aqua;}.bfc-container .left { width: 200px; float: left; background-color: tomato;}.bfc-container .right { overflow: hidden; background-color: aqua;}.flex-container { display: flex;}.flex-container .left { width: 200px; background-color: tomato;}.flex-container .right { flex: 1; background-color: aqua;}.grid-container { display: grid; grid-template-columns: 200px 1fr;}.grid-container .left { background-color: tomato;}.grid-container .right { background-color: aqua;}.table-container { display: table;}.table-container .left { display: table-cell; background-color: tomato;}.table-container .right { display: table-cell; background-color: aqua;}
三列布局
three columns layout leftmiddlerightleftmiddlerightleftmiddlerightleftmiddleright
.flex-container { display: flex;}.flex-container .left { width: 200px; background-color: tomato;}.flex-container .middle { flex: 1; background-color: blanchedalmond;}.flex-container .right { width: 200px; background-color: aqua;}.grid-container { display: grid; grid-template-columns: 200px 1fr 200px;}.grid-container .left { background-color: tomato;}.grid-container .middle { background-color: blanchedalmond;}.grid-container .right { background-color: aqua;}.absolute-container { position: relative;}.absolute-container .left,.absolute-container .right { position: absolute; width: 200px; top: 0;}.absolute-container .left { left: 0; background-color: tomato;}.absolute-container .right { right: 0; background-color: aqua;}.absolute-container .middle { margin-left: 200px; margin-right: 200px; background-color: blanchedalmond;}.float-container .left { width: 200px; float: left; background-color: tomato;}.float-container .right { width: 200px; float: right; background-color: aqua;}.float-container .middle { margin-left: 200px; margin-right: 200px; background-color: blanchedalmond;}
圣杯
holy grail header main
body { min-height: 100vh;}#root { display: flex; flex-direction: column; min-height: 100vh;}header,nav,main,aside,footer { text-align: center; padding: 12px;}header { height: 60px; background-color: tomato;}.columns { display: flex; flex-grow: 1;}nav { flex-shrink: 0; width: 100px; background-color: coral;}main { flex-grow: 1; background-color: moccasin;}aside { flex-shrink: 0; width: 100px; background-color: sandybrown;}footer { height: 100px; background-color: slategray;}
参考
圣杯（网页设计）- wikipedia.org圣杯布局 – web.dev
以上就是布局 – CSS 挑战的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1160234.html
微信扫一扫 
支付宝扫一扫 
