1

我设置了一个具有固定位置的特定背景颜色的侧边栏，以便在您向下滚动页面时它会保持原位。到目前为止一切似乎都很好，我唯一修改的是去掉列表样式类型，这样侧栏中就不会出现项目符号了。我不知道，也许我一路上搞砸了一些东西，但我就是不知道在哪里！

现在，链接出现在标题旁边，没有背景颜色，并且它们不在固定位置。

有任何想法吗？

<!--main container,
gives content area width and centers it horizontally--> <!--width of wrap will be subtracted from width of the browser window (its container)--> #wrap {
  width: 750px;
  margin: 0 auto;
  background: #FFFFFF;
  position: relative;
}
h1 {
  margin: 0;
  background: #cc9
}
#nav {
  padding: 5px 10px;
  background: #FFF;
}
#main {
  float: left;
  width: 480px;
  padding: 10px;
  background: #FFF;
}
h2 {
  margin: 0 0 1em;
}
<!--Setting position to fixed and margin-left will keep sidebar scrolling on page--> #sidebar {
  float: right;
  width: 200px;
  padding: 40px;
  background: #99c;
  position: fixed;
  margin-left: 520px;
}
#footer {
  clear: both;
  padding: 5px 10px;
  background: #cc9;
}
#footer p {
  margin: 0;
}
#nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#nav li {
  display: inline;
  margin: 0;
  padding: 0;
}
#sidebar ul {
  list-style-type: none;
}
<!--links--> a:link {
  color: black
}
a:visited {
  color: blue
}
a:hover {
  font-weight: bold
}
a:active {
  font-style: italic
}
.topnavlink {
  clear: left;
  margin-left: 1em;
  font-size: 1.1em
}
.sidenavlink {
  font-size: 1em
}
.footer {
  clear: left;
}
<DIV id="sidebar">
  <ul>
    <li><a href="http://www.google.com">Google</a>
    </li>
    <li>
      <a href="mailto:something@google.edu">Email Me</a>
    </li>
</DIV>
</DIV>

<DIV id="footer">
  <P>&copy;Something 2012</P>
</DIV>
</DIV>
</BODY>

</HTML>

4

3 回答 3

2

评论是 CSS shoule
/* comment */

也不

<!--comment-->


是
你的 html 似乎有一些额外的关闭</div>
不确定那是不是因为它是更多代码的一部分

于 2012-05-31T01:45:29.180 回答
2

您需要结束标签，</UL>并且底部有额外的结束 div

<DIV id="sidebar">
            <ul>
                <li><a href="http://www.google.com">Google</a>
                </li>
                <li>
                <a href="mailto:something@google.edu">Email Me</a>
                </li>
            </UL>
        </DIV>

        <DIV id="footer">
            <P> &copy;Something 2012</P>
        </DIV>

你评论错误的方式应该是这样的

/*main container, gives content area width and centers it horizontally
width of wrap will be subtracted from width of the browser window (its container)*/
#wrap {
width:750px;
margin:0 auto;
background:#FFFFFF;
position: relative;
}

h1 {
margin:0;
background:#cc9
}

#nav {
padding:5px 10px;
background:#FFF;
}

#main {
float:left;
width:480px;
padding:10px;
background:#FFF;
}

h2 {
margin:0 0 1em;
}

/*Setting position to fixed and margin-left will keep sidebar scrolling on page */
#sidebar {
float:right;
width:200px;
padding:40px;
background:#99c;
position:fixed;
margin-left:520px;
}

#footer {
clear:both;
padding:5px 10px;
background:#cc9;
}

#footer p {
margin:0;
}

#nav ul {
margin:0;
padding:0;
list-style:none;
}

#nav li {
display:inline;
margin:0;
padding:0;
}

#sidebar ul {
list-style-type:none;
}


<!--links-->
a:link {
    color: black
}
a:visited {
color: blue
}
a:hover {
font-weight: bold
}
a:active {
font-style: italic
}
.topnavlink {
clear: left; margin-left: 1em; font-size: 1.1em
}
.sidenavlink {
font-size: 1em
}
.footer {
clear: left;
}
于 2012-05-31T01:49:06.603 回答
0

你<ul>用</div>而不是结束你的</ul>。纠正这一点，一切都应该到位。

于 2012-05-31T01:40:21.037 回答