作者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