课程: CSS: Advanced Layouts with Grid
免费学习该课程!
今天就开通帐号,24,700 门业界名师课程任您挑!
Overview of the starting point
- [Instructor] Over in Codespaces, you'll find the exercise files for this movie. You'll see the base HTML document that we're using along with the styles for our three-column layout. Now, if you were to open this up in the browser, all you'll see right now is the single-column layout. There's no grid in place yet, and this is just the baseline styles from mobile, but we're looking at it in a wider screen. All I've done on this div with the class of site is to set a maximum width. And when we scroll down, we're just seeing all of these elements stacked one on top of the other in this native flow layout. This is easy to read and great for mobile, but it's not the three-column layout that we want for bigger screens. Before we dive in, let's take a quick look at our HTML to understand the structure. First, we're referencing this base stylesheet that I've used for this entire course. It's got some basic typography styles and also styles for my skip links, which we'll get to shortly. Next,…
内容
-
-
-
-
-
(已锁定)
What you're creating: A multi-column layout36 秒
-
(已锁定)
Overview of the starting point3 分钟 13 秒
-
(已锁定)
Create the main grid4 分钟 5 秒
-
(已锁定)
Manual grid item placement4 分钟 21 秒
-
(已锁定)
Add third column for wider viewports4 分钟 26 秒
-
(已锁定)
Justify the grid2 分钟 43 秒
-
(已锁定)
Bonus: Refactor using grid areas4 分钟 44 秒
-
(已锁定)
-
-
-
-
-