[講義] OnePage網頁實作解析(二） (no replies)

1. 相片分類與燈箱效果

html


• Show All
• We Design
• Printing
• We Development
• SEO Optimization


 Eligendi optio cumque

webdesign為分類。
col-sm-4為分欄大小，目前為三欄。
準備兩張照片，一為顯示大小550x480，一為燈箱照片大小820x620。
class="img-responsive" 響應式圖片，圖片會隨著螢幕大小縮放。


style.css
Ctrl+F 搜尋 Grid 或 workArea 
 

#workArea ul#Grid li a {
 display: block; color: #fff; background: #E67E22; font-weight: 700; text-transform: uppercase; 
} #workArea ul#Grid li a:hover img { opacity: 0.2;
 }
圖片設定連結後之底色設定：background: #E67E22;
圖片設定連結後，滑鼠移過後所顯示之底色透明度設定： opacity: 0.2;

---

prettyPhoto-jCarousel和lightbox的混合應用套件

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#!prettyPhoto

jCarousel網站圖片展示

https://sorgalla.com/jcarousel/

https://www.tellustek.com/web-design/163-jquery-slide-jcarousel
lightbox燈箱效果

http://lokeshdhakar.com/projects/lightbox2/

---

2. 地圖設定

https://www.google.com.tw/maps/@24.2201031,120.9558744,10z?hl=zh-TW

html


 <div style="margin-top:-30px;"> <iframe class="gmap rs-article-iframe-src do-lazy" style="width:100%; height:500px; margin:0px; border:0px;" width="600" height="450" frameborder="0" allowfullscreen data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3618.367960538061!2d121.05275031483811!3d24.919531849024906!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3468303d0cc14615%3A0x63a5462452de09bb!2z5Lit5ZyL56eR5oqA5aSn5a24!5e0!3m2!1szh-TW!2stw!4v1524065033383" data-srcset=""> </iframe> <br> 地圖區域高度設為500px，寬度100%</div>