CSS布局(Layout)易于设计。无涯教程可以使用CSS布局来设计网页,例如主页,与关于我们,联系我们等。
有3种设计网页布局的方法:
CSS布局可以包含页眉,页脚,左窗格,右窗格和正文部分。一起看一个CSS布局的简单示例。
<!DOCTYPE html> <html> <head> <style> .header{margin:-8px -8px 0px;background-image:linear-gradient(145deg,#7379ff,#b524ef);color:white;text-align:center;padding:10px;} .container{width:100%} .left{width:15%;float:left;} .body{width:65%;float:left;background-color:pink;padding:5px;} .right{width:15%;float:left;} .footer{margin:-8px;clear:both;background-image:linear-gradient(145deg,#7379ff,#b524ef);color:white;text-align:center;padding:10px;} </style> </head> <body> <div class="header"><h2>Learnfk</h2></div> <div class="container"> <div class="left"> <p>左页</p> </div> <div class="body"> <h1>Body Page</h1> <p>页面内容在这里</p><p>页面内容在这里</p><p>页面内容在这里</p> <p>页面内容在这里</p><p>页面内容在这里</p><p>页面内容在这里</p> <p>页面内容在这里</p><p>页面内容在这里</p><p>页面内容在这里</p> <p>页面内容在这里</p><p>页面内容在这里</p><p>页面内容在这里</p> <p>页面内容在这里</p> </div> <div class="right"> <p>右页</p> </div> </div> <div class="footer"> <p>页脚</p> </div> </body> </html>
输出:
左页
页面内容在这里
页面内容在这里
页面内容在这里
页面内容在这里
页面内容在这里
页面内容在这里
页面内容在这里
页面内容在这里
页面内容在这里
页面内容在这里
页面内容在这里
页面内容在这里
页面内容在这里
右页
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)
Spring Boot与Kubernetes云原生微服务实践 -〔杨波〕
Spring Cloud 微服务项目实战 -〔姚秋辰(姚半仙)〕