在建網站的過程當中使用背景圖片似乎是繞不過去的一個環節，背景圖的使用能更好的襯托出想要表達的內容，也可以讓局部細節達到最完美的狀態，合理使用背景能夠讓視覺感官有一個更加的舒服體驗，專業設計師會讓背景用的恰到好處，沒有目的的使用往往會適得其反，不僅達不到想要表現的效果，反而還會喧賓奪主影響主體內容的表現。

　　建網站時對于圖片的顏色也有一定的選擇技巧，鄭州建企業網站時可以選擇和主頁面相溶合的顏色，以達到視覺平滑，分享幾點背景圖片的使用方法：

　　第一種用法：幻燈圖或大banner圖

　　一個當下的網站往往離不開大尺寸的幻燈圖片或banner大圖，大圖組合創意和文字給人帶來的視覺效果是相當震撼的，再加上一般會顯示在網頁的第一屏重要程度不用言語，使用方式一般做背景來用，寬度1920px高度不超過700px，只要是新做的網站都會有這個模塊。

　　第二種用法：頁面中間固定模式

　　在這種使用方式下，大圖片一般會以全屏尺寸來設計，如1920X900px的尺寸，平鋪不重復做為網頁某一塊的背景，同時設置圖片展現行為fixed固定不動，當用戶拉動網頁下拉滾動條的時候會造成頁面內容在往上移動而背景固定不動的視頻效果。

　　第三種用法：小范圍頻道背景

　　往往使用于網頁小塊的頻道頭或分類標題下，可以是純顏色，如果想要達到很好的視覺效果就只能使用圖片，做為背景圖片時顏色往往較重，而上面的文字一般用亮色，用一個重的背景來襯托文字，視覺效果相當不錯。

　　第四種用法：局部動態效果展示

　　在這種展示效果中用到的背景圖片往往是以PNG圖片為主的透明素材，用DIV+CSS寫好布局再加CSS3的動畫特效，能給人非常強烈的視覺體驗，CSS3動畫效果的強大也是FLASH沒落的一個重要原因。

　　第五種用法：網頁精靈圖(css sprites)

　　所謂網頁精靈圖Sprites即使用一張大圖把整個或部分網頁用到的小圖都全部集中到一張圖片上，然后在網頁使用時再通過各個小圖的坐標位置來分別調用，使用負值來調用分別對應的圖片位置。

言

希望在本篇文章中介紹一下頁面Banner和文章列表的樣式開發，因為個人比較喜歡Banner，我們可以在Banner位置展示一下我們Blog的Title，可以介紹一下自己或者自己的座右銘等等。所以我們先從Banner開始著手。

步入正文，定制化Banner和文章列表主要包括如下步驟：

1. 在config.toml文件中定義title，描述等變量；
2. 為各個組件設置相應的css樣式。

相關基礎

一、讀取config.toml文件中的內容

{{ with .Site.Params.banner }}

    {{ .tagline }}

    {{ .heading }}

{{ end }}

方案

分別為banner在partials文件夾中創建banner.html文件，以及在assets/scss/Components文件夾中創建_banner.scss文件。

編輯banner.html文件：

{{ with .Site.Params.banner }}
  {{ if .enable }}
  {{ "<!-- Site Hero Start -->" | safeHTML }}
  <section class="site-hero" >
    <div class="container">
      <div class="row">
        <div class="col-lg-10 mx-auto">
          <div class="site-hero-content text-center">
            <h6>{{ .tagline }}</h6>
            <h1>
              {{ .heading }}
            </h1>
          </div>
        </div>
      </div>
    </div>
  </section>
  {{ "<!-- Site Hero End -->" | safeHTML }}
  {{ end }}
{{ end }}

編輯對應的css文件，樣式如下：

.site-hero {
  position: relative;
  height: 55vh;
  background-size: cover;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  background-color: $left-hero-color; /* 瀏覽器不支持的時候顯示 */
  background-image: repeating-linear-gradient(120deg,$left-hero-color 0%,$left-hero-color 49.9%, $right-hero-color 50%,$right-hero-color 100%);

  @include desktop {
    height: auto;
    padding: 200px 0;
  }

  @include mobile {
    padding: 100px 0;
  }

  &-content {
    
    h6{
      margin-top: 60px;
      color: $tagline-text-color;
    }
    h1 {
      color: $heading-text-color;
      margin-bottom: 0px;
      @include desktop-lg {
        font-size: 40px;
        margin-bottom: 0px;
      }
      @include mobile {
        font-size: 40px;
      }
    }   
  }

  &-scroll {
    position: absolute;
    left: 50%;
    bottom: 70px;
    transform: translateX(-55%);
  }
}

最后，在style.scss中通過@import 語句將_banner.scss 引入到項目中。

@import "components/banner";

通過../hugo.exe server --watch 啟動項目后，可以看一下導航欄的效果。

近在學習jquery，發現jquery上手比javascript容易許多，因為有著良好的文檔和幫助手冊，如果遇到一些問題可以借助文檔來解決。初步接觸學習jquery，我發現學習jquery主要是學會如何使用內置的方法。

今天就跟大家一起分享下，我用jquery寫的一個banner全屏特效切換的案例，以及制作它運用了哪些jquery內置方法。

思路：

注：這里說的是JS中的思路，至于布局的話，可以下載源碼自己研究。

第一步、讓切換按鈕動起來

上圖中有4個小切換按鈕，當鼠標每滑動到一個切換按鈕的位置，則相對應的添加一個樣式。（一個橘黃色的小圓點）

第二步、讓圖片動起來

當滑動每個相對應切換按鈕時，我們的背景圖片也需要隨著切換。

第三步、讓它自動切換

當鼠標沒有滑動到切換按鈕時，則讓它自動切換，這里需定義一個定時任務。（setInterval）

根據上圖jquery代碼中，下面總結了此次特效所用到的方法：

eq()方法;尋找當前索引

mouseover()方法；當鼠標滑動到元素上方，則發生該事件

mouseout()方法;當鼠標離開時，則發生該事件

index()方法;查找索引值

addClass()方法;添加樣式

sibling()方法;獲取當前元素的同輩其他元素

fadeIn()方法;淡入

fadeOut()方法;淡出

以及javascript中的setInterval()方法;定義一個定時任務。和clearInterval()方法;停止定時任務

本地下載

寫在最后：覺得不管做什么事情,思路非常重要，如果沒有思路就不知道如何下手。就像開發一個網站一樣，如果你不知道它的開發流程是什么？那么你肯定很迷茫，網站如何去做？第一步該怎么下手。這樣你就會認為做一個網站很難。同樣的道理：學習jquery首先我認為得明白每個方法是什么含義，只有先明白了這些方法的含義，以及怎么去使用。在項目實戰的時候你才不會迷茫。（個人經驗，不喜勿噴！）