Html CSS3图片表现怪异？_Html_Css

Html CSS3图片表现怪异？

html css

Html CSS3图片表现怪异？,html,css,Html,Css,我正在做一个学校的项目。它必须是HTML5，所以我们不能把图像的宽度和高度放在标签上；我们必须给它一个id并把它放在样式表中。但是现在这张照片看起来很奇怪，没有任何东西是正常的。在此处查看图片：索引HTML页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> B & B Willow Lake | Home </title>

我正在做一个学校的项目。它必须是HTML5，所以我们不能把图像的宽度和高度放在标签上；我们必须给它一个id并把它放在样式表中。但是现在这张照片看起来很奇怪，没有任何东西是正常的。在此处查看图片：

索引HTML页面

<!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 &copy; bandbwillowlake.co.nf
</p>
</footer>
</body>
</html>

你显然忘了

#png2 {
width: 25%;
height: 150px;
}

在你的样式表上，我没有读过，因为它太长了

下次尝试使用firebug之类的工具检查代码。有时候，这会让事情变得更简单。

请更明确地说明你的意思是什么“演威德？你期望的结果是什么？另一个问题是发布代码的音调，显然没有相关的理由出现在这里。试着为你的问题隔离相关代码。如果你看一下，它们应该像网站上的packages页面一样合适，然后转到packages.php，这就是索引应该是如何显示的。png4和png2之间的混乱，对不起，我一定是迟钝了，我发誓我搞砸了，对不起，愚蠢的问题应该检查更多：p

#png2 {
width: 25%;
height: 150px;
}