第三、四個section區:設計頁籤置中並設計頁籤的樣式,留意手機版時的呈現,如何調整才理想?
第三個section區:設計內容區的寬度滿版的Banner影像,思考手機版、桌機版如何呈現才理想?
第三個section區:設計內容區的影像在大螢幕時4欄排版、在小螢幕時2欄排版。
第四個section區:設計內容區的影像依螢幕寬度調整欄數,6欄=>4樓=>3欄=>2欄排版。
CSS樣式設計
.scale_s { transform: scale(0.7); opacity: 0.2; } .scale_b { transform: scale(1.3); box-shadow: 0 0 10px 3px red; }
JS程式設計
$('#sec4 .col-6 img').hover( function(){ $('#sec4 .col-6 img').not(this).addClass('scale_s'); $(this).addClass('scale_b'); }, function(){ $('#sec4 .col-6 img').removeClass('scale_s').removeClass('scale_b'); } );