如何在页面周围放置边框

时间：2022-01-02 19:38:04

I need your help. Trying to work out how i can put a border around my page. Here is my html and css

我需要你的帮助。试图弄清楚如何在我的页面周围放置边框。这是我的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;
      }

Thank you x

谢谢你

5 个解决方案

#1

5  

body {
border: 5px solid red;
}

#2

3  

I don't think <main> is a valid tag. Also, make sure to close your tags.

我不认为

是一个有效的标签。此外,请务必关闭您的代码。

Replace this:

</body>
</html>

With this:

</div>
</div>
</body>
</html>

And replace this:

并替换这个:

<main id="main">

With this:

<div id="main">

Lastly, replace this:

最后,替换这个:

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

     }

Wtih this:

#main    {
     background-color: #FFFFFF;
     width: 280px;
     margin: 50px auto;
     border: 1px solid red; /* width, style, colour */
     }

And change the border property accordingly.

并相应地更改边框属性。

If you want a border around the entire page, put that border property within body{} in your CSS.

如果要在整个页面周围放置边框,请将该边框属性放在CSS中的body {}中。

#3

1  

This is all you need to do:

这就是你需要做的:

html{
    border: solid;
}

#4

0  

You will need to adjust the properties to match your desired result, but this should place a border around your page.

您需要调整属性以匹配所需的结果,但这应该在页面周围放置边框。

#main {
  border: 1px solid red;
}

#5

-1  

I think, if width of your main container 280px and you want to put a border to your page (not to your all container div); your body class should be like this/

我想,如果你的主容器280px的宽度,你想要一个边框到你的页面(而不是你的所有容器div);你的身体类应该像这样/

body {
  border: 5px solid red;
  width:100%;
  height:100%;
  display:block;
  overflow:hidden;
}

#1

5  

body {
border: 5px solid red;
}

#2

3  

I don't think <main> is a valid tag. Also, make sure to close your tags.

我不认为

是一个有效的标签。此外,请务必关闭您的代码。

Replace this:

</body>
</html>

With this:

</div>
</div>
</body>
</html>

And replace this:

并替换这个:

<main id="main">

With this:

<div id="main">

Lastly, replace this:

最后,替换这个:

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

     }

Wtih this:

#main    {
     background-color: #FFFFFF;
     width: 280px;
     margin: 50px auto;
     border: 1px solid red; /* width, style, colour */
     }

And change the border property accordingly.

并相应地更改边框属性。

If you want a border around the entire page, put that border property within body{} in your CSS.

如果要在整个页面周围放置边框,请将该边框属性放在CSS中的body {}中。

#3

1  

This is all you need to do:

这就是你需要做的:

html{
    border: solid;
}

#4

0  

You will need to adjust the properties to match your desired result, but this should place a border around your page.

您需要调整属性以匹配所需的结果,但这应该在页面周围放置边框。

#main {
  border: 1px solid red;
}

#5

-1  

I think, if width of your main container 280px and you want to put a border to your page (not to your all container div); your body class should be like this/

我想,如果你的主容器280px的宽度,你想要一个边框到你的页面(而不是你的所有容器div);你的身体类应该像这样/

body {
  border: 5px solid red;
  width:100%;
  height:100%;
  display:block;
  overflow:hidden;
}
标签：

相关文章