课程: CSS: Advanced Layouts with Grid

免费学习该课程!

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

Overview of card markup

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…

内容