<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.box{
width: 538px;
height: 348px;
margin: 50px auto;
border: 5px solid #e0dfcc;
display: flex;
flex-wrap: wrap;
/*justify-content: space-between;*/
}
.box p{
width: 538px;
height: 49px;
background: #666666;
display: flex;
justify-content: center;
align-items: center;
}
.box ul{
width: 538px;
height: 250px;
display: flex;
}
.box li:nth-child(1){
width: 146px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
background: #77bbdd;
}
.box li:nth-child(2){
width: 282px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
background: #d6d6d6;
}
.box li:nth-child(3){
width: 110px;
height: 250px;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
background: #ff6633;
}
</style>
</head>
<body>
<div class="box">
<p>#header</p>
<ul>
<li>#left</li>
<li>#center</li>
<li>
#right<br />
margin-right:<br />
-150px;
</li>
</ul>
<p>#footer</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.box{
width: 750px;
height: 540px;
margin: 50px auto;
}
.box ul{
width: 750px;
height: 540px;
margin: 50px auto;
background: yellowgreen;
display: flex;
flex-wrap: wrap;
/*align-content: space-between;*/
align-items: center;
}
.box li{
width: 186px;
height: 178px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.box li img{
display: block;
margin: 7px 0 24px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<img src="img/图层-2.png"/>
1
</li>
<li>
<img src="img/图层-3.png"/>
2
</li>
<li>
<img src="img/图层-4.png"/>
3
</li>
<li>
<img src="img/图层-5.png"/>
4
</li>
<li>
<img src="img/图层-2.png"/>
1
</li>
<li>
<img src="img/图层-3.png"/>
2
</li>
<li>
<img src="img/图层-4.png"/>
3
</li>
<li>
<img src="img/图层-5.png"/>
4
</li><li>
<img src="img/图层-2.png"/>
1
</li>
<li>
<img src="img/图层-3.png"/>
2
</li>
<li>
<img src="img/图层-4.png"/>
3
</li>
<li>
<img src="img/图层-5.png"/>
4
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 720px;
height: 97px;
border-bottom: 1px solid red;
margin: 50px auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 34px 0 32px;
box-sizing: border-box;
}
.box i{
display:block;
width: 32px;
height: 32px;
/*border-bottom: 1px solid red;*/
}
.box i:nth-child(1){
width: 40px;
}
.box form{
width: 536px;
height: 56px;
border-radius: 5px;
position: relative;
}
img{
width: 36px;
height: 36px;
}
.q1{
position: absolute;
left: 5px;
top: 16px;
}
.box input{
width: 536px;
height: 56px;
background: none;
text-indent: 59px;
}
/*弹性盒实现元素水平垂直居中*/
.w1{
width: 500px;
height: 500px;
border: 1px solid #000;
margin: 50px auto;
display: flex;
/*水平垂直居中,方法二*/
justify-content: center;
align-items: center;
}
.w1 div{
width: 200px;
height: 200px;
background: yellowgreen;
/*水平垂直居中,方法一*/
/*margin: auto;*/
}
</style>
</head>
<body>
<div class="box">
<i><img src="img/图层-2.png"/></i>
<form action="">
<img class="q1" src="img/图层-5.png"/>
<input type="text" value="aaaaaaa"/>
</form>
<i><img src="img/图层-4.png"/></i>
</div>
<div class="w1">
<div></div>
</div>
</body>
</html>
