-1
我的形象熄滅了，我似乎無法解決它。這是完整的代碼。我會很感激任何幫助。它包括html和CSS代碼。我還提供了一張照片。正如你所看到的，當我想讓它與其餘的圖像保持一致時，'html5'圖片會向右移動。如何修復我的代碼，以便圖像不會偏離右側（提供的代碼）？
。
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Birdwatching</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<style>
html
{ height: 100%;
}
*
{ margin: 0;
padding: 0;}
body
{ font: normal .80em 'trebuchet ms', arial, sans-serif;
background: #F0EFE2 url(background.png) repeat;
color: #000;
width: 97%;
min-width: 800px;
margin:0 auto;
}
p
{ padding: 0 0 20px 0;
line-height: 1.7em;}
img
{ border: 0;}
h1, h2, h3, h4, h5, h6
{ font: normal 175% 'century gothic', arial, sans-serif;
color: #7E2451;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;}
h2
{ font: normal 175% 'century gothic', arial, sans-serif;}
h4, h5, h6
{ margin: 0;
padding: 0 0 5px 0;
font: normal 120% arial, sans-serif;}
h5, h6
{ font: italic 95% arial, sans-serif;
padding: 0 0 15px 0;}
nav ul {
background: url(transparent.png) ;
width: 100%;
height: 52px;
text-align: center;
padding: 0;
margin: 0;
}
nav ul li {
display: inline;
}
nav ul li a {
text-decoration: none;
color: #fff;
letter-spacing: 0.2em;
font: normal 100% arial, sans-serif;
text-align: center;
display: inline-block;
margin: 5px;
padding: 9px 26px 9px 26px;
text-transform: uppercase;
}
nav ul li a:hover {
color: #000;
background-color: #fff;
}
.dropdown {
display:inline-block;
position: relative;
}
.dropdown-content {
background: #f9f9f9;
min-width: 160px;
position: absolute;
display: none;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
left: 50%;
transform: translateX(-50%);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align:left;
}
.dropdown-content a:hover {
background: #bada55;
left:auto;
right:0;
margin-right:-10px;
}
.dropdown:hover .dropdown-content {
display: block;
}
main
{ width: 854px;
overflow: hidden;
margin: 0 auto 0 auto;
padding: 0 24px 20px 20px;
background: transparent url(transparent_light.png) repeat;}
#first_half article
{ text-align: left;
float: left;
width: 595px;
padding: 0;}
#first_half article ul
{ margin: 2px 0 22px 0px;}
#first_half article ul li
{ list-style-type: none;
background: url(bullet.png) no-repeat;
margin: 0 0 6px 0;
padding: 0 0 4px 25px;
line-height: 1.5em;}
#first_half aside
{ float: right;
width: 210px;
padding: 0 15px 20px 15px;}
#first_half aside ul
{ width: 198px;
padding: 4px 0 0 0;
margin: 4px 0 30px 0;}
#first_half aside li
{ list-style: none;
padding: 0 0 7px 0; }
#first_half aside li a, #first_half .sidebar li a:hover
{ padding: 0 0 0 40px;
display: block;
background: transparent url(link.png) no-repeat left center;}
#first_half aside li a.selected
{ color: #7E2451;
text-decoration: none;}
#promo_area article {
float:left;
width:20%;
padding:10px 0;
border-top: solid #f7be84;
/background:#fff;
text-align: center;
}
#promo_area article .inner {
margin:0 10px;
padding:10px;
background:#e5e8ed;
/border-radius: 25px;
box-shadow: 10px 10px 5px #888888;
text-align: center;
}
#promo_area article p {
font-family:'Open Sans Condensed';
font-weight:300;
font-size:1em;
line-height:1.5em;
color:#616161;
}
/* HOVER STYLES */
div#pop-up1, #pop-up2, #pop-up3, #pop-up4 {
display: none;
position: absolute;
width: 280px;
padding: 10px;
background: #eeeeee;
color: #000000;
border: 3px solid #196CE8; /*#f7923a;*/
font-size: 90%;
border-radius: 25px;
}
</style>
</head>
<body>
<header>
<h1>Model United Nations Conference</h1>
<img src="dove.png" alt="a simple dove logo">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li class="dropdown"><a href="#">Get started</a>
<div class="dropdown-content">
<a href="#">Preparation</a>
<a href="#">D-Day</a>
<a href="#">Useful Resources</a>
</div>
</li>
<li class="dropdown"><a href="#">Gallery</a>
<div class="dropdown-content">
<a href="#">MUN 2015</a>
<a href="#">MUN 2016</a>
<a href="#">MUN 2017</a>
</div>
</li>
<li class="dropdown"><a href="#">Contact Us</a>
<div class="dropdown-content">
<a href="#">Ask A Question</a>
<a href="#">Contact Information</a>
<a href="#">Map</a>
</div>
</li>
<li class="dropdown"><a href="#">Forum</a>
<div class="dropdown-content">
<a href="#">About</a>
<a href="#">Sign-Up</a>
<a href="#">Community</a>
</div>
</li>
</ul>
</nav>
</header>
<main>
<section id = "first_half">
<article>
<h2>Welcome</h2>
<p>Welcome to our fake birdwatching site. If this were a real site, it would be the ideal place to come to learn more about birdwatching, whether you are a beginner looking to learn how to get into birding, or an expert wanting to share ideas, tips, and photos with other like-minded people.</p>
<p>So don't waste time! Get what you need, then turn off that computer and get out into the great outdoors!</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ojcNcvb1olg" frameborder="0" allowfullscreen sandbox></iframe>
<h2>Rocking the free web</h2>
<p>Mozilla are a global community of technologists, thinkers, and builders, working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.</p>
<p>Click on the images below to find more information about the cool stuff Mozilla does. <a href="https://www.flickr.com/photos/mathiasappel/21675551065/">Red panda picture</a> by Mathias Appel.</p>
</article>
<aside>
<form>
<h1>Payment form</h1>
<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
<section>
<h2>Contact information</h2>
<fieldset>
<legend>Title</legend>
<ul>
<li>
<label for="title_1">
<input type="radio" id="title_1" name="title" value="M." >
Mister
</label>
</li>
<li>
<label for="title_2">
<input type="radio" id="title_2" name="title" value="Ms.">
Miss
</label>
</li>
</ul>
</fieldset>
<p>
<label for="name">
<span>Name: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="text" id="name" name="username">
</p>
<p>
<label for="mail">
<span>E-mail: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="email" id="mail" name="usermail">
</p>
<p>
<label for="pwd">
<span>Password: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="password" id="pwd" name="password">
</p>
</section>
<section>
<h2>Payment information</h2>
<p>
<label for="card">
<span>Card type:</span>
</label>
<select id="card" name="usercard">
<option value="visa">Visa</option>
<option value="mc">Mastercard</option>
<option value="amex">American Express</option>
</select>
</p>
<p>
<label for="number">
<span>Card number:</span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="text" id="number" name="cardnumber">
</p>
<p>
<label for="date">
<span>Expiration date:</span>
<strong><abbr title="required">*</abbr></strong>
<em>formatted as mm/yy</em>
</label>
<input type="text" id="date" name="expiration">
</p>
</section>
<p> <button type="submit">Validate the payment</button> </p>
</form>
</aside>
</section>
<section id="promo_area">
<article>
<div class="inner">
<div class="picDiv"><span id="trigger1"><img alt="html5" src="images/HTML5.png" width="100" height="100" /></span></div>
</div>
<!-- HIDDEN/POP-UP DIV -->
<div id="pop-up1">
<h3>HTML5</h3>
<p>HyperText Markup Language. It was specially designed to deliver rich content without the need for additional plugins.</p>
</div>
</article>
<article>
<div class="inner">
<div class="picDiv"><span id="trigger2"><img alt="css3" src="images/css3.png" width="100" height="100" /></span></div>
</div>
<!-- HIDDEN/POP-UP DIV -->
<div id="pop-up2">
<h3>CSS3</h3>
<p>Cascading Style Sheets is designed primarily to separate document content from document presentation (such as the layout, colors, and fonts).</p>
</div>
</article>
<article>
<div class="inner">
<div class="picDiv"><span id="trigger3"><img alt="javascript" src="images/javascript.png" width="100" height="100" /></span></div>
</div>
<!-- HIDDEN/POP-UP DIV -->
<div id="pop-up3">
<h3>JavaScript</h3>
<p>Used as part of web browsers, and allows client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content displayed.</p>
</div>
</article>
<article>
<div class="inner">
<div class="picDiv"><span id="trigger4"><img alt="jquery" src="images/jquery.jpg" width="100" height="100" /></span></div>
</div>
<!-- HIDDEN/POP-UP DIV -->
<div id="pop-up4">
<h3>jQuery</h3>
<p>Cross-platform JavaScript library designed to simplify the client-side scripting of HTML.</p>
</div>
</article>
</section><!--end promo_area-->
</main>
</body>
</html>
我試過..這是行不通的。 – user8775982