Question

嗨我正在尝试在一个div中拍摄一张幻灯片并将其放入两个div中，左边是缩略图悬停图像，右边是“输出”图像但它只是拒绝正常工作css知识主要归结为修补“代码”。

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Blockrim Realms</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<style type="text/css">
.auto-style1 {
font-size: 40pt;
text-align: center;
}
</style>
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
<div id="backgroundimg"></div><div id="htext">Blockrim Realms</div></div>
<!-- End Header -->
<!-- Begin Navigation -->
<div id="navigation" class="auto-style1"> <strong>Blockrim Realms</strong></div>
<!-- End Navigation -->
<div id="leftcolumn">  Featured Screenshots!<br />
    <br />
    <a href="#">
        <img class="thumb" alt="" src="images/centralstation.png" />
    </a><br />&nbsp;Central Station<br /><br /><br /><br /><br />
    <a href="#">
        <img class="thumb" alt=""src="images/hydlaaplaza.png" />
        <img class="big" alt=""src="images/hydlaaplaza.png" />
    </a><br />&nbsp;Hydlaa Plaza<br /><br /><br /><br /><br />
    <a href="#">
        <img class="thumb" alt=""src="images/islesofteleport.png" />
        <img class="big" alt=""src="images/islesofteleport.png" />
    </a><br />&nbsp;Isles of Teleport<br /><br /><br /><br /><br />
    <a href="#">
        <img class="thumb" alt=""src="images/blackpearl.png" />
        <img class="big" alt=""src="images/blackpearl.png" />
    </a>
</div>
<!-- End Left Column -->
<!-- Begin Content Column -->
<!-- Begin Content Column -->
<div id="content">
<div class="container">
    <a href="#">
        <img class="big" alt=""src="images/centralstation.png" />
    </a>
    <a href="#">
        <img class="big featured" alt=""src="images/spawn.png" />
    </a>
&nbsp;<br />
&nbsp;The Black Pearl</div></div>
<!-- End Content Column -->
<!-- Begin Footer -->
<div id="footer"> </div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</body>
</html>

CSS

* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color:#272B30
}
#wrapper { 
margin: 0 auto;
width: 950px;
}
#header {
color: #fff;
width: 922px;
padding: 0px;
border: 0.5px solid #000;
height: 40px;
margin: 0px 0px 0px 0px;
background:#3A3F44;
z-index:2;
}
#backgroundimg {
height: 40px;
width:100%;
background:url('images/grayradiant.jpg') center;
position:absolute;
left:0;
z-index:1;
}
#htext {
color: #BBBFC2;
font-weight:bold;
font-size:large;
position:absolute;
margin-top: 10px;
z-index:3;
}
#navigation {
float: left;
width: 922px;
color: #fff;
padding: 10px;
border: 0.5px solid #000;
border-bottom: 0px solid #000;
margin: 0px 0px 0px 0px;
background-color:#202328;
}
#leftcolumn { 
color: #333;
border: 1px solid #ccc;
background:#F6F0E0;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 600px;
width: 300px;
float: left;
}
#content { 
float: left;
color: #fff;
border: 0.5px solid #000;
border-top: 0px solid #000;
background:#202328;
margin: 0px 0px 20px 0px;
padding: 10px;
height: 600px;
width: 922px;
display: inline;
}
#footer { 
width: 922px;
clear: both;
color: #fff;
border: 0.5px solid #000;
background-color:#202328;
margin: 0px 0px 0px 0px;
padding: 10px;
}
/*SLIDER*/
.container {
position: relative;
height: 500px;
width: 922px;
overflow: hidden;
margin: 0 auto;
}
.big {
position: absolute;
top:1000px;
left:260px;
width:640px;
z-index: 2;

-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
}
a {
float: left;
margin: 0px;
}
a:hover .thumb {
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
}
.thumb{
width:100px;
margin-left:20px;
}
a:hover .big {
top: 0px;
width:640px;
}
.featured {
width:640px;
top: 0px;
left: 260px;
z-index: 1;
}

两个div，一个幻灯片，css

0 个答案: