logo标签列表

如何在页面周围添加边框？

css
7

我正在尝试弄清楚如何在我的页面周围加一个边框。这是我的HTML和CSS：

<html>
<head>
<title>Royal Aura club</title>
<link rel="stylesheet" type="text/css" href="restyle.css" / >
</head>
<body>
<main id="main">
<div id="header">


<h1> Royal Aura club</h1>

<div id="nav">
         <div class="navitem"><a href="#">Home</a></div>
         <div class="navitem"><a href="#">Restaurant </a></div>
         <div class="navitem"><a href="#">Gallery</a></div>
         <div class="navitem"><a href="#">Guest list</a></div>
</div>       <div class="navitem"><a href="#">Job Vancancies</a></div>
            
<div id="content">  
            
            <div id="textblock">
            <h2>Why Royal Aura?</h2>
            
            <p>
            Royal Aura club and restaurant is located in Mayfair just a walk away from the Ritz.  
            We will guarantee you will have a ball of a time with our brilliant DJ playing the tunes while your sipping cocktails away and dancing the night away.
            <p>
            Aura is a glamorous and sophisticated club that has a beautiful decor to get the mood. If you fancy doing VIP in style drop us a e-mail, we will be glad to help. Not to mention our fabulous food dishes we serve are to die for.  
            Please make sure you e-mail us 24 hours before the day you want to come and party or dine.
            </p>
            
</div>



        



</body>
</html>

Css-


body     {
    front-family: verdana, arial, sans-serif;
    margin:0;
    padding: 0;
    background-color: #FFFDED;
    border:0px;
    

     }




#main    {
     background-color: #FFFFFF;
     width: 280px;
     margin: 50px auto;
     border: 0px solid;
     
     } 

#header  {
    
     border-bottom:none
    

     } 

#content {
     padding: 6em 1em;
         border: none;
     margin: 20px;
     }

#footer  {
    
        } 






h1  {
    
    font: bold 1.5em Tahoma, arial, sans-serif;
    color: #826BA9;
    font-style: italic;
    background-image: url(relogo.jpg);
    background-repeat: no-repeat;
    padding: 1em 1em 1em 120px;);
    background-repeat: no-repeat;
    padding: 1em 1em 1em 100px;
    }



.navitem {

        float: left;
        border-right: 3px solid #999999;
        border-top:1px solid #999999;
        text-align: left;
        
    }


#textblock   {
       background-color: #D4CAE2;   
       width: 300px;
       border: 4px solid #000000;
       padding: 10px 7px;
       float: left;
       font-size: 110%;
       text-align: left;
       height: 400px
        }


a:link {  
    text-decoration: none;
        color: #000000; 
        padding-left: 0.em;
    padding-right: 0.5em;
    float: right;
    
        }   




a:visited {
      text-decoration: none;
      color: #826BA9;
      padding-left: 0.5em;
      padding-right: 0.5em;
      }

a:hover   {
      text-decoration: none;
      color: #826BA9;
      background-color: #F4E8F0;
      display: block;
      }
请尽可能只发布相关部分。此外，边框应该是什么样的？请给一些细节。 - Pekka
抱歉，我是这个网站的新手。我只想让整个页面有一个黑色边框，以便一切都可以居中。这样说你明白吗？ - user380603
你是指整个页面还是特定的部分？ - Sarfraz
5个回答
11
body {
border: 5px solid red;
}
2
当向下滚动时，似乎会导致边框粘在屏幕顶部！ - esoterik
@esoterik 你可以通过添加 height: auto; 来解决这个问题。 - David Martins
5
这是您需要做的全部内容：
html{
    border: solid;
}
3
我认为<main>不是一个有效的标签。此外，请确保关闭您的标签。
替换为此内容：
</body>
</html>

使用这个代码：
</div>
</div>
</body>
</html>

并替换为以下内容：
<main id="main">

用这个：
<div id="main">

最后，替换这个内容：
#main    {
     background-color: #FFFFFF;
     width: 280px;
     margin: 50px auto;
     border: 0px solid;

     }

使用以下内容：
#main    {
     background-color: #FFFFFF;
     width: 280px;
     margin: 50px auto;
     border: 1px solid red; /* width, style, colour */
     }

根据需要修改边框属性。

如果你想要整个页面有一个边框，将该边框属性放在CSS中的body{}内部。

2
是的，有一个叫做 main 的标签。请参阅 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/main - Mateusz Nowak
3

尝试这个方法，虽然不一定是正确的方式。

body {
    background-color: green;
    border: 5px solid white;
    padding: 100%;
    margin: 0;
}
-1
你需要调整属性以匹配所需的结果，但这应该会在页面周围放置一个边框。
#main {
  border: 1px solid red;
}
如果 #main 比文档高度小会发生什么？ - Pekka
它起作用了，但是只有页面的一半有边框，而不是全部。是底部的一半。我该怎么办？ - user380603
你看到你的#main元素不是一个div了吗？我猜这是个打字错误。如果你纠正了它并验证了页面的其余部分，事情会变得更好。 - Jason McCreary
是的，我注意到了。我已经更改了它。如果在页面底部放置一个</div>，但没有成功。 - user380603
你的HTML和CSS存在几个问题。如果不知道确切的目标，很难指导正确的方向。Sam提供了一个良好的起点。 - Jason McCreary
显示剩余3条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接