个人中心
gpt4 book ai didi

html - 无法让包装器包含元素或更改颜色

转载 作者：太空宇宙 更新时间：2023-11-04 10:01:41 25 4
gpt4 key购买 nike

我正在建立一个业余网站，以通过一门让我进入大学的类(class)。我发现很难操纵我的包装器元素以使其包含整个页面并与我的其他背景具有不同的颜色。我希望它在灰色背景下是黑色的。

不幸的是，我的导师说他不能帮助我编写代码。我搜索了很多并尝试清除元素，但它不起作用..

如有任何见解，我们将不胜感激。

谢谢你们这些聪明的人

:]

@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>

最佳答案

你可以只应用 css 背景属性

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

edit in jsfiddle

关于html - 无法让包装器包含元素或更改颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38293145/

25 4 0
文章推荐： javascript - bootstrap 不在 iframe 中显示移动布局
文章推荐： java - 如何确定 JSON 键是否已设置为 null 或未提供
文章推荐： java - JsonParseException : Unexpected character ('i' (code 105)): was expecting double-quote
文章推荐： linux - rsync 输入文件列表中的文件/文件夹并从排除文件中排除
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com