你可以在这下载基本的html css和图片素材 here.
You now need to implement your layout. The tasks you need to achieve are:
- To display the navigation items in a row, with an equal amount of space between the items.
- The navigation bar should scroll with the content and then become stuck at the top of the viewport when it reaches it.
- The image that is inside the article should have text wrapped around it.
<aside>elements should display as a two column layout. The columns should be a flexible size so that if the browser window shrinks smaller the columns become narrower.
- The photographs should display as a two column grid with a 1 pixel gap between the images.
You will not need to edit the HTML in order to achieve this layout and the techniques you should use are:
- CSS Grid Layout
There are a few ways in which you could achieve some of these tasks, and there often isn’t a single right or wrong way to do things. Try a few different approaches and see which works best. Make notes as you experiment, and you can always discuss your approach in the discussion thread for this exercise or in the #mdn IRC channel.
If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the discussion thread about this exercise, or in the #mdn IRC channel on Mozilla IRC. Try the exercise first — there is nothing to be gained by cheating!