CSS 如何在页面周围放置边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3175009/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can i put a border around the page
提问by user380603
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
谢谢你
回答by rafaelcidade
body {
border: 5px solid red;
}
回答by SuperKael
This is all you need to do:
这就是您需要做的所有事情：
html{
border: solid;
}
回答by Sam Nabi
I don't think <main>is a valid tag. Also, make sure to close your tags.
我不认为<main>是一个有效的标签。另外，请确保关闭您的标签。
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.
如果你想要一个围绕整个页面的边框，把这个边框属性body{}放在你的 CSS 中。
回答by rts
try this, wouldnt say its the proper way tho
试试这个，不会说它是正确的方法
body {
background-color: green;
border: 5px solid white;
padding: 100%;
margin: 0;
}
回答by Jason McCreary
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;
}
