How to use html+css to make Nine Palace Lattice
This article mainly introduces how to use html+css to make Jiugong grid, which has a certain reference value. Interested friends can refer to it. I hope you will gain a lot after reading this article. Let's take a look at it.
Code
Nine palace grid
Request:
1: the tag cannot be modified, and the effect can only be achieved through css
2: add a green border
Ul {
Position: fixed
Top: 50%
Left: 50%
Text-align: center
Transform: translate (- 50% Murray 50%)
Overflow: hidden
List-style: none
Width: 200px
Height: 200px
Border: 10px solid green
Padding: 0px
}
Li {
Width: 33.3333333 3
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
}
one
two
three
four
five
six
seven
eight
nine
Thank you for reading this article carefully. I hope the article "how to use html+css to make Nine Palace Grid" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
