-2

这是页面的链接：http ://www.web-design-talk.co.uk/examples/5/

我想要的类似于上面链接中的页面。但不是缩略图显示在大图的底部，而是显示在右侧（整段文字/描述所在的位置）并将整段文字切换到大图的底部缩略图所在的图像。

有人可以告诉我如何重组这个页面吗？非常感谢！

你可以看到我到目前为止得到了什么：http: //www.jsfiddle.net/11mini11/EQBXF/1

对于 CSS

body{background:url(../img/body-bg.jpg) top left repeat; font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;}

h1 {font-size:1.2em; color:#330066; font-weight:bold; margin:0 0 25px 0; letter-spacing:0.02em;}

h2 {color:#ff0000; font-weight:bold; margin:0 0 10px 0;}
h2 span { font-style:italic; color:#ccc; font-size:0.7em; text-decoration: line-through}

p { font-size: 0.80em; line-height:1.5em; margin:0 0 10px 0}

.center { text-align:center;}
.center a {color:#333; font-weight:bold;}
.center a:hover {color:#666}

#wrap {width:690px; margin:50px auto; display:block; background:url(../images/wrap-bg.jpg) top left repeat-x; padding:25px;}

#left {width:350px; float:left; margin:0 20px 0 0;}

#bigpic {width:320px; height:340px; float:left; margin:0 0 30px 0; }
#bigpic img { display:block; margin:0 auto; width: 252px; }

#thumbs {height:100px; width:350px; clear:both; display:block;}
#thumbs ul li {height:100px;width:100px;display: inline; padding:0 10px 0 0; float:left;}
#thumbs ul li img {border:1px solid #ccc;}
#thumbs ul li img:hover {cursor:pointer;border:1px solid #ddd;}

p#desc {text-align:center;padding: 10px 0}

img#apple {width:188px; margin:0 auto; display:block}

.b {border:1px solid #ccc;}

.curvey {-moz-border-radius:30px; -webkit-border-radius: 30px;}

对于 HTML

<div id="wrap" class="b curvey">
    <h1>Some Super Amazing iPhone Yay</h1>

    <div id="left">

        <div id="bigpic" class="b">
            <img src="images/big/iphone-3-big.jpg" alt="iPod Shuffle 16GB Zoom View" />

            <p id="desc">iPod Shuffle 16GB Zoom View</p>

        </div>

        <div id="thumbs">
            <ul>
                <li><a href="images/big/iphone-1-big.jpg" rel="images/small/iphone-1-small.jpg">
                        <img src="images/small/iphone-1-small.jpg" alt="iPod Shuffle Front View In Blue!" />
                    </a>
                </li>

                <li>
                    <a href="images/big/iphone-2-big.jpg" rel="images/small/iphone-2-small.jpg">
                        <img src="images/small/iphone-2-small.jpg" alt="iPod Shuffle Dual View Grey!" />
                    </a>
                </li
                >
                <li>
                    <a href="images/big/iphone-3-big.jpg" rel="images/small/iphone-3-small.jpg">
                        <img src="images/small/iphone-3-small.jpg" alt="iPod Shuffle 16GB Zoom View" />
                    </a>
                </li>
            </ul>

        </div>

    </div>


    <h2>&pound;125.99 <span>was &pound;155.99</span></h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
    ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
    in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
    deserunt mollit anim id est laborum</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
    ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    <img src="images/apple.gif" alt="apple" id="apple" />

    <a href="#" class="button" id="add-to-cart"><span>Add to Basket</span></a>

    <div class="clear"></div>


</div>

<p class="center"><a href="#">&laquo; Back to tutorial at web-design-talk.co.uk ....</a></p>
4

1 回答 1

0

尝试以下

#left {
width: 600px;
margin: 0 20px 0 0;
height: 500px;
}

#bigpic {
width: 320px;
height: 340px;
float: left;
margin: 0 0 30px 0;

#thumbs {
height: 400px;
width: 100px;
float: left;
}

#thumbs ul li {
height: 100px;
width: 100px;
padding: 0 10px 0 0;
于 2013-08-24T09:12:27.237 回答