Question

以下是该页面的链接：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>

Answer 1

尝试以下

#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;

如何重新组织缩略图显示此页面的方式？

1 个答案: