範例2-2:Travel

【範例結果】


【Section1】設定

P1:CSS3 Tools應用、CSS3 多列、內文限制字數【…】
P2:運用【Flex】特性,【#navMain】設定


一、Section1一般設定

(1) CSS3參考工具

css3maker:http://www.css3maker.com/
cssmatic:http://www.cssmatic.com/
colorzilla:www.colorzilla.com
buttongenerator:http://www.bestcssbuttongenerator.com/

/*section  第1個  h2設定*/
section:nth-of-type(1) h2 {
color: #900; font-size: 1.5em; text-align: center; line-height: 50px;
border-radius: 10px; box-shadow: 3px 3px 3px #333;
background: linear-gradient(to bottom, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
width:90%; margin:20px auto; cursor: pointer;
}

/*section  第1個  p設定*/
section:nth-of-type(1) p{
	font-size: 18px; line-height: 30px;	text-indent: 36px;	padding: 10px 20px;
}

(2) CSS3 三欄設定,【p 】段落

參考連結:【CSS3多列】、

section:nth-of-type(1) {
    column-count:3;                         /*指定元素應該被分割的列數*/
    column-gap:20px;                        /*指定列與列之間的間隙*/
    column-rule:2px solid #0277bd;          /*所有column-rule-* 屬性的簡寫*/  
}
section:nth-of-type(1) ul{
    column-span:all;                        /*指定元素要跨越多少列*/
}
section:nth-of-type(1) h2 {
    column-span:all;        /*新增項目*/
}

(3) 項目條例設定,【旅遊小叮嚀】項目設定

Html結構

<h2  id="item4">旅遊小叮嚀</h2>
    <ul>
      <li>歐洲旅遊之一般餐食安排為西式餐三道式;中式餐六菜一湯。皆不包含飲料。餐廳內免費提供之飲用水皆為自來水,其餘飲料皆須另外付費!</li>
      <li>素食:各地風俗民情不同,國外之素食習慣大多是可以食用蔥、薑、蒜、蛋、奶等,無法如國內之素食烹調標準般嚴謹。除華僑開設的中華料理餐廳外,多數僅能以蔬菜、豆腐等食材料理為主;若為飯店內用餐或一般餐廳使用自助餐,亦多數以蔬菜、漬物、水果等佐以白飯或麵食類。故,海外團體素食餐之安排,無法如同在台灣般豐富且多變化,請素食貴賓諒察!如無法接受,請勿報名此團體。如可以入境隨俗,建議自行準備符合口味及方便攜帶的副食品或點心備用,如餅乾、泡麵..等,以備不時之需。</li>
      <li> 團體旅行中安排在中國餐廳用餐時,因歐洲各大城市之中國餐廳,受限於材料來源、當地飲食民情及廚師素質,實無法與國內相比較。</li>
      <li>歐洲大多數國家人民均習慣生飲自來水,因此旅館房間少有熱水提供,若有需要,請自備變壓器及容器等或自購礦泉水飲用。 </li>
      <li>歐洲住宿飯店等級說明:國人往往習慣以星級多寡評鑑旅館等級,然而世界各國評鑑旅館標準不一,莫衷一是,實不應將不同地區之旅館,作同一標準性比較。以東南亞、北美地區地廣人稀的特性而言,較適合大型旅館發展,故旅館之豪華程度,往往令人咋舌!</li>
      <li>歐洲各國,為保護其歷史建築之原有風貌,而限制旅館經營規模,至今歐洲仍有一些飯店並未裝設冷氣空調(寒冷地區則在冬季供應暖氣空調)。</li>
      <li>飯店內不主動提供牙刷、牙膏,吹風機亦不是每家飯店都有,並另請自備拖鞋。(衛生用品如必須,可以在飯店內需求,惟需要自行支付服務小費或相關費用!) </li>
    </ul>

CSS美化

a. 內文超出時,產生【…】

參考連結:【本網】、【CSS3 text-overflow 屬性

/*section  第1個  【旅遊小叮嚀】設定*/
section:nth-of-type(1) li{
    font-size: 18px; line-height: 40px; 
    background: url(../images/icon02.png) no-repeat 5px 0;
    padding-left: 50px; 
    
    /*項目width寬度超過 800px 時,自動產生... */
    text-overflow: ellipsis;
    white-space: nowrap; overflow: hidden; width: 800px;
    
    cursor: pointer; transition: all .5s;
}
section:nth-of-type(1) li:hover{
    color: #fff; background-color: #be0243; font-style: italic;
    
    /*解除 項目width寬度超過 800px 時,自動產生...*/
    white-space: normal; width: auto; 
    
    border-radius: 10px;
}

b. 選擇器設定

  

section:nth-of-type(1) li:nth-last-child(-n+3){ 
    background-image:url(../images/icon01.png); 
}