课程: CSS: Advanced Layouts with Grid
免费学习该课程!
今天就开通帐号,24,700 门业界名师课程任您挑!
Overview of card markup
- [Instructor] We're starting at a fairly similar point as the previous chapter in terms of our index.html. After this opening body tag, we've got our skip link for accessibility, followed by our header. One difference from the previous chapter is that I've wrapped the cards in a div with this class of site, I've used that to set a max container width for the content, as well as add a little margin to the top and bottom of this container. And from here it should look familiar. We've got a div with a class of cards, plural, and then we go into each of our individual cards. Now for these, I've reduced the total number of cards to six. So for each of these individual cards with the class of card, we've got the featured image with an image, and then from there a div with a class of info. And inside of that we've got the name and title. This time we've just added a third paragraph with a class of description. With those exceptions, the remainder of the markup is what you've already seen…
内容
-
-
-
-
-
-
-
-
(已锁定)
What you're creating: A variable card layout1 分钟 1 秒
-
(已锁定)
Overview of card markup3 分钟 8 秒
-
(已锁定)
Define the main grid4 分钟 37 秒
-
(已锁定)
Place cards on the grid4 分钟 3 秒
-
(已锁定)
Create grid for each card5 分钟 3 秒
-
(已锁定)
Position items within the card grid3 分钟 51 秒
-
(已锁定)
Make sure it's responsive3 分钟 22 秒
-
(已锁定)
-
-