课程: CSS: Advanced Layouts with Grid

免费学习该课程!

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

Overview of card markup and starter styles

Overview of card markup and starter styles - CSS教程

课程: CSS: Advanced Layouts with Grid

Overview of card markup and starter styles

- [Instructor] Let's start by taking a look at the markup we're working with. Our index.html is different in this chapter than it was in the previous. So starting with our opening body tag, we see our skip link for accessibility, and then we have a header element. Beyond that, we have this div with a class of cards, and within that, we've got nine of these divs with a class of card singular, and these will be the cards that make up our grid. Within each card, we have a figure, and that's our featured image. Then we have some info and that includes a name and a title, and the same pattern follows for each of these nine individual cards. And then at the very end, we get this footer. We're not actually doing anything with the footer or even the header in this chapter. Instead, we're focusing on an overall layout for this card section, and then a layout that applies to how each single card is displayed within that. Let's take a look at this file on the browser so that you can see what…

内容