Question

我正在建立一个业余网站，通过一门让我进入大学的课程。我发现很难操纵我的包装元素，因此它包含整个页面，并且与我的背景的其余部分具有不同的颜色。在灰色背景下，我希望它是黑色的。

不幸的是，我的导师说他无法帮助我修改我的代码。我已经搜索了很多，并尝试清除元素，但它不起作用..

非常感谢任何见解。

谢谢你聪明的人

：

@charset "utf-8";
/* CSS Document */

body {
	background-color:#A6A6A6;
	color:#FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
}

h1 {
	float: right;
	margin-right: 2px;
	font-size:32px;
	font-weight:bold;
	color: #FFFFFF;
}

h2 {
	font-size:26px;
	font-weight:bold;
	color: #FFFFFF;
}

h3 {
	font-size: 20px;
	font-style: italic;
	color: #FFFFFF;
}

a:link, a:visited {
	color: green;
}

#nav ul li a { 
	color: #ff0000;
}

a:hover {
	color: green;
}

#wrapper {
	width:1024px;
	height: 100%;
	margin: 0 auto;
	color: #000000;
}

#search {
	float:right;
	margin-top: -50px;
}

/* These are additional to make the text box look nicer!! */
#search input {
	border: 2px solid #66CCFF;
	padding: 5px;
	text-align:right;
}

#search input:focus {
	border-color: #B7901E;
}

#nav {
	/* Fallback if gradient doesn't work */
	background-color:#B7901E; 
	/*Safari $+, Chrome 1-9 */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333333), to(#000000));  /*Make black to show the difference!! */
    /* Safari 5.1+, Mobile Safari, Chrome 10+ */
    background-image: -webkit-linear-gradient(top, #333333, #000000); 
    /* Firefox 3.6+ */
    background-image: -moz-linear-gradient(top, #B7901E, #7B612C);
    /* IE 10+ */
    background-image: -ms-linear-gradient(top, #B7901E, #7B612C);
    /* Opera 11.10+ */
    background-image: -o-linear-gradient(top, #B7901E, #7B612C);
	text-align:center;
	width: 100%;
	margin-top: 70px;
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
}

/*Delete <hr/> tags from html and change backround color of image to white*/	

#nav ul {
	list-style: none;
	padding: 20px;
	margin: 0;
}

#nav ul li {
	display:inline;
	font-size: 22px;
	font-weight: none;
}

/* Make the links in the HTML hyperlinks */

#nav ul li a {
	color: #FFFFFF;
	text-decoration:none;
}

#nav ul li a:hover {
	color: #FF0000;
	text-decoration:underline;
}

#nav ul li:after {
	padding: 30px;
	content: " | " ;
	color: #FFFFFF;
}

#nav ul li:last-child:after {
	content: "";
}

#photos, #content {
              width: 926px;
              margin: 0 auto;
}
 

#article {
	float: left;
	width: 30%;
	margin-right: 2%;
}

#sidenav {
	float: right;
	width: 30%;
	margin-left:auto;
}

#video {
		float:right;
		width: 30%;
		margin-right: 2%;
		margin-top: 2%;
}

.highlight {
	color:#FF0000;
}
#Vegas-banner {
	margin: 0 auto;
}

.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}

<html>
<head>
	<title>Las Vegas</title>
<link href="mywebsite.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper" class="clearfix">
<div id="header">
	  <div id="search">
        	<input type="text" value="search ..." />
    </div>
	 <div id="nav">
	 <ul>
    		<li><a href="#">Hotels</a></li>
    		<li><a href="#">Casinos</a></li>
    		<li><a href="#">Drinking</a></li>
            <li><a href="#">Activities</a></li>
            <li><a href="#">Contact</a></li>
      </ul>  
  	</div>
   </div>

<img src="Images/Vegas banner.jpg" alt="Images of vegas" style="align-content:center;>


	 <div id="photos">			
     <ul>
     <img name="Hotels" src="images/Chip-hotels.png" width="220" height="245" alt="" img style="float: left; margin-right: 20px;"/>
     <img name="Gambling" src="images/Chip-casinos.png" width="220" height="245" alt="" img style="float: left; margin-right: 20px;"/>
     <img name="Drinking" src="images/Chip-drinking.png" width="220" height="245" alt="" img style="float: left; margin-right: 20px;"/>
     <img name="Activities" src="images/Chip-activities.png" width="220" height="245" alt="" img style="float: left; margin-right: 20px;"/>
    </ul>
    
    <div id="content">
    	<div id="article">
			<h2>Floated Divs</h2>
			<p>Bacon ipsum dolor sit amet pork chop bacon salami, hamburger sausage jerky andouille chuck prosciutto. Frankfurter venison filet mignon, prosciutto short ribs brisket corned beef jowl meatloaf shankle boudin. <span class="highlight">Pancetta ham capicola flank</span> boudin jerky. Ham meatball boudin capicola ground round shankle, short loin spare ribs pastrami short ribs bresaola shoulder andouille tail. Jowl cow rump pork chop sausage fatback. <span class="highlight">Shoulder shank frankfurter</span>, fatback beef ribs meatball corned beef pancetta pork chop tongue t-bone.</p>
			<p>Shank tongue beef, bacon strip steak biltong beef ribs meatball sausage jerky t-bone turkey short loin filet mignon short ribs. Tenderloin ground round pork chop short ribs rump drumstick. Salami pancetta chicken, sausage meatloaf bacon ball tip chuck hamburger rump jerky pig short loin. <a href="http://www.edgehill.ac.uk" target="_blank">Link to Edge Hill Web Site</a></p>
		</div><!-- End of article -->
        <div id="video">
          <iframe width="300" height="390" src="https://www.youtube.com/embed/1Y4R3A0nrh0" frameborder="0" allowfullscreen></iframe>
        </div>
        <div id="sidenav">
          <h2>Bulleted List</h2>
            <ul>
                <li>Point One</li>
                <li>Point Two</li>
                <li>Point Three</li>
                <li>Point Four</li>
                <li>Point Five</li>
            </ul>
            <p>&nbsp;</p>
            <h3>Numbered List</h3>
            <ol>
              <li>Number One</li>
              <li>Number Two</li>
              <li>Number Three</li>
              <li>Number Four</li>
              <li>Number Five</li>
            </ol>
</div>
</div>
</div>
</body>

</html>

Answer 1

您可以只应用css背景属性

#wrapper {
width:1024px;
height: 100%;
margin: 0 auto;
background: #000000;
color:#fff;
}

edit in jsfiddle

无法使包装器包含元素或更改颜色

1 个答案: