集中“聯系盒”並使其具有響應能力
[英]Centering a “Contact Box” & Making it Responsive
問題描述
我正在嘗試在我的網站上創建聯系頁面。 我希望聯系表單（也稱為“名稱，電子郵件，消息”框）居中並即使在調整窗口大小的情況下也可以在頁面上居中。 但是，我遇到了一些問題。
我使聯系人框居中，但是當我為導航欄實現代碼時（在所有其他頁面上都有），它完全改變了聯系人框的位置，而是將其一直拉到最左邊。是導航欄所在的位置。
我假設在導航條形碼中的某處可以調整其他所有內容的位置，但是由於我對基本HTML，CSS和Java相對較新，因此我很難找出造成這種情況的原因。
如果有人能提供任何有關導致此問題/解決方法的見解，將不勝感激！ 謝謝！
以下是我的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>
1 個解決方案
解決方案1
0 已采納 2017-02-05 19:41:22
您忘記了<div class="dropdown">結束語</div> <div class="dropdown"> 。 這是固定的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>
制作帶有圖片的員工聯系表，我需要使其具有響應性
[英]Making a employee contact sheet with pictures and I need to make it responsive
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.