课程: Level Up: CSS Layout

免费学习该课程！

今天就开通帐号，24,700 门业界名师课程任您挑！

Full-page and two-way split

Full-page and two-way split - CSS教程

课程: Level Up: CSS Layout

开始一个月试用 购买团队方案

Full-page and two-way split

“

(video game beeping) (cheerful video game music) - [Instructor] New CSS units and modules have opened up some previously unavailable and nearly impossible layout opportunities. In this challenge, you'll explore one of them, the full-page two-way split. Here, two items, in this case an image and a heading and some text appears side by side in a layout taking up the full width and height of the viewport. They also split down the middle, much like when you open a book. Your challenge is to turn this vertical stack, which honestly looks like a bit of a mess, into this beautiful side-by-side, full-page layout. For the layout to work, the image needs to be automatically cropped and stretch to fill the available space, and the layout must be responsive. You can choose to add an optional media query here for layout changes in your solution, but it's not part of the challenge. To test, change the viewport width to ensure the…

内容