範例2-1:Travel

【範例結果】


【Section2】設定

P1:【body】與【#main】 設定、RWD圖片設定(Fluid image)
P2:【figure】圖說練習設定


一、【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;
}

(2)CSS背景加入圖片

html結構

<div id="slider2"></div>

CSS美化

#slider2 {
    width: 100%; height: 250px;
    background: url(../images/slider03.jpg);
    background-size: cover;
}