Recap from last class (02/20) - HackMD

Recap from last class (02/20)

In-Class Practice 01

Draw 4 boxes with (w,h) = (150px, 100px), put them in a row separeted with 20px. Color them "orange".
- How to draw a "box" HTML? Using "div", "span"?

Let's beautify the boxes by making them 立體感

Making a "round border"
Add "blurred shadow"

Let's make some "animation"

First, let's align boxes horizontally on the center of the browser window
When mourse hover, make the box "pop-up", while others remain intact
Please check: when browser window is resized, the last box(es) is(are) "wrapped" to the next line!

Let's improve the user experience!

When window gets smaller, the boxes should get smaller accordingly. (note: use "@media" queries)
The boxes should remain in a line. However, when the window gets too small, the boxes should alter to align vertically.

End

Recap from last class (02/20)

{"metaMigratedAt":"2023-06-14T20:19:42.073Z","metaMigratedFrom":"YAML","title":"Recap from last class (02/20)","breaks":true,"slideOptions":"{\"theme\":\"league\",\"transition\":\"fade\",\"slidenumber\":true}","contributors":"[{\"id\":\"a202b02b-072b-4474-be14-c5a3f8932dbb\",\"add\":86,\"del\":1},{\"id\":\"752a44cb-2596-4186-8de2-038ab32eec6b\",\"add\":1404,\"del\":257}]"}

changed 6 years ago 967 views
owned this note