公共样式部分代码：
（推荐教程：CSS教程）
html * { margin: 0; padding: 0; } .layout { margin-bottom: 20px; } .layout article { width: 100%; } .layout article > div { min-height: 100px; } .layout article .left { width: 300px; background: red; } .layout article .center { background: orange; } .layout article .right { width: 300px; background: blue; }
float布局
.layout.float .left { float: left; } .layout.float .right { float: right; } 这是float布局
这是一段文字
Kuwebs企业网站管理系统3.1.5 UTF8查看详情酷纬企业网站管理系统Kuwebs是酷纬信息开发的为企业网站提供解决方案而开发的营销型网站系统。在线留言模块、常见问题模块、友情链接模块。前台采用DIV+CSS，遵循SEO标准。 1.支持中文、英文两种版本，后台可以在不同的环境下编辑中英文。 3.程序和界面分离，提供通用的PHP标准语法字段供前台调用，可以为不同的页面设置不同的风格。 5.支持google地图生成、自定义标题、自定义关键词、自定义描
立即学习“前端免费学习笔记（深入）”；
这是一段文字
立即学习“前端免费学习笔记（深入）”；
absolute布局
.layout.absolute .left-center-right > div { position: absolute; } .layout.absolute .left { left: 0; } .layout.absolute .center { left: 300px; right: 300px; } .layout.absolute .right { right: 0; }
flex布局
.layout.flex { margin-top: 140px; } .layout.flex .left-center-right{ display: flex; } .layout.flex .center { flex: 1; }
table布局
.layout.table .left-center-right { display: table; height: 100px; } .layout.table .left-center-right > div{ display: table-cell; }
grid布局
.layout.grid .left-center-right { display: grid; grid-template-columns: 300px auto 300px; }
以上就是css中的五种常见页面布局的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1615708.html
微信扫一扫 
支付宝扫一扫 
