Question

由于人们的代码有很多变化，我很难找到问题的直接答案。

我想我的代码可能非常混乱，因为我正在尝试为我的合作伙伴建立一个网站，而且很快（我只有几个小时的Dreamweaver体验，就是这样）！

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

无论如何，当我尝试向页脚添加边框时，它不会显示在浏览器中。我只想1px将'main'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>

如果有人能够帮助它会很棒，因为我感觉我可能因为我的经验不足而使用冲突的代码，但现在没有时间学习所有内容而是会回到某一点我有更多的时间来调整事情。

谢谢，

马丁

Answer 1

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

2）在代码的末尾写下</html>标记。

AND USE：

border：1px 0px solid＃000000;

它将解决您的问题。看看http://jsfiddle.net/p2269/1/我按照我的解释编写了代码并显示了边框。

Answer 2

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

这里有一个有效的例子。

<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>

Answer 3

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

Div边框没有显示

3 个答案: