範例2(簡):Travel

【範例結果】


【Section2】設定

P1:【body】與【#main】 設定、RWD圖片設定(Fluid image)
P2:【figure】圖說練習設定
P3:CSS3:Animation應用
P4:Video結合

 


一、【body】與【#main】 設定

/* body */
body{
    background: url(../images/bg03.png) no-repeat fixed 5% bottom,
                url(../images/bg02.png) no-repeat fixed right bottom,
                url(../images/bg01.png) fixed,
                linear-gradient(45deg,#ffddde,#ffe7c8,#e9ffdd,#fcffe4,#cffffb,#f3e4ff) fixed ;
    background-size: auto,15%,auto;
}

/* main  */
#main{
    background: #fff;
    width: 70%; min-width: 940px; margin: 0 auto;
    padding: 100px 30px 50px;
    box-shadow: -1px 0 10px #000, 1px 0 10px #000;
}

二、自應性網頁圖片設定(Fluid image)

說明連結:本網說明

(1)html加入圖片

html結構

<!--  banner區  -->
<h3>Slider(自應性網頁圖片設定Fluid image)</h3>
<img id="slider1" src="./images/slider01.jpg" width="1920" height="480" alt=""/>
<div id="slider2"></div>

CSS美化

/* #slider  【圖片縮放設定】設定  */
#slider1 {
    max-width: 100%; height: auto;
}