我正在创建一个网站，我遇到了一个我似乎无法理解的问题。我设法在我的网页周围放置了边框。我在边框外有一个渐变 strip 图像，但在边框内我想放背景色。我知道，我需要将背景颜色放在 BODY 中，我已经做到了。背景图片(渐变)有效，但它遍布整个网页，我只想要它在边框周围，而在内部我想要背景颜色。
<!doctype html>
<html>
<head>
<title>QPI FAN CLUB</title>
<link rel="stylesheet" href="style.css">
<style>
#bod {
padding: 5em;
}
</style>
</head>
<body>
<div id="wrap">
<div id="logo">
<img class="p" src="images/logo.png" align="left">
</div>
<img class="d" src="images/title.gif" align="middle">
<div id="menu">
<div id="menu2">
<ul>
<li><a href="homepage.html"><span>Home</span></a>
</li>
<li><a href="about.html"><span>About Us</span></a>
</li>
<li><a href="clubs.html"><span>Teams and Fixtures</span></a>
</li>
<li><a href="shop.html"><span>Shop</span></a>
</li>
<li><a href="contact.html"><span>Contact Us</span></a>
</li>
</ul>
</div>
</div>
</div>
<div id=bod>
<b><header style="color:black"></a> Manchester United </b>
</header>
<P>Manchester United Football Club is an English professional football club, based in Old Trafford, Greater Manchester, that plays in the Premier League. Founded as Newton Heath LYR Football Club in 1878, the club changed its name to Manchester United
in 1902 and moved to Old Trafford in 1910.</p>
<b><header style="color:black"></a> Manchester City </b>
</header>
<p>Manchester City Football Club is an English Premier League football club based in Manchester. Founded in 1880 as St. Mark's (West Gorton), they became Ardwick Association Football Club in 1887 and Manchester City in 1894. The club has played at
the City of Manchester Stadium since 2003, having played at Maine Road from 1923. The club's most successful period was in the late 1960s and early 1970s when they won the League Championship, FA Cup, League Cup and European Cup Winners' Cup
under the management team of Joe Mercer and Malcolm Allison.</p>
</div>
</body>
</html>
样式表:
body {
text-align: center;
margin: 0px 12%;
background-image: url("images/mainbk.gif");
background-repeat: repeat;
border: 1px solid gray;
background-color: white;
}
#wrap {
width: 80%;
margin: 0 auto;
text-align: left;
}
img.d {
padding-top: 3em;
width: 450px;
}
#menu2 ul li {
display: block;
float: left;
padding: 0 10px;
background-image: url("bk2.gif");
}
#menu {
padding-top: .5em;
}
#menu a {
display: inline-block;
padding: 0 25px;
background-image: url("images/bk.gif");
color: White;
text-decoration: none;
font: bold 12px Arial;
line-height: 32px;
line-width: 10px;
}
#menu a:hover {
background-position: 0 -60px;
}
#logo img {
position: relative;
top: 0px;
right: 0px;
height: 125px;
width: 125px;
}
最佳答案
您应该有一个容器 div。 我这样编辑了你的代码。 检查这个http://jsfiddle.net/KLaWa/
HTML
<body>
<div class="container">
<div id="wrap">
<div id="logo">
<img class="p" src="images/logo.png" align="left" />
</div>
<img class="d" src="images/title.gif" align="middle" />
<div id="menu">
<div id="menu2">
<ul>
<li><a href="homepage.html"><span>Home</span></a>
</li>
<li><a href="about.html"><span>About Us</span></a>
</li>
<li><a href="clubs.html"><span>Teams and Fixtures</span></a>
</li>
<li><a href="shop.html"><span>Shop</span></a>
</li>
<li><a href="contact.html"><span>Contact Us</span></a>
</li>
</ul>
</div>
</div>
</div>
<div id="bod">
<b><header style="color:black"> Manchester United
</header></b>
<p>Manchester United Football Club is an English professional football club, based in Old Trafford, Greater Manchester, that plays in the Premier League. Founded as Newton Heath LYR Football Club in 1878, the club changed its name to Manchester United
in 1902 and moved to Old Trafford in 1910.</p>
<b><header style="color:black"> Manchester City
</header></b>
<p>Manchester City Football Club is an English Premier League football club based in Manchester. Founded in 1880 as St. Mark's (West Gorton), they became Ardwick Association Football Club in 1887 and Manchester City in 1894. The club has played at
the City of Manchester Stadium since 2003, having played at Maine Road from 1923. The club's most successful period was in the late 1960s and early 1970s when they won the League Championship, FA Cup, League Cup and European Cup Winners' Cup
under the management team of Joe Mercer and Malcolm Allison.</p>
</div>
</div>
</body>
CSS
#bod {
padding: 5em;
}
.container {
text-align: center;
margin: 0px 12%;
background-image: url("images/mainbk.gif");
background-repeat: repeat;
border: 1px solid gray;
background-color: #999;
}
#wrap {
width: 80%;
margin: 0 auto;
text-align: left;
}
img.d {
padding-top: 3em;
width: 450px;
}
#menu2 ul li {
display: block;
float: left;
padding: 0 10px;
background-image: url("bk2.gif");
}
#menu {
padding-top: .5em;
}
#menu a {
display: inline-block;
padding: 0 25px;
background-image: url("images/bk.gif");
color: White;
text-decoration: none;
font: bold 12px Arial;
line-height: 32px;
line-width: 10px;
}
#menu a:hover {
background-position: 0 -60px;
}
#logo img {
position: relative;
top: 0px;
right: 0px;
height: 125px;
width: 125px;
}
关于HTML/CSS 尝试使用带边框的网页为背景添加颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22412745/