发表于： 2017-03-12 18:46:34
4 652
上个代码：
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="cssstyle.css">
<title>jiugongge</title>
</head>
<body>
<div class="father">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="father">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="father">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
Css:
*{margin: 0; padding: 0;}/*初始化样式*/
body{height: 100vh; width: 100vw; margin: 0; padding: 0;}
.father{
overflow: hidden;
display:flex; justify-content:center;
margin: 0px auto;
}
.box{
float: left;
background-color: #FEA500;
height: 22.5vw;
width: 22.5vw;
margin: 5px;
border-radius: 12px;
}
今天尝试了flex，是的 失败告终。。
然后上面的代码大体实现了要求。。垂直居中暂未实现。
媒体自适应方面好像没有什么变化，还未理解@media screen的意义，所以还没加上去。
返回列表
评论