一、骰子布局
实现代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
position:relative;
width:1000px;
height:1000px;
/*flex*/
display:flex;
justify-content:space-around;
align-items:center;
}
section
{
box-sizing:border-box;
border-radius:10px;
background-color:#ddd;
width:80px;
height:80px;
/*flex*/
display:flex;
}
.stone{
width:20px;
height:20px;
border-radius:50%;
background-color:#000;
}
.box >:first-child
{
justify-content:center;
align-items:center;
}
.box >:nth-child(2)
{
padding:5px;
justify-content:space-between;
}
.box >:nth-child(2) >:nth-child(2)
{
align-self:flex-end;
}
.box >:nth-child(3)
{
padding:5px;
justify-content:space-around;
}
.box >:nth-child(3) >:nth-child(2)
{
align-self:center;
}
.box >:nth-child(3) >:nth-child(3)
{
align-self:flex-end;
}
.box >:nth-child(4)
{
padding:5px;
justify-content:space-between;
flex-direction:column;
}
.box >:nth-child(4) div
{
display:flex;
justify-content:space-between;
}
.box >:nth-child(5)
{
padding:5px;
justify-content:space-around;
}
.box >:nth-child(5) > div
{
display:flex;
flex-direction:column;
justify-content:space-between;
}
.box >:nth-child(5) >:nth-child(2)
{
align-self:center;
}
.box >:last-child
{
padding:5px 6px;
justify-content:space-between;
}
.box >:last-child >div
{
display:flex;
flex-direction:column;
justify-content:space-around;
}
</style>
</head>
<body>
<div class="box">
<section>
<div class="stone"></div>
</section>
<section>
<div class="stone"></div>
<div class="stone"></div>
</section>
<section>
<div class="stone"></div>
<div class="stone"></div>
<div class="stone"></div>
</section>
<section>
<div>
<div class="stone"></div>
<div class="stone"></div>
</div>
<div>
<div class="stone"></div>
<div class="stone"></div>
</div>
</section>
<section>
<div>
<div class="stone"></div>
<div class="stone"></div>
</div>
<div class="stone"></div>
<div>
<div class="stone"></div>
<div class="stone"></div>
</div>
</section>
<section>
<div>
<div class="stone"></div>
<div class="stone"></div>
<div class="stone"></div>
</div>
<div>
<div class="stone"></div>
<div class="stone"></div>
<div class="stone"></div>
</div>
</section>
</div>
</body>
</html>
二、流式布局
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrap{
width:300px;
height:600px;
border:1px solid #000;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.wrap>div{
width:25%;
height:100px;
border:1px solid red;
background: thistle;
text-align: center;
line-height: 100px;
font-size: 50px;
}
</style>
</head>
<body>
<div class="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>
三、输入框布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header{
height: 60px;
display: flex;
}
.add{
background-color: #D8BFD8;
text-align: center;
line-height: 60px;
color: #fff;
width: 60px;
}
.sub{
width: 100px;
}
.search{
flex-grow: 1;
}
</style>
</head>
<body>
<div class="header">
<div class="add">地址</div>
<input type="text" class="search" />
<input type="button" value="提交" class="sub" />
</div>
</header>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
box-sizing: border-box;
}
.wrap{
display: flex;
}
.para{
flex-grow: 1;
background: #DDDDDD;
font-size: 20px;
font-family: 宋体;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left" >
<div class="box"></div>
<img src="img/皮卡丘.jpg" width="50" height="50"/>
</div>
<div class="para">皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡皮卡皮皮卡丘皮卡皮卡
</div>
</div>
</body>
</html>