Question

我正在尝试在我的文本后面有一个背景框，我无法让它工作。我以前做过这个并且工作正常，但这次我无法看到我出错的地方。我已经检查过确保通过更改background-color来正确地将CSS链接到HTML。

HTML：

<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="SiteIcon.ico">
<title>Navigation</title>
<link rel="stylesheet" href="CSS/style for SubNav.css">
</head>
<body> 
<h2><center><a href="Digital Portfolio.html"><font color="orange" size="7">Navigation</font></a></center></h2>
<center>
        <div id="1"><a href="The Online World.html">The Online World</a></div>
        <div id="2"><p><a href="Animation.html">Animation</a></p></div>
        <div id="3"><p><a href="Creating a app.html">Creating an app</a></p></div>
        <div id="4"><p><a href="minigame.html">Mini Game</a></p></div>
        <div id="5"><p><a href="Gallery.html">Gallery</a></p></div>
        <div id="6"><p><a href="Be Creative.html">Be Creative</a></p></div>
        <div id="7"><p><a href="About me.html">About me</a></p></div>
</center>
</body>
</html>

CSS：

body {
    color: black;
    background-color: black;
    margin: 0;
}

#1{
    width: 7%;
    margin: 50px auto 50px auto;
    padding: 2%;
    background-color: white;
    box-shadow: 0px 0px 1px rgba(0,0,0,.90);
    position: relative;
}

Answer 1

Element IDs can't start with numbers。一旦你改变了，一切都很好：http://jsfiddle.net/gr5956br/

＆＃13;

body {
color: black;
background-color: black;
margin: 0;
}

#a1{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}

＆＃13;

<body> 
<h2><center><a href="Digital Portfolio.html"><font color="orange" size="7">Navigation</font></a></center></h2>
<center>
        <div id="a1"><a href="The Online World.html">The Online World</a></div>
        <div id="a2"><p><a href="Animation.html">Animation</a></p></div>
        <div id="a3"><p><a href="Creating a app.html">Creating an app</a></p></div>
        <div id="a4"><p><a href="minigame.html">Mini Game</a></p></div>
        <div id="a5"><p><a href="Gallery.html">Gallery</a></p></div>
        <div id="a6"><p><a href="Be Creative.html">Be Creative</a></p></div>
        <div id="a7"><p><a href="About me.html">About me</a></p></div>
</center>
</body>

＆＃13;

带有数字的原始版本（只是为了让您看到问题）：

＆＃13;

body {
color: black;
background-color: black;
margin: 0;
}

#1{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}

＆＃13;

<body> 
    <h2><center><a href="Digital Portfolio.html"><font color="orange" size="7">Navigation</font></a></center></h2>
    <center>
            <div id="a1"><a href="The Online World.html">The Online World</a></div>
            <div id="a2"><p><a href="Animation.html">Animation</a></p></div>
            <div id="a3"><p><a href="Creating a app.html">Creating an app</a></p></div>
            <div id="a4"><p><a href="minigame.html">Mini Game</a></p></div>
            <div id="a5"><p><a href="Gallery.html">Gallery</a></p></div>
            <div id="a6"><p><a href="Be Creative.html">Be Creative</a></p></div>
            <div id="a7"><p><a href="About me.html">About me</a></p></div>
    </center>
    </body>

＆＃13;

Answer 2

虽然id可以技术上是数字（在HTML5中），但由于向后兼容HTML4 spec，它在浏览器中得到了奇怪的支持。

ids should start with a letter for compatibility

<div id="a1"><a href="The Online World.html">The Online World</a></div>

和

#a1{
    width: 7%;
    margin: 50px auto 50px auto;
    padding: 2%;
    background-color: white;
    box-shadow: 0px 0px 1px rgba(0,0,0,.90);
    position: relative;
}

works as expected

Answer 3

你的意思是这样吗？

<强> HTML

<body> 
<h2><center><a href="Digital Portfolio.html"><font color="orange" size="7">Navigation</font></a></center></h2>
<center>
    <div class="background-box" >
        <div id="One"><a href="The Online World.html">The Online World</a></div>
        <div id="2"><p><a href="Animation.html">Animation</a></p></div>
        <div id="3"><p><a href="Creating a app.html">Creating an app</a></p></div>
        <div id="4"><p><a href="minigame.html">Mini Game</a></p></div>
        <div id="5"><p><a href="Gallery.html">Gallery</a></p></div>
        <div id="6"><p><a href="Be Creative.html">Be Creative</a></p></div>
        <div id="7"><p><a href="About me.html">About me</a></p></div>
    </div>
</center>
</body

<强> CSS

   body {
color: black;
background-color: black;
margin: 0;
}

#One{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}

你不应该使用ID的数字。替换为字符，你会没事的。

Fiddle

Answer 4

您还可以设置div的样式以减少标记。然后根据需要设置每个链接的样式。 http://codepen.io/dfrierson2/pen/RNoWZe

body {
color: #fff;
background-color: pink;
margin: 0;
}

div {

  width: 7%;
  background: #fff;
}

#1{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}

<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="SiteIcon.ico">
<title>Navigation</title>
<link rel="stylesheet" href="CSS/style for SubNav.css">
</head>
<body> 
<h2><center><a href="Digital Portfolio.html"><font color="orange" size="7">Navigation</font></a></center></h2>
<center>
        <div id="1"><a href="The Online World.html">The Online World</a></div>
        <div id="2"><p><a href="Animation.html">Animation</a></p></div>
        <div id="3"><p><a href="Creating a app.html">Creating an app</a></p></div>
        <div id="4"><p><a href="minigame.html">Mini Game</a></p></div>
        <div id="5"><p><a href="Gallery.html">Gallery</a></p></div>
        <div id="6"><p><a href="Be Creative.html">Be Creative</a></p></div>
        <div id="7"><p><a href="About me.html">About me</a></p></div>
</center>
</body>
</html>

我的CSS不适用于带ID的元素

4 个答案: