绘制九宫格
要求:九宫格垂直居中于页面,只能使用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>
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）
效果图:
有很多种方法可以实现,我用的是伸缩盒,本来不想用的,但是文字的上下居中没有固定的高度只有百分比实在没想到方法居中.最后才加了伸缩盒.以后有时间要多尝试别的方法.
网友评论