室內設計1:廣告輪播

【#slider】廣告輪播

範例結果

一、各頁滿版設定

S1:畫面準備

  <header>
    <h1 id="logo"><img src="./images/logo.png" width="30" height="60" alt=""/>Interior Design</h1>
    <nav>
      <div data-file="page1">Living room</div>
      <div data-file="page2">Bedroom</div>
      <div data-file="page3">Service</div>
      <div data-file="page4">Contact</div>
    </nav>
  </header>
  <!-- id="slider" 開始 -->


  <!-- id="slider" 結束 -->
  <section>section1(p1)</section>
  <section>section2(p2)</section>
  <section>section3(p3)</section>
  <section>section4(p4)</section>

 

* { padding: 0; margin: 0; }
ul, ol, li { list-style: none; }
a { text-decoration: none; }
body {
  font-family: Verdana, "Microsoft JhengHei", "sans-serif";
  font-size: 16px;  background: #eeeeee; 
  min-width: 1000px; position: relative;
  } 
header {
  height: 80px;
  background: #f8bfbf;
  position: relative;
}

#logo {
  position: absolute; top: 10px; left: 30px;
  font-size: 1.5em;
  height: 60px;
}
#logo img {
  vertical-align: middle;  margin-right: 10px;
}
nav {
  position: absolute; right: 10px; top: 10px;
}
nav div {
  padding: 10px;  line-height: 30px;
  margin: 0 10px;  color: #000;
  display: inline-block;
  position: relative; cursor: pointer;  /* 目的為加底線的定位 */
}
nav div:after{
  content: ''; transition: all .2s; transform: scaleX(0);
  position: absolute; bottom: 0; left: 0;
  border-bottom:  3px solid #000; width: 100%;
}
nav div:hover:after{
  transform: scaleX(1);
}
* { padding: 0; margin: 0; }
ul, ol, li { list-style: none; }
a { text-decoration: none; }
body {
  font-family: Verdana, "Microsoft JhengHei", "sans-serif";
  font-size: 16px;  background: #eeeeee;  min-width: 800px; }
header {
  height: 80px;  min-width: 1000px;
  background: #f8bfbf;
  position: relative;
}
#logo {
  position: absolute; top: 10px; left: 30px;
  font-size: 1.5em;
  height: 60px;
}
#logo img {
  vertical-align: middle;  margin-right: 10px;
}
nav {
  position: absolute; right: 10px; top: 10px;
}
nav div {
  padding: 10px;  line-height: 30px;
  margin: 0 10px;  color: #000;
  display: inline-block;
  position: relative; cursor: pointer;  /* 目的為加底線的定位 */
}
nav div:after{
  content: ''; transition: all .2s; transform: scaleX(0);
  position: absolute; bottom: 0; left: 0;
  border-bottom:  3px solid #000; width: 100%;
}
nav div:hover:after{
  transform: scaleX(1);
}
/* section =========================================== */



/* #slider =========================================== */



/*.gotop ===============================================*/



/*.ADmenu===============================================*/


 

S2:讓各section 與視窗滿版,並利用JQ各頁加入背景色彩

/* section =========================================== */
section{
  min-height: 100vh;
}

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  //S1:section 背景色彩
    var $secBg =  ['#b2ebf2','#fce4ec','#ffecb3','#ffffff'];
    $('section').each(function(i){
      $(this).css('backgroundColor',$secBg[i]);
    });