[問題] 想請問一段動態網頁的程式碼要如何修改?

看板Web_Design作者 (幹麼不早點睡了~~真是..)時間12年前 (2013/05/14 18:19), 編輯推噓0(001)
留言1則, 1人參與, 最新討論串1/1
原本的網頁範例在這 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

05/14 22:38, , 1F
JJJJJQuery
05/14 22:38, 1F
文章代碼(AID): #1HaW-R1X (Web_Design)