在建网站的过程当中使用背景图片似乎是绕不过去的一个环节，背景图的使用能更好的衬托出想要表达的内容，也可以让局部细节达到最完美的状态，合理使用背景能够让视觉感官有一个更加的舒服体验，专业设计师会让背景用的恰到好处，没有目的的使用往往会适得其反，不仅达不到想要表现的效果，反而还会喧宾夺主影响主体内容的表现。

　　建网站时对于图片的颜色也有一定的选择技巧，郑州建企业网站时可以选择和主页面相溶合的颜色，以达到视觉平滑，分享几点背景图片的使用方法：

　　第一种用法：幻灯图或大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首先我认为得明白每个方法是什么含义，只有先明白了这些方法的含义，以及怎么去使用。在项目实战的时候你才不会迷茫。（个人经验，不喜勿喷！）