作者celex (幹麼不早點睡了~~真是..)
看板Web_Design
標題[問題] 想請問一段動態網頁的程式碼要如何修改？
時間Tue May 14 18:19:04 2013
原本的網頁範例在這
http://www.ussi.com.tw
一進入網站首頁的部分,原本的網頁僅有右邊圖片(應該算是燈箱？)可以做切換
老闆想把這部分做成重點產品宣傳
因此要改成「左邊文字介紹＋右邊產品圖片」能一起切換
改改顏色換換連結還可以
無奈功力太差...老闆這個要求實在是改不出來
想跟各位請教個方向
以下則是這段相關的html
http://pastie.org/7906421（網頁好讀版）
<div class="grid col-one-half mq2-col-full">
<h1>左邊介紹文標題</h1>
<p>左邊內文介紹</p>
</div>
<div class="slider grid col-one-half mq2-col-full">
<div class="flexslider">
<div class="slides">
<div class="slide">
<figure>
<img src="img/圖片1.png" alt="">
<figcaption>
<div>
<h3>Caption 1</h3>
<p>Lorem ipsum dolor set amet, lorem,<br>
<a href="#">詳細</a></p>
</div>
</figcaption>
</figure>
</div>
<div class="slide">
<figure>
<img src="IMG/圖片2.png" alt="">
<figcaption>
<div>
<h5>Caption 2</h5>
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
程式碼簡略大概就以上
接下去是相關的CSS
http://pastie.org/7906412（網頁好讀版）
.flex-container a:active,.flexslider a:active,.flex-container a:focus,.flexslider a:focus {outline: none;}
.slides,.flex-control-nav,.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
/* FlexSlider Necessary Styles */
.flexslider {margin: 0; padding: 0; position: relative;}
.flexslider .slides > .slide {display: none; -webkit-backface-visibility: hidden;}
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}
.slide figcaption {
position: absolute;
background: white;
opacity: 0.7;
height: auto; min-height: 3em; width: 30%; padding: 1em;
top: 20em; right: 0; }
.slide figcaption div { text-align: right; display: block; border-right: 1px solid #DDD; padding: 0 2em 0 0; margin: auto 5em auto 0; }
.slide figcaption div p { margin: 0 }
.flex-direction-nav{ position: absolute; top: 4em; right: 1.5em; z-index: 10;}
.flex-direction-nav li {display: inline;}
.flex-prev, .flex-next{ text-decoration: none; color: #999; margin-left: 1em;}
.flex-prev:hover, .flex-next:hover{ color: #0078CF}
--
： ：： '●
︰︰ ．： ： . 先別打過來啊~~
． ：：： （﹀
︰︰ ．： ‧： ﹨●∕ 我還沒貼完呢?!
︰： ～﹌
‧． ．︰： ： ︱ ˊ
： ：： ： ‧ ●
' ．‧： ：‧ ∕﹥
‧ ：‧ ． ╰）
．： ． ∕﹨
： ： ′〉
： ∕￣﹨
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.130.104.235
1F：→ DongFeng:JJJJJQuery 05/14 22:38