居中 "Contact Box" 并使其响应
Centering a "Contact Box" & Making it Responsive
我正在尝试在我的网站上创建联系页面。我希望联系表(又名 "name,email,message" 框)居中并保持在页面居中,即使 window 大小已调整。但是,我 运行 遇到了一些问题。
我让联系人框居中,但是当我为我的导航栏(我在所有其他页面上都有)实现代码时,它完全改变了联系人框的位置,而是将它一直拉到最左边,也就是导航栏所在的位置。
我假设在我的导航条码中的某处它会调整其他所有内容的位置,但是因为我对基本 HTML、CSS、&Javascript 我无法找出这背后的原因。
如果有人能提供任何关于导致 this/how 修复它的见解,我们将不胜感激!谢谢!
下面是我的CSS和HTML:
body {
font-family: 'Raleway', sans-serif;
background:url("../images/example.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
/*CONTACT BOX*/
form {
max-width:420px;
margin:200px auto;
}
.feedback-input {
color:white;
font-family: "Avenir", Arial, sans-serif;
/* font-weight:500;*/
font-size: 18px;
border-radius: 5px;
line-height: 22px;
background-color: transparent;
border:2px solid #CC6666;
transition: all 0.3s;
padding: 13px;
margin-bottom: 15px;
width:100%;
box-sizing: border-box;
outline:0;
}
.feedback-input:focus { border:2px solid #CC4949; }
textarea {
height: 150px;
line-height: 150%;
resize:vertical;
}
[type="submit"] {
font-family: Arial, Helvetica, sans-serif;
width: 100%;
background:#CC6666;
border-radius:5px;
border:0;
cursor:pointer;
color:white;
font-size:24px;
padding-top:10px;
padding-bottom:10px;
transition: all 0.3s;
margin-top:-4px;
font-weight:700;
}
[type="submit"]:hover { background:#CC4949; }
/*NAV BAR*/
/*style of the button*/
.dropbtn{
background-color: rgba(255,255,255,0);
color: white;
/* margin:0 auto;*/
font-size: 16px;
border: none;
cursor: pointer;
}
/*the div that controls the position of menu content*/
.dropdown {
position: fixed;
left: 0;
top: 0;
display: inline-block;
}
/*dropdown content*/
.dropdown-content {
/*font-family: ;*/
display: none;
/* right: 0;*/
background-color: #f9f9f9;
max-width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/*links inside of dropdown*/
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/*change color of links on hover*/
.dropdown-content a:hover {background-color:#ffe6f0}
/*show menu on hover*/
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:active .dropdown-content{
background-color:red;
}
/*change the background color of dropdown button when content is shown*/
.dropdown:hover .dropbtn {
background-color: #ff3385;
}
<!DOCTYPE html>
<html>
<title>Em || Contact</title>
<link rel="stylesheet" href="../css/contact.css">
<body>
<div class="dropdown">
<button class="dropbtn"><font size="15"> ☰ </font></button>
<div class="dropdown-content" style="left:0;">
<a href="../index.html" class="active">Home ☜</a>
<a href="../html/about.html" class="active">About ☺</a>
<a href="../html/contact.html">Contact ☏</a>
<a href="#">Portfolio ♡</a>
</div>
<form action="mailto:example@gmail.com" method="post" enctype="text/plain">
<input type="text" name="name" class="feedback-input" placeholder="Name" />
<input type="text" name="email" class="feedback-input" placeholder="Email" />
<textarea name="text" class="feedback-input" placeholder="Comment"></textarea>
<input type="submit" value="SUBMIT"/>
</form>
<link href="http://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" />
</body>
</html>
您忘记为 <div class="dropdown">
添加结尾 </div>
。这是一个固定的 html:
仅供参考:您始终可以在线验证生成的 html:https://validator.w3.org/ 以检查您的代码是否正确。
body {
font-family: 'Raleway', sans-serif;
background:url("../images/example.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
/*CONTACT BOX*/
form {
max-width:420px;
margin:200px auto;
border: 1px solid red;
}
.feedback-input {
color:white;
font-family: "Avenir", Arial, sans-serif;
/* font-weight:500;*/
font-size: 18px;
border-radius: 5px;
line-height: 22px;
background-color: transparent;
border:2px solid #CC6666;
transition: all 0.3s;
padding: 13px;
margin-bottom: 15px;
width:100%;
box-sizing: border-box;
outline:0;
}
.feedback-input:focus { border:2px solid #CC4949; }
textarea {
height: 150px;
line-height: 150%;
resize:vertical;
}
[type="submit"] {
font-family: Arial, Helvetica, sans-serif;
width: 100%;
background:#CC6666;
border-radius:5px;
border:0;
cursor:pointer;
color:white;
font-size:24px;
padding-top:10px;
padding-bottom:10px;
transition: all 0.3s;
margin-top:-4px;
font-weight:700;
}
[type="submit"]:hover { background:#CC4949; }
/*NAV BAR*/
/*style of the button*/
.dropbtn{
background-color: rgba(255,255,255,0);
color: white;
/* margin:0 auto;*/
font-size: 16px;
border: none;
cursor: pointer;
}
/*the div that controls the position of menu content*/
.dropdown {
position: fixed;
left: 0;
top: 0;
display: inline-block;
z-index: 100;
}
/*dropdown content*/
.dropdown-content {
/*font-family: ;*/
display: none;
/* right: 0;*/
background-color: #f9f9f9;
max-width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/*links inside of dropdown*/
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/*change color of links on hover*/
.dropdown-content a:hover {background-color:#ffe6f0}
/*show menu on hover*/
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:active .dropdown-content{
background-color:red;
}
/*change the background color of dropdown button when content is shown*/
.dropdown:hover .dropbtn {
background-color: #ff3385;
}
<!DOCTYPE html>
<html>
<title>Em || Contact</title>
<link rel="stylesheet" href="../css/contact.css">
<body>
<div class="dropdown">
<button class="dropbtn"><font size="15"> ☰ </font></button>
<div class="dropdown-content" style="left:0;">
<a href="../index.html" class="active">Home ☜</a>
<a href="../html/about.html" class="active">About ☺</a>
<a href="../html/contact.html">Contact ☏</a>
<a href="#">Portfolio ♡</a>
</div>
</div>
<form action="mailto:example@gmail.com" method="post" enctype="text/plain">
<input type="text" name="name" class="feedback-input" placeholder="Name" />
<input type="text" name="email" class="feedback-input" placeholder="Email" />
<textarea name="text" class="feedback-input" placeholder="Comment"></textarea>
<input type="submit" value="SUBMIT"/>
</form>
<link href="http://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" />
</body>
</html>
我正在尝试在我的网站上创建联系页面。我希望联系表(又名 "name,email,message" 框)居中并保持在页面居中,即使 window 大小已调整。但是,我 运行 遇到了一些问题。
我让联系人框居中,但是当我为我的导航栏(我在所有其他页面上都有)实现代码时,它完全改变了联系人框的位置,而是将它一直拉到最左边,也就是导航栏所在的位置。
我假设在我的导航条码中的某处它会调整其他所有内容的位置,但是因为我对基本 HTML、CSS、&Javascript 我无法找出这背后的原因。
如果有人能提供任何关于导致 this/how 修复它的见解,我们将不胜感激!谢谢!
下面是我的CSS和HTML:
body {
font-family: 'Raleway', sans-serif;
background:url("../images/example.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
/*CONTACT BOX*/
form {
max-width:420px;
margin:200px auto;
}
.feedback-input {
color:white;
font-family: "Avenir", Arial, sans-serif;
/* font-weight:500;*/
font-size: 18px;
border-radius: 5px;
line-height: 22px;
background-color: transparent;
border:2px solid #CC6666;
transition: all 0.3s;
padding: 13px;
margin-bottom: 15px;
width:100%;
box-sizing: border-box;
outline:0;
}
.feedback-input:focus { border:2px solid #CC4949; }
textarea {
height: 150px;
line-height: 150%;
resize:vertical;
}
[type="submit"] {
font-family: Arial, Helvetica, sans-serif;
width: 100%;
background:#CC6666;
border-radius:5px;
border:0;
cursor:pointer;
color:white;
font-size:24px;
padding-top:10px;
padding-bottom:10px;
transition: all 0.3s;
margin-top:-4px;
font-weight:700;
}
[type="submit"]:hover { background:#CC4949; }
/*NAV BAR*/
/*style of the button*/
.dropbtn{
background-color: rgba(255,255,255,0);
color: white;
/* margin:0 auto;*/
font-size: 16px;
border: none;
cursor: pointer;
}
/*the div that controls the position of menu content*/
.dropdown {
position: fixed;
left: 0;
top: 0;
display: inline-block;
}
/*dropdown content*/
.dropdown-content {
/*font-family: ;*/
display: none;
/* right: 0;*/
background-color: #f9f9f9;
max-width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/*links inside of dropdown*/
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/*change color of links on hover*/
.dropdown-content a:hover {background-color:#ffe6f0}
/*show menu on hover*/
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:active .dropdown-content{
background-color:red;
}
/*change the background color of dropdown button when content is shown*/
.dropdown:hover .dropbtn {
background-color: #ff3385;
}
<!DOCTYPE html>
<html>
<title>Em || Contact</title>
<link rel="stylesheet" href="../css/contact.css">
<body>
<div class="dropdown">
<button class="dropbtn"><font size="15"> ☰ </font></button>
<div class="dropdown-content" style="left:0;">
<a href="../index.html" class="active">Home ☜</a>
<a href="../html/about.html" class="active">About ☺</a>
<a href="../html/contact.html">Contact ☏</a>
<a href="#">Portfolio ♡</a>
</div>
<form action="mailto:example@gmail.com" method="post" enctype="text/plain">
<input type="text" name="name" class="feedback-input" placeholder="Name" />
<input type="text" name="email" class="feedback-input" placeholder="Email" />
<textarea name="text" class="feedback-input" placeholder="Comment"></textarea>
<input type="submit" value="SUBMIT"/>
</form>
<link href="http://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" />
</body>
</html>
您忘记为 <div class="dropdown">
添加结尾 </div>
。这是一个固定的 html:
仅供参考:您始终可以在线验证生成的 html:https://validator.w3.org/ 以检查您的代码是否正确。
body {
font-family: 'Raleway', sans-serif;
background:url("../images/example.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
/*CONTACT BOX*/
form {
max-width:420px;
margin:200px auto;
border: 1px solid red;
}
.feedback-input {
color:white;
font-family: "Avenir", Arial, sans-serif;
/* font-weight:500;*/
font-size: 18px;
border-radius: 5px;
line-height: 22px;
background-color: transparent;
border:2px solid #CC6666;
transition: all 0.3s;
padding: 13px;
margin-bottom: 15px;
width:100%;
box-sizing: border-box;
outline:0;
}
.feedback-input:focus { border:2px solid #CC4949; }
textarea {
height: 150px;
line-height: 150%;
resize:vertical;
}
[type="submit"] {
font-family: Arial, Helvetica, sans-serif;
width: 100%;
background:#CC6666;
border-radius:5px;
border:0;
cursor:pointer;
color:white;
font-size:24px;
padding-top:10px;
padding-bottom:10px;
transition: all 0.3s;
margin-top:-4px;
font-weight:700;
}
[type="submit"]:hover { background:#CC4949; }
/*NAV BAR*/
/*style of the button*/
.dropbtn{
background-color: rgba(255,255,255,0);
color: white;
/* margin:0 auto;*/
font-size: 16px;
border: none;
cursor: pointer;
}
/*the div that controls the position of menu content*/
.dropdown {
position: fixed;
left: 0;
top: 0;
display: inline-block;
z-index: 100;
}
/*dropdown content*/
.dropdown-content {
/*font-family: ;*/
display: none;
/* right: 0;*/
background-color: #f9f9f9;
max-width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/*links inside of dropdown*/
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/*change color of links on hover*/
.dropdown-content a:hover {background-color:#ffe6f0}
/*show menu on hover*/
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:active .dropdown-content{
background-color:red;
}
/*change the background color of dropdown button when content is shown*/
.dropdown:hover .dropbtn {
background-color: #ff3385;
}
<!DOCTYPE html>
<html>
<title>Em || Contact</title>
<link rel="stylesheet" href="../css/contact.css">
<body>
<div class="dropdown">
<button class="dropbtn"><font size="15"> ☰ </font></button>
<div class="dropdown-content" style="left:0;">
<a href="../index.html" class="active">Home ☜</a>
<a href="../html/about.html" class="active">About ☺</a>
<a href="../html/contact.html">Contact ☏</a>
<a href="#">Portfolio ♡</a>
</div>
</div>
<form action="mailto:example@gmail.com" method="post" enctype="text/plain">
<input type="text" name="name" class="feedback-input" placeholder="Name" />
<input type="text" name="email" class="feedback-input" placeholder="Email" />
<textarea name="text" class="feedback-input" placeholder="Comment"></textarea>
<input type="submit" value="SUBMIT"/>
</form>
<link href="http://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" />
</body>
</html>