Để tạo một màn hình chia nhỏ với CSS, mã như sau -
Ví dụ
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: Arial; color: white; } h1{ padding:20px; } .left,.right { height: 100%; width: 50%; position: fixed; z-index: 1; top: 0; overflow-x: hidden; padding-top: 20px; } .left { left: 0; background-color: rgb(36, 0, 95); } .right { right: 0; background-color: rgb(56, 1, 44); } .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .centered img { width: 150px; border-radius: 50%; } </style> </head> <body> <div class="left"> <h1>Some random text on the left</h1> </div> <div class="right"> <h1>Some random text on the right</h1> </div> </body> </html>
Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -