響應式網頁前端設計

第一階段
加強熟識HTML&CSS

第二階段
學習JavaScript&jQuery

第三階段
Bootstrap協助專案設計

第四階段
w3.css協助專案設計

第五階段
自行開發網站專案設計

第六階段
Pug(Jade)&Sass協助開發效率

=== TSuiling write 2018.07 ===

響應式網頁前端設計【第三階段】Bootstrap協助專案設計

影像排版與特效

調整第三、四個section區 CSS 樣式

第三個section區:設計頁籤置中並設計頁籤的樣式,留意手機版時的呈現。

第三個section區:設計內容區的寬度滿版的Banner影像。

第三個section區:設計內容區的影像在大螢幕時4欄排版、在小螢幕時2欄排版。

第四個section區:設計內容區的影像依螢幕寬度調整欄數,6欄=>4樓=>3欄=>2欄排版。

設計第四個section區中的影像:滑鼠滑入的影像放大加光暈,而其餘的影像則縮小淡化

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');
  }
);