背景:每日一练:绘制九宫格
要求:九宫格垂直居中于页面,只能使用ul和li标签,添加背景边框
代码
<!DOCTYPE html>
<html>
<body>
<h1>九宫格</h1>
<p>要求:</p>
<p>1:不能修改标签，仅通过 css 实现效果</p>
<p>2:添加绿色的边框</p>
<style type="text/css">
ul{
position: fixed;
top: 50%;
left: 50%;
text-align: center;
transform: translate(-50%,-50%);
overflow: hidden;
list-style: none;
width: 200px;
height: 200px;
border: 10px solid green;
padding: 0px;
}
li{
width: 33.3333333%;
height: 33.333333%;
float: left;
background: pink;
color: white;
border: 2px solid white;
flex-wrap: nowrap;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
</html>
效果图:
有很多种方法可以实现,我用的是伸缩盒,本来不想用的,但是文字的上下居中没有固定的高度只有百分比实在没想到方法居中.最后才加了伸缩盒.以后有时间要多尝试别的方法.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。