本文主要是介绍CSS小项目九宫格，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!DOCTYPE html>
<!-- 九宫格 -->
<html><style>ul {position: fixed;/* 相对页面的位置固定 */top: 50%;left: 50%;text-align: center;/* 居中 */transform: translate(-50%,-50%);overflow: hidden;/*溢出元素内容区的内容，会被修剪，并且其余内容是不可见的*/list-style: none; /*去掉列表前方的点 */width: 200px;height: 200px;border: 2px solid rgb(126, 148, 26);padding: 0px;/*内边距*/}li {width: 33.3333333%;height: 33.333333%;float: left;background: rgb(196, 192, 255);color: white;border: 1px solid white;flex-wrap: nowrap;box-sizing: border-box;/*将 box-sizing 设置为 "border-box*，并排放置带边框的框*/display: flex;/*弹性布局*/align-items: center; /*flex容器属性*/justify-content: center;/*flex容器属性*/}</style><body><div><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> </div></body>
</html>这篇关于CSS小项目九宫格的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
