5

由于人们代码的许多变化，我正在努力寻找我的问题的直接答案。

我想我的代码可能非常混乱，因为我正在尝试为我的合作伙伴构建一个网站，而且速度很快（我只有几个小时的 Dreamweaver 经验，仅此而已）！

无论如何，我有一个固定宽度的网站，其中一列中大约有 6 个单独的 div，所有这些都包含在我的背景颜色的网页大小的 div 中。

无论如何，当我尝试为页脚添加边框时，它不会显示在浏览器中。我只是 wan 1px 将“主” div 与页脚分开，它不会出现。这对于我的导航 div 也是一样的。

      body{
               color:#00000;
               margin-left:0px;
               margin-right:0px;
               margin-top:0px;
               margin-bottom:0px;
               }


       #body{
       background-color:#000000;
       }


       #header{
               width:800px; /* The width is fixed by pixels */
               height:150px; /* The height is fixed by pixels*/
               color:#fff;
               margin-left:auto;
               margin-right:auto;
               margin-top:0px;
               margin-bottom:0px;
        }

        #navigation {
               width:798px;
               height:51px;
               margin-left:auto;
               margin-right:auto;
               margin-top:0px;
               margin-bottom:0px;
               border-style:solid; /*Selecting solid made the border appear*/
               border-left:1px;
               border-right:1px;
               border-top:0px;
               border-bottom:1px;
               border-color:#000000;    
               text-align:center;    
               background-color:ffffff;

        }

        #main {
               width:798px; /* The width is fixed by pixels */
               height:800px; /* The height is fixed by pixels*/
               color:#fff;
               background-color:#fff;
               margin-left:auto;
               margin-right:auto;
               margin-top:0px;
               margin-bottom:0px;
               border-style:solid; /*Selecting solid made the border appear*/
               border-left:1px;
               border-right:1px;
               border-top:0px;
               border-bottom:0px;
               border-color:#000000;
               text-align:center;

        }

        #footer {
                                      /*Styling for any element with the id="container" */
                      width:798px; /* The width is fixed by pixels */
                       height:100px; /* The height is fixed by pixels*/
                       color:#fff;
                        background-color:#fff;
                        margin-left: auto;
                        margin-right:auto;
                        border-style:solid;
                        border-left:1px;
                        border-right:1px;
                        border-bottom:1px;
                        border-top:1px;
                        border-color:#000000;
                        }

                        #Facebook {
                        float:right;
                        }

                        #Twitter {
                        float:right;
                        }

                        #LinkedIn {
                        float:right;
                        }




      </style>
 </head> 
 <body>
 <div id="body">
 <div id="header">
 <a href="Home.html"><img src="Images/Logo.jpg" alt="Ruth Fifer Jewellery"> </a>
 </div>

   <div id="main">
   <div id="navigation">
   <br />
 </div>
   <br />
   <br />
   <img src="Images/Home Image.jpg" />
 </div>
 <div id="footer">

     <a href="https://www.facebook.com/ruth.fifer.5?fref=ts" target="_blank"> <img src="Images/facebook.png" alt="Facebook" id="Facebook"/></a>
   <a href="https://twitter.com/martynjakins" target="_blank"> <img src="Images/twitter.png" alt="Twitter" id="Twitter"/></a>
   <a href="http://www.linkedin.com/profile/view?id=225071408&trk=tab_pro" target="_blank"><img src="Images/linkedin.png" alt="LinkedIn" id="LinkedIn"/></a></div>
 </div>
 </body>

如果有人能够提供帮助，那就太好了，因为我觉得由于我的经验不足，我可能正在使用相互冲突的代码，但现在没有时间学习所有内容，而是会回到我有更多的地方是时候调整事情了。

谢谢，

马丁

4

3 回答 3

6

1）<!DOCTYPE><html><head>在代码的开头写标签。

2）</html>在代码末尾写标签。

和使用：

边框：1px 0px 实心#000000；

它会解决你的问题。查看http://jsfiddle.net/p2269/1/我按照我的解释编写了代码，它显示了边界。

于 2013-06-01T15:29:59.303 回答
1

您的代码不完整，我认为...

这里有一个工作示例。

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
 body{
               color:#00000;
               margin-left:0px;
               margin-right:0px;
               margin-top:0px;
               margin-bottom:0px;
               }


       #body{
       background-color:green;
       }


       #header{
               width:800px; /* The width is fixed by pixels */
               height:150px; /* The height is fixed by pixels*/
               color:#fff;
               margin-left:auto;
               margin-right:auto;
               margin-top:0px;
               margin-bottom:0px;
        }

        #navigation {
               width:798px;
               height:51px;
               margin-left:auto;
               margin-right:auto;
               margin-top:0px;
               margin-bottom:0px;
               border-style:solid; /*Selecting solid made the border appear*/
               border-left:1px;
               border-right:1px;
               border-top:0px;
               border-bottom:1px;
               border-color:#000000;    
               text-align:center;    
               background-color: yellow;

        }

        #main {
               width:798px; /* The width is fixed by pixels */
               height:800px; /* The height is fixed by pixels*/
               color:#fff;
               background-color:blue;
               margin-left:auto;
               margin-right:auto;
               margin-top:0px;
               margin-bottom:0px;
               border-style:solid; /*Selecting solid made the border appear*/
               border-left:1px;
               border-right:1px;
               border-top:0px;
               border-bottom:0px;
               border-color:#000000;
               text-align:center;

        }

        #footer {
                                      /*Styling for any element with the id="container" */
                      width:798px; /* The width is fixed by pixels */
                       height:100px; /* The height is fixed by pixels*/
                       color:#fff;
                        background-color:red;
                        margin: 0 auto;
                       border-top: 3px solid white;
                        }

                        #Facebook {
                        float:right;
                        }

                        #Twitter {
                        float:right;
                        }

                        #LinkedIn {
                        float:right;
                        }




      </style>
 </head> 
 <body>
 <div id="body">

    <div id="header">&nbsp;</div>

   <div id="main">
       <div id="navigation">
        <br />
       </div>
   </div>

   <div id="footer">&nbsp;</div>

 </div>
 </body>
</html>
于 2013-06-01T15:18:33.543 回答
0

当包含元素（在您的情况下 id=footer 的 div）仅包含浮动元素（facebook、twitter 和linkedin 图标）时，某些浏览器会将其视为零像素高。您应该在页脚选择器中添加两条 CSS 规则：值为 auto 的 overflow 属性，值为 100% 的 width 属性，以显示该边框。

于 2020-08-23T06:57:57.310 回答