Question

解决谢谢马雷克，

我认为这些都是因为她玩弄它而改变了，但是在打开记事本中的文件之后，我注意到颜色已经关闭了。不知何故，双引号中有3个是斜体，这导致HTML忽略main。问题解决了。我将指导她的答案，以帮助清理她的代码。

再次感谢！

我的女朋友正在做她的html作业，并且遇到了一个以她的主要角色为中心的问题。

请原谅我所犯的任何错误，因为我不懂HTML。我正在研究C ++，它不是非常有用。然而，耐心地调试和研究答案并没有向我显示问题，特别是因为给定的示例使用相同的代码。

我建议堆栈溢出，因为这个站点过去曾帮助过我。虽然这个问题看似重复但所提供的答案都没有解决问题，我认为解决方案是初学者认为与问题无关的问题，尽管我无法确认。

CSS样式：

body {
background-image: url(../images/bg.gif);
margin: 0 ;
font: 11px "Trebuchet MS", Verdana, Arial, sans-serif;
color: #7C3404;
line-height: 18px;
text-align: center;
}

#main {
background-color: #FFFFFF;
border-left: 2px solid #000;    
border-right: 2px solid #000;
border-bottom: 2px solid #000;
width: 700px;
margin: 0 auto;
text-align: left;
position: absolute;
}

h1 {    
font: 14px “Georgia”, Times, serif;
font-weight: bold; 
color: #7C3404;
padding: 0px 25px 0px 25px;
width: 700px;
margin: 0 auto;
}

p {
padding: 0px 25px 0px 25px;
}

ul {
margin-left: 40px;
padding-right: 60px;
list-style: url(../images/bullet.gif);  
width: 700px;
margin: 0 auto;
}

a {
font-weight: bold;
color: #AD3110;
text-decoration: none;
}

a:hover {
font-weight: bold;
color: #6B0808;
text-decoration: underline overline;
}

HTML索引：

<!DOCTYPE html>
<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<title>Chelsea Palmer + Exercise 2</title>
</head>
<body>
<div id=“main”>
<img src="images/header.jpg" alt=“Flying solo” height="250" width=“850" />
<h1> That’s Right, it’s time to fly solo! </h1>
<p> So now it’s your turn to show us what you’re made of! So what do you need to do to show us that you can fly on your own? Here are the criteria for this exercise: </p>
<ul>
<li> Apply the background image so it repeats, no matter how large the browser is! </li>
<li> Set up the layout as similar to what you see in this screenshot </li>
<li> The heading should be implemented with h1 tag. Assign the following properties and values: font-size 14px, Georgia, bold, color #7C3404. </li>
<li> The body copy should be 11px, Trebuchet MS or sans-serif, color #7C3404. Also the line height should be 18px.</li>
<li> Maintain site organization (that means create folders for images, css) </li>
<li> Use proper naming conventions (no spaces, crazy characters, all lowercase) </li>
<li> The html page should be named index.html </li>
<li> Include doctype and four main tags </li>
<li> Use external CSS file to apply style to your document. Style the links so that they are bold and they have a border above and below when they are hovered. </li> 
<li> Apply a custom bullet to this unordered list. </li>
<li> Create external links for the three links below that will open in a new browser window. </li> 
</ul>

<h1> Notable sites to see! </h1>
<p> 
Here are a few notable sites to check out in your spare time to get inspired and learn more about html & css
</p>
<ul>
<li> <a href="http://www.cameronmoll.com" target="_blank">http://www.cameronmoll.com</a> - Learn from Captain America, Cameron Moll. </li>
<li> <a href="http://www.cssbeauty.com" target="_blank">http://www.cssbeauty.com</a> - Get inspired and learn tricks of the trade </li> 
<li> <a href="http://www.stylegala.com" target="_blank">http://www.stylegala.com</a> - Keep up to date and inspired at stylegala </li> 
</ul>
</div>
</body>
</html>

Answer 1

尝试改变：

#main {
background-color: #FFFFFF;
border-left: 2px solid #000;    
border-right: 2px solid #000;
border-bottom: 2px solid #000;
width: 700px;
margin: 0 auto;
text-align: left;
position: absolute;
}

到

#main {
background-color: #FFFFFF;
border-left: 2px solid #000;    
border-right: 2px solid #000;
border-bottom: 2px solid #000;
width: 700px;
margin: auto;
text-align: left;
}

简单 - 删除绝对位置并将保证金更改为＆＃34; auto＆＃34;只要。

居中CSS / HTML主要div

1 个答案: