最近在菜鸟教程网站发现几个CSS属性很有用,就做了下面一个简单的布局模板以备不时之需。另外,强烈推荐菜鸟教程这个学习平台,教程很全面,也很详细。地址:https://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一个简单布局实例
发布评论