ウェブページhtmlに罫線を追加する最も良い方法は？

Question

私はページ全体を通して一貫性を持たせたいと考えています。これを行う最も良い方法は何だと思いますか？私は下のイメージを追加しました。赤い部分を空白にして、メニューの枠線と残りの部分をすべて切り取って、すべてが整列して中央に見えるようにしました。おかげでミル

https://jsfiddle.net/q97kob5b/

HTML

body { 
 
font-family: verdana; 
 
background: white; 
 
color: black; 
 
} 
 
.menu_div { 
 
background-color: #333; 
 
width: 100%; 
 
} 
 
ul { 
 
list-style-type: none; 
 
margin: 0 auto; 
 
display: table; 
 
padding: 0; 
 
z-index: 100; 
 
overflow: hidden; 
 
} 
 
li { 
 
float: left; 
 
} 
 
li a, .dropbtn { 
 
display: inline-block; 
 
color: white; 
 
text-align: center; 
 
padding: 14px 16px; 
 
text-decoration: none; 
 
} 
 
li a:hover, .dropdown:hover .dropbtn { 
 
background-color: black; 
 
} 
 
li.dropdown { 
 
display: inline-block; 
 
} 
 
.dropdown-content { 
 
display: none; 
 
position: absolute; 
 
background-color: #f9f9f9; 
 
min-width: 160px; 
 
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
z-index: 100; 
 
} 
 
.dropdown-content a { 
 
color: black; 
 
padding: 12px 16px; 
 
text-decoration: none; 
 
display: block; 
 
text-align: left; 
 
} 
 
.dropdown-content a:hover { 
 
background-color: #f1f1f1 
 
} 
 
.dropdown:hover .dropdown-content { 
 
display: block; 
 
} 
 
@keyframes fade { 
 
0% { 
 
opacity: 0; 
 
} 
 
11.11% { 
 
opacity: 1; 
 
} 
 
33.33% { 
 
opacity: 1; 
 
} 
 
44.44% { 
 
opacity: 0; 
 
} 
 
100% { 
 
opacity: 0; 
 
} 
 
} 
 
.fadein { 
 
position: absolute; 
 
height: 102px; 
 
width: 50px; 
 
outline: 1px solid blue; 
 
} 
 
.fadein img { 
 
position: absolute; 
 
left: 0; 
 
right: 0; 
 
opacity: 0; 
 
animation-name: fade; 
 
animation-duration: 9s; 
 
animation-iteration-count: infinite; 
 
} 
 
.fadein img:nth-child(1) { 
 
animation-delay: 0s; 
 
} 
 
.fadein img:nth-child(2) { 
 
animation-delay: 3s; 
 
} 
 
.fadein img:nth-child(3) { 
 
animation-delay: 6s; 
 
} 
 
.menu_div { 
 
position: relative; 
 
z-index: 0; 
 
border: dashed; 
 
height: 2.9em; 
 
margin-bottom: 0em; 
 
margin-top: 0em; 
 
z-index: 1000; 
 
} 
 
.fadein { 
 
position: relative; 
 
z-index: 3; 
 
background:; 
 
width: 100%; 
 
left: 1px; 
 
top: 0em; 
 
} 
 
.fadein img { 
 
margin: 0 auto; 
 
width: 100%; 
 
max-width: 4060px; 
 
min-width: 900px; 
 
max-height: 500%; 
 
} 
 
.tech-slideshow { 
 
height: 200px; 
 
max-width: 800px; 
 
margin: 0 auto; 
 
position: relative; 
 
overflow: hidden; 
 
transform: translate3d(0, 0, 0); 
 
} 
 
.tech-slideshow > div { 
 
height: 100px; 
 
width: 2526px; 
 
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/collage.jpg); 
 
position: absolute; 
 
top: 0; 
 
left: 0; 
 
height: 100%; 
 
transform: translate3d(0, 0, 0); 
 
} 
 
.tech-slideshow .mover-1 { 
 
animation: moveSlideshow 12s linear infinite; 
 
} 
 
.tech-slideshow .mover-2 { 
 
opacity: 0; 
 
transition: opacity 0.5s ease-out; 
 
background-position: 0 -200px; 
 
animation: moveSlideshow 15s linear infinite; 
 
} 
 
.tech-slideshow:hover .mover-2 { 
 
opacity: 1; 
 
} 
 
@keyframes moveSlideshow { 
 
100% { 
 
transform: translateX(-66.6666%); 
 
} 
 
} 
 
form { 
 
background-color: #f7f7f7; 
 
border: 2px solid black; 
 
/* Just to center the form on the page */ 
 
margin: auto; 
 
width: 1000px; 
 
height: 500px; 
 
/* To see the limits of the form */ 
 
padding: 7em; 
 
border: 400px solid white; 
 
border-radius: 10em; 
 
} 
 
div + div { 
 
margin-top: 0.5em; 
 
} 
 
label { 
 
/* To make sure that all label have the same size and are properly align */ 
 
display: inline-block; 
 
width: 130px; 
 
text-align: left; 
 
} 
 
input, textarea { 
 
/* To make sure that all text field have the same font settings 
 
    By default, textarea are set with a monospace font */ 
 
font: 0.9em verdana; 
 
/* To give the same size to all text field */ 
 
width: 300px; 
 
-moz-box-sizing: border-box; 
 
box-sizing: border-box; 
 
/* To harmonize the look & feel of text field border */ 
 
border: 1px solid; 
 
} 
 
input:focus, textarea:focus { 
 
/* To give a little highligh on active elements */ 
 
border-color: #000; 
 
} 
 
textarea { 
 
    /* To properly align multiline text field with their label */ 
 
    vertical-align: top  
 
    /* To give enough room to type some text */ 
 
    height: 20em; 
 
/* To allow users to resize any textarea vertically 
 
    It works only on Chrome, Firefox and Safari */ 
 
resize: vertical; 
 
} 
 
.button { 
 
/* To position the buttons to the same position of the text fields */ 
 
padding-left: 400px; /* same size as the label elements */ 
 
} 
 
button { 
 
/* This extra magin represent the same space as the space between 
 
    the labels and their text fields */ 
 
margin-left: .4em; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Bewerbungsformular</title> 
 
<link rel="stylesheet" href="index.css" type="text/css" /> 
 
</head> 
 
<body> 
 
<h1 align="center"> <a href="index.html"><img src="logo.png" alt="A.Willi A.G" /></a> </h1> 
 
<div class="menu_div"> 
 
    <ul> 
 
    <li><a href="index.html">Home</a></li> 
 
    <li class="dropdown"> <a href="#" class="dropbtn">Bewerber</a> 
 
     <div class="dropdown-content"> <a href="#">Info</a> <a href="#">Jobs</a> </div> 
 
    </li> 
 
    <li class="dropdown"><a href="#" class="dropbtn">Kunde</a> 
 
     <div class="dropdown-content"> <a href="personalverleih.html">Personalverleih</a> <a href="toolrental.html">Werkzeuge Mieten</a> <a href="referenzen.html">Referenzen</a> <a href="quali.html">Qulität, Sicherheit und Weiterbildung</a> </div> 
 
    </li> 
 
    <li><a href="kontakt.html">Kontakt</a></li> 
 
    </ul> 
 
</div> 
 
<div class="fadein"> <img src="welder1.png"> <img src="welder2.png"> <img src="welder3.png"> </div> 
 
<div class="fadein img"> </div> 
 
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" method="post"> 
 
<div> 
 
    <h2>Bewerbungsformular</h2> 
 
    <label for="name">Vorname*</label> 
 
    <input type="text" id="name" name="user_name"> 
 
</div> 
 
<div> 
 
    <label for="mail">Nachname*</label> 
 
    <input type="email" id="mail" name="user_email"> 
 
</div> 
 
<div> 
 
    <label for="msg">E-Mail*</label> 
 
    <textarea id="msg" name="user_message"></textarea> 
 
</div> 
 
<div> 
 
    <label for="msg">Telefon*</label> 
 
    <textarea id="msg" name="user_message"></textarea> 
 
</div> 
 
<div> 
 
    <label for="msg">Nationalität*</label> 
 
    <textarea id="msg" name="user_message"></textarea> 
 
</div> 
 
<div> 
 
    <label for="msg">Alter*</label> 
 
    <textarea id="msg" name="user_message"></textarea> 
 
</div> 
 
<div> 
 
    <label for="msg">Beruf*</label> 
 
    <textarea id="msg" name="user_message"></textarea> 
 
</div> 
 
<div> 
 
<form action="upload.php" method="post" enctype="multipart/form-data"> 
 
    Lebenslauf oder Bewerbung und Beilagen* 
 
    <input type="file" name="fileToUpload" id="fileToUpload"> 
 
    <input type="submit" value="Upload Image" name="submit"> 
 
</form> 
 
</div> 
 
<div class="button"> 
 
    <button type="submit">Send your message</button> 
 
</div> 
 
</form> 
 
</body> 
 
</html>

Answer 1

ラップするだろうこれを行うための最善の方法コンテナ内にコンテンツを配置し、これの最大幅（70％）を設定すると、このコンテナに罫線を追加する場合は、そのようにすることができます。

そして最後にdiv要素を閉じて、あなたのCSSに以下を追加し、あなたが/含ま中心にしたい任意のコンテンツの前に><div class="container"を追加します。

.container { 
    max-width: 70%; 
    margin-left: auto; 
    margin-right: auto; 
} 

Answer 2

は

<div id="wrapper"> 
    your content here 
</div> 


/* add this to css */ 
#wrapper { 
    width:960px; /*put here the width you want*/ 
    margin: 0 auto; 
} 
/*-----*/ 

内のページをラップ