HTML / CSS尝试使用带边框的网页为背景添加颜色

时间:2014-03-14 18:13:19

标签: html css css3

我正在创建一个网站,我遇到了一个问题,我似乎无法理解它。我设法在我的网页上放置边框。我在边框外面有一个渐变条形图像,但在内部边框我想要放置背景颜色。我知道,我需要把背景颜色放在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;
}

2 个答案:

答案 0 :(得分:0)

如果我理解你,我认为你需要为div添加css规则“bod”id ...

所以,你需要在style.css文件中写这个......

#bod {
  background-color : #ffffff; (or any other color)
}

获取边框内区域的颜色......

您为body添加了该规则,这是不正确的,因为body代表整个页面,而不仅仅是边框内的区域。

答案 1 :(得分:0)

你应该有一个容器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;
}