交作業~https://jsfiddle.net/000dd/51j9Lcum/1/
交作業 https://rwd-lesson1-hw.glitch.me
當帶頭,也試著看自己理解多少~ 1. 網站上的排版會依照使用者不同的裝置或像素視窗大小,來改變各個元素的排序、 元素是否顯示、每個元素佔據的大小、字體大小、間距、行高。 2. 只有手機視窗底部會有一個fixed定位的廣告,其他2個裝置視窗底部不會顯示廣告。 電腦裝置的most-popular-feed元素右邊會有廣告,其他2個裝置不會有。 電腦header裡的導覽列nav會顯示註冊、登入、訂閱、搜尋元素,其他2個裝置會將 這4個元素移動到漢堡裡面。 平板跟電腦cover裡面會顯示平板的圖片,手機不會顯示。 平板跟電腦newsLetter-containern的四周圍都有邊框border,而手機只有頂部有。 3. 電腦的footer裡面用nav分成4排左到右排列,其他2個裝置是分成2排去排列一樣左 到右,但空間放置不下會移動到上方元素的下面去排列。 手機的secondary會將裡面所有的元素放滿版面的寬度呈現由上到下排列的方式。 手機的you-should-know跟featured-voices、topic-section、mobile-carousel、 image-carousel、videos-well會將裡面所有的元素放滿版面的寬度呈現由左到右排 列的方式,讓使用者以左右滑動方式瀏覽。
交作業~ https://jsfiddle.net/000dd/eucgv8Lq/23/
交作業~ https://jsfiddle.net/000dd/75mech84/14/
精選技術文章、免費程式設計資源、以及業界重要新聞!