Ref : http://www.bigdome.com.tw/web/product/product_in.jsp?dm_id=DM1449046356283&pd_id=PD1449047066712
身為一個專業的死工程師....
當然要檢視一下這個網站
首先先來看華華要看的特效...帳篷會變色....
點選不同的顏色後...他就會改變 img src...
例如: 藍色
<img src="/uploads/color/tw/product_a01_06.png" height="386" width="518">
黑色
<img src="/uploads/color/tw/product_a01_09.png" height="386" width="518">
看起來他是預先拍了很多組的照片...然後抽換不同的照片來達到這個效果...
接下來看 點選不同顏色的部分
這邊的html5 的代碼如下:
<option>請選擇顏色</option> <select name="requires" id="requires" onclick="javascript:selectedoff();">
<option value="DM1447213126066">白</option>
<option value="DM1447213154319">紅</option>
<option value="DM1447213158827">藍</option>
<option value="DM1447213200124">綠</option>
<option value="DM1447213169329">橙</option>
<option value="DM1447213111665" selected="">黑</option>
<option value="DM1452246387732">紅白</option>
<option value="DM1452246392874">藍白</option>
<option value="DM1452246398497">綠白</option>
<option value="DM1452249402189">橙白</option>
<option value="DM1456294567651">淺綠色</option>
</select>
目前有這麼多的顏色可以選擇
他會去執行 onclick="javascript:selectedoff();
selectedoff() 的內容如下:
| function selectedoff(){ | |
| $('#requires option:selected').attr("selected",false); | |
| $(this).change(function(){ | |
| frm_c.submit(); | |
| }); | |
| } |
然後 frm_c 是 一個form 的name
<form name="frm_c" action="product_in.jsp?dm_id=DM1449046356283&pd_id=PD1449047066712" method="post">
就會去執行 submit... 執行的內容放在 product_in.jsp....
這邊我就沒有去看....不過從 chrome 的執行來看...
他最後會去改變img src 的path... 來達到變換圖片的效果....
<img src="/uploads/color/tw/product_a01_09.png" height="386" width="518">
==================================================================
來看看其他的元件吧...
來看看 header menu吧
從網頁原始碼來看...
都是用圖片來當作是超連結....
我只能說相當偷懶....而且網路連量會變大歐...
| <div class="header"> | |
| <!--主按鍵--> | |
| <div class="nav"> | |
| <a href="../about/about.jsp"> | |
| <img src="../images/tw/nav1.png" height="35" width="122" alt="" /> | |
| </a> | |
| </div> | |
| <div class="nav"> | |
| <a href="../product/product.jsp"> | |
| <img src="../images/tw/nav2.png" height="35" width="122" alt="" /> | |
| </a> | |
| </div> | |
| <div class="nav"> | |
| <a href="../portfolio/portfolio2.jsp"> | |
| <img src="../images/tw/nav3.png" height="35" width="122" alt="" /> | |
| </a> | |
| </div> | |
| <!--LOGO--> | |
| <div class="logo"> | |
| <a href="../index/index.jsp"> | |
| <img src="../images/logo.png" height="116" width="195" alt="" /> | |
| </a> | |
| </div> | |
| <!--主按鍵聯絡我們--> | |
| <div class="nav"> | |
| <a href="../contact/contact.jsp"> | |
| <img src="../images/tw/nav4.png" height="35" width="122" alt="" /> | |
| </a> | |
| </div> |
來看看css 的代碼
可以發覺他用 float : left 的方式來達到併排的效果....
.nav a {
再來看其他的內容
他用一個 maincontent 來把大家包起來
大小為 960x1231....
.maincontent {
==============================================================
接下來看看 其他的地方 -> table
先看css 的代碼....
| <div class="prointable"> | |
| <table class="prointb"> | |
| <tr> | |
| <th>尺寸(m)</th> | |
| <th>小阿里山帳</th> | |
| <th>大阿里山帳</th> | |
| </tr> | |
| <tr> | |
| <td>寬(A)</td> | |
| <td>3</td> | |
| <td>3.6</td> | |
| </tr> | |
| <tr> | |
| <td>深(B)</td> | |
| <td>3</td> | |
| <td>3.6</td> | |
| </tr> | |
| <tr> | |
| <td>柱高(C)</td> | |
| <td>2.2</td> | |
| <td>2.2</td> | |
| </tr> | |
| <tr> | |
| <td>頂高(D)</td> | |
| <td>3.4</td> | |
| <td>3.7</td> | |
| </tr> | |
| <tr> | |
| <td>面積(坪)</td> | |
| <td>2.7</td> | |
| <td>4</td> | |
| </tr> | |
| <tr> | |
| <td>座位數(位)</td> | |
| <td> 15</td> | |
| <td> 20</td> | |
| </tr> | |
| </table> | |
| </div> |
相對應的css 代碼如下:
只有第一個child 有右邊的border... 其他的都沒有
然後都有畫底線.... 背景顏色是 #e6e6e6
沒有留言:
張貼留言