Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.