CSS一个简单布局实例

百科大全

更新时间：2025-10-05 19:28:5030

admin管理员组
文章数量:1794759

CSS一个简单布局实例

最近在菜鸟教程网站发现几个CSS属性很有用，就做了下面一个简单的布局模板以备不时之需。另外，强烈推荐菜鸟教程这个学习平台，教程很全面，也很详细。地址：www.runoob/

以上布局是没有滚动条的，如果给用于布局的div加上边框，可能就会出现边框了！主要用到了align-center（垂直方向布局）与justify-align（水平方向布局）源码：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>管理系统模板-登录</title> <style> html,body{ height: 100%; margin: 0px; } body{ background: #eee; } .ver-center{ display: flex; flex-flow: row wrap; align-content: center; } .hor-center{ justify-content: center; } .main { height: 100%; border: 0px solid black; align-content: space-between; } .top { width: 100%; height: 19%; border: 0px solid red; } .middle { width: 100%; height: 65%; border: 0px solid blue; /* 水平分布 */ display: flex; align-items: stretch; } .bottom { width: 100%; height: 12%; border: 0px solid yellow; } .middle .left { width: 25%; border: 1px solid gray; } .middle .center { width: 50%; border: 1px solid #ff6600; } .middle .right { width: 25%; border: 1px solid gray; } .head,.end{ width: 70%; height: 50px; border: 1px solid #f09298; text-align: center; } .container { width: 50%; height: 50%; border: 1px solid red; } .container input{ width: 70%; height: 20px; } .container .inputItem{ width: 100%; height: 30px; border: 1px solid #666; /* line-height: 32px; */ } .container .inputItem label{ display: inline-block; width: 90px; height: 100%; text-align: right; } .container .btnGroup{ border: 1px solid #666; width: 100%; height: 30px; } </style> </head> <body> <div class="main"> <div class="top">上</div> <div class="middle"> <div class="left">左</div> <div class="center ver-center hor-center"> <div class="head ver-center hor-center">logo System</div> <div class="container ver-center"> <div class="inputItem"> <label>username：</label> <input type="text" /> </div> <div class="inputItem"> <label>password：</label> <input type="password" /> </div> <div class="btnGroup ver-center hor-center"> <button>login</button> <button>regist</button> </div> </div> <div class="end ver-center hor-center"> <a href="javascript:void(0);">download</a>  |  <a href="javascript:void(0);">baidu</a>  |  <a href="javascript:void(0);">news</a> </div> </div> <div class="right">右</div> </div> <div class="bottom">下</div> </div> </body> </html>

本文标签：布局实例简单 css

版权声明：本文标题：CSS一个简单布局实例内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686968947a123623.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。