link: https://imanas.shanghai.nyu.edu/~qc532/week02/
screenshot of the webpage:
Firstly I started working on the styling of the content boxes using the flexible box. I spent some time figuring out the difference between different flex-direction and finally, I chose “flex-flow” to set the style as row&wrap.
I encountered some problems when I tried to modify the style of the hyperlinks. At first I didn’t see any changes in the color of the pages then it turned out to be that it’s because I didn’t write a:link first. (lesson: a:hover must comes after a:link and a:visited)
When trying to style the footer, I firstly used justify-content and align-content but neither of them work and I can’t make the footer on the bottom of the page. My final solution is to use the absolute position and the distance from the bottom. To make it lie in the middle I used left:40%. (Maybe there is other better solution)
The most difficult part is to set the navigation and content at the same horizontal level. (The size of the browser will also affect the view) At first I tried justify-content and align but none of these style functions works. After several tries, the method I found is to change the width of the navigation and content box and use the float.