我正在做一个学校项目。它必须是HTML5，所以我们不能将图像的宽度和高度放在标签中;我们不得不给它一个id并把它放在样式表中。但现在这张照片很奇怪，没有什么工作正常。在此处查看图片：http://www.bbwillowlake.co.nf
INDEX HTML PAGE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
B & B Willow Lake | Home
</title>
<link rel="stylesheet" type="text/css" href="styles/layout.css">
<link rel="stylesheet" type="text/css" href="styles/style.css">
</head>
<body>
<div id="wrapper">
<header id="header">
<h1>B & B Willow Lake</h1>
</header>
<ul id="menu">
<li>
<a href="packages.php">Packages</a>
<ul>
<li><a href="one_and_two_night.php">One and Two Night</a>
</li>
<li><a href="anniversary.php">Anniversary</a>
</li>
<li><a href="extended_stay.php">Extended Stay</a>
</li>
<li><a href="honey_moon.php">Honey Moon</a>
</li>
</ul>
</li>
<li><a href="activities.php">Activities</a>
<ul>
<li><a href="indoor.php">Indoor</a>
</li>
<li><a href="outdoor.php">Outdoor</a>
</li>
</ul>
</li>
<li><a href="#">Dine</a>
<ul>
<li><a href="#">Specials</a>
</li>
<li><a href="#">BreakFast</a>
</li>
<li><a href="#">Lunch</a>
</li>
<li><a href="#">Tea Party</a>
</li>
<li><a href="specials.php">Specials</a>
</li>
</ul>
</li>
<li><a href="contact_us.php">Contact Us</a>
<ul>
<li><a href="directions.php">Directions</a>
</li>
</ul>
</li>
</ul>
<section id="section_slide">
<img src="images/background.jpg" alt="background" id="png1"><img src="images/background3.jpg" alt="background2" id="png3"><img src="images/background2.jpg" alt="background3" id="png2"><img src="images/background4.jpg" alt="background4" id="png4">
</section>
<div id="middle_wrapper">
<section id="section">
<article>
<h2>Play</h2>
<a href="play.html"><img src="images/play.jpg" id="png5" alt="background5" id="picmain"></a>
<p>Here will go a text area that talks about all the stuff they can do out door and in door most of the descrpiton will be like the descrpition on the acrives page which it is refing to,<br />
<a id="learnmore">Learn More</a>
</p></article><hr />
<article>
<h2>Stay</h2><a href="stay.php"><img src="images/stay.jpg" id="png6" alt="background6" id="picmain2"></a>
<p>This wil be a ref to the package page just a shorter descrpiton so sum up what our stay is like all of these little text areas like play stay dine and cel shoul have a blue text area at the bottom that says learn more that when liked should link to the main page for the subject.<br />
<a id="learnmore2">Learn More</a>
</p><hr /></article>
<article>
<h2>Dine</h2><a href="dine.php"><img src="images/dine.jpg" id="png7" alt="background7" id="picmain3"></a>
<p>Here will be a desc of the dine page which well tell the user the basics of what eating is like at the resort b and b willow lake it should also tell them that there is a kids menu for there kids and that there is fine dining for the adults and a lot of places to eat for the famlily and just for lovers to get away and eat.<br />
<a id="learnmore3">Learn More</a>
</p><hr /></article>
<article>
<h2>Celebrate</h2><a href="cel.php"><img src="images/cel.jpg" id="png8" alt="background8" id="picmain4"></a>
<p>This well talk about the events that you can host and the resort like wewdings and birth days tea partys any thing from normal kids birth day partys to highclass wedingns and events of any sort.<br />
<a id="learnmore4">Learn More</a>
</p></article>
</section>
<aside id="aside"><input type="button" value="Check Out (*)" id="button">
</aside>
</div>
</div>
<footer id="footer">
<h1>B & B Willow Lake</h1>
<p>
bandbwillowlake@gmail.com
</p>
<p>
Copyright © bandbwillowlake.co.nf
</p>
</footer>
</body>
</html>
STYLE CSS PAGE
body {
background: -webkit-radial-gradient(#D8D8D8, #A4A4A4, #6E6E6E); /* Safari */
background: -o-radial-gradient(#D8D8D8, #A4A4A4, #6E6E6E); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(#D8D8D8, #A4A4A4, #6E6E6E); /* For Firefox 3.6 to 15 */
background: radial-gradient(#D8D8D8, #A4A4A4, #6E6E6E); /* Standard syntax */
}
#header{
color: #FFF;
background: #111;
background: -moz-linear-gradient(#5882FA, #3D72A4);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #5882FA),color-stop(1, #3D72A4)); background: -webkit-linear-gradient(#5882FA, #3D72A4);
background: -o-linear-gradient(#5882FA, #3D72A4);
background: -ms-linear-gradient(#5882FA, #3D72A4);
background: linear-gradient(#5882FA, #3D72A4);
}
#picmain{
text-align:center;
width:150px;
height:150px;
}
#picmain2{
text-align:center;
width:150px;
height:150px;
}
#picmain3{
text-align:center;
width:150px;
height:150px;
}
#picmain4{
text-align:center;
width:150px;
height:150px;
}
h1{
color: #FFF;
text-shadow: 0 1px 0 #000;
}
h2{
color: #000;
}
#nav{
background-color: #254159;
color: #FFFFFF;
text-align: center;
}
a:link{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
#section_slide{
background-color: #4F5A48;
}
img{
}
#section{
background-color: #FFF;
}
#png1{
width:25%;
height:150px;
}
#png3{
width:25%;
height:150px;
}
#png4{
width:25%;
height:150px;
}
#png5{
width:150px;
height:150px;
transition:width 2s, height 2s, transform 2s;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari */
}
#png5:hover{
width:250px;
height:250px;
transform:rotate(360deg);
-webkit-transform:rotate(360deg); /* Safari */
}
#png6{
width:150px;
height:150px;
transition:width 2s, height 2s, transform 2s;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari */
}
#button{
width:auto;
height:25px;
background: #111;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
color:#FFF;
}
#png6:hover{
width:250px;
height:250px;
transform:rotate(360deg);
-webkit-transform:rotate(360deg); /* Safari */
}
#png7{
width:150px;
height:150px;
transition:width 2s, height 2s, transform 2s;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari */
}
#png7:hover{
width:250px;
height:250px;
transform:rotate(360deg);
-webkit-transform:rotate(360deg); /* Safari */
}
#png8{
width:150px;
height:150px;
transition:width 2s, height 2s, transform 2s;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari */
}
#png8:hover{
width:250px;
height:250px;
transform:rotate(360deg);
-webkit-transform:rotate(360deg); /* Safari */
}
#aside{
background: #111;
background: -moz-linear-gradient(#5882FA, #3D72A4);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #5882FA),color-stop(1, #3D72A4)); background: -webkit-linear-gradient(#5882FA, #3D72A4);
background: -o-linear-gradient(#5882FA, #3D72A4);
background: -ms-linear-gradient(#5882FA, #3D72A4);
background: linear-gradient(#5882FA, #3D72A4);
}
#footer{
background: #111;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
color:#FFFFFF;
}
#menu{
width: 82%;
margin-left: auto;
margin-right: auto;
padding: 10px 0 0 0;
list-style: none;
background: #111;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
#menu li{
float: left;
padding: 0 0 10px 0;
position: relative;
}
#menu a{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a{
color: #FFF;
}
*html #menu li a:hover{ /* IE6 */
color: #FFFFFF;
}
#menu li:hover > ul{
display: block;
}
/* Sub-menu */
#menu ul{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #FFFFFF;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul li{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a{
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a{ /* IE6 */
height: 10px;
width: 150px;
}
*:first-child+html #menu ul a{ /* IE7 */
height: 10px;
width: 150px;
}
.button{
border-radius:10px;
background-color:red;
}
#menu ul a:hover{
background: #111;
background: -moz-linear-gradient(#5882FA, #3D72A4);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #5882FA),color-stop(1, #3D72A4)); background: -webkit-linear-gradient(#5882FA, #3D72A4);
background: -o-linear-gradient(#5882FA, #3D72A4);
background: -ms-linear-gradient(#5882FA, #3D72A4);
background: linear-gradient(#5882FA, #3D72A4);
}
#menu ul li:first-child a{
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child a:after{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul li:first-child a:hover:after{
border-bottom-color: #FFF;
}
#menu ul li:last-child a{
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
#learnmore{
color: blue;
}
#learnmore2{
color: blue;
}
#learnmore3{
color: blue;
}
#learnmore4{
color: blue;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
答案 0 :(得分：0)
你显然忘了
#png2 {
width: 25%;
height: 150px;
}
在我没有阅读的样式表上，因为它很长。
下次尝试使用像firebug这样的工具来检查你的代码。有时它会让事情变得更容易。