還在學習代碼。我正在構建一個聯系頁面，并希望在頁面頂部包含我的標題欄，但是當我添加此代碼時，我的標題欄出現在我的頁面左側，非常古怪。我知道這很可能是一個 CSS 錯誤，但我似乎無法確定為什么我的標題欄不會顯示在我的頁面頂部。有誰愿意去看看嗎？這是我的代碼。
<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<!-- <title> Responsive Contact Us Form | CodingLab </title>
<link rel="stylesheet" href="style.css">
<!-- Fontawesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<link href="css/stylesheet2.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<section class="header">
<div class="header_content">
<div class="logo_container">
<a href="index.html">
<img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
</a>
</div>
<ul class="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="aboout_me.html">About ME</a>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</section>
</header>
<div class="container">
<div class="content">
<div class="left-side">
<div class="address details">
<i class="fas fa-map-marker-alt"></i>
<div class="topic">Address</div>
<div class="text-one">Los Angles, CA</div>
<div class="text-two">Austin,TX</div>
</div>
<div class="phone details">
<i class="fas fa-phone-alt"></i>
<div class="topic">Phone</div>
<div class="text-one">(512) xxx-xxxx</div>
<div class="text-two"> </div>
</div>
<div class="email details">
<i class="fas fa-envelope"></i>
<div class="topic">Email</div>
<div class="text-one">[email protected]</div>
<div class="text-two">[email protected]</div>
</div>
</div>
<div class="right-side">
<div class="topic-text">Send me a message!</div>
<br>
<p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
<form action="#">
<div class="input-box">
<input type="text" placeholder="Enter your name">
</div>
<div class="input-box">
<input type="text" placeholder="Enter your email">
</div>
<div class="input-box message-box">
</div>
<div class="button">
<input type="button" value="Send Now" >
</div>
</form>
</div>
</div>
</div>
</body>
</html>
/* About ME */
/* Google Font CDN Link */
/* Header */
.header {
width: 100%;
height: 50px;
display: block;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.logo_container {
height: 100%;
display: table;
float: left;
border: none;
}
.logo {
max-height: 50px;
display: table-cell;
vertical-align: middle;
}
/* Navigation */
.navigation {
float: right;
height: 100%;
margin: 0;
}
.navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 15px 20px;
position: relative;
box-sizing: border-box;
text-decoration: none;
}
a:hover {
color: #bc0456 !important;
}
.navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color:#067393;
font-family: Kapelka New;
text-decoration: none !important;
}
.sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
position: absolute;
background: black;
top: 100%;
}
.navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins" , sans-serif;
}
body{
min-height: 100vh;
width: 100%;
background: #f99a61;
display: flex;
align-items: center;
justify-content: center;
}
.container{
width: 85%;
background: #fff;
border-radius: 6px;
padding: 20px 60px 30px 40px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.container .content .left-side{
width: 25%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 15px;
position: relative;
}
.content .left-side::before{
content: '';
position: absolute;
height: 70%;
width: 2px;
right: -15px;
top: 50%;
transform: translateY(-50%);
background: #afafb6;
}
.content .left-side .details{
margin: 14px;
text-align: center;
}
.content .left-side .details i{
font-size: 30px;
color: #067393;
margin-bottom: 10px;
}
.content .left-side .details .topic{
font-size: 18px;
font-weight: 500;
}
.content .left-side .details .text-one,
.content .left-side .details .text-two{
font-size: 14px;
color: #afafb6;
}
.container .content .right-side{
width: 75%;
margin-left: 75px;
}
.content .right-side .topic-text{
font-size: 23px;
font-weight: 600;
color: #bc0456;
}
.right-side .input-box{
height: 50px;
width: 100%;
margin: 12px 0;
}
.right-side .input-box input,
.right-side .input-box textarea{
height: 100%;
width: 100%;
border: none;
outline: none;
font-size: 16px;
background: #F0F1F8;
border-radius: 6px;
padding: 0 15px;
resize: none;
}
.right-side .message-box{
min-height: 110px;
}
.right-side .input-box textarea{
padding-top: 6px;
}
.right-side .button{
display: inline-block;
margin-top: 12px;
}
.right-side .button input[type="button"]{
color: #fff;
font-size: 18px;
outline: none;
border: none;
padding: 8px 16px;
border-radius: 6px;
background: #067393;
cursor: pointer;
transition: all 0.3s ease;
}
.button input[type="button"]:hover{
background: #bc0456;
}
@media (max-width: 950px) {
.container{
width: 90%;
padding: 30px 40px 40px 35px ;
}
.container .content .right-side{
width: 75%;
margin-left: 55px;
}
}
@media (max-width: 820px) {
.container{
margin: 40px 0;
height: 100%;
}
.container .content{
flex-direction: column-reverse;
}
.container .content .left-side{
width: 100%;
flex-direction: row;
margin-top: 40px;
justify-content: center;
flex-wrap: wrap;
}
.container .content .left-side::before{
display: none;
}
.container .content .right-side{
width: 100%;
margin-left: 0;
}
}
uj5u.com熱心網友回復：
您的<header>（而不是<head>）必須在<body>標簽內（其中包含頁面上可見的所有內容）！
uj5u.com熱心網友回復：
首先，IMO<body>不應將樣式設定為flex，至少在使用<header>which 會帶來自己的被覆寫的默認值時不應如此。
將 flex 樣式從bodyto移動.container將解決您的即時請求，但可能會引入其他樣式問題。
.header {
width: 100%;
height: 50px;
display: block;
background-color: #61d1e2;
/* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: #61d1e2;
/* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.logo_container {
height: 100%;
display: table;
float: left;
border: none;
}
.logo {
max-height: 50px;
display: table-cell;
vertical-align: middle;
}
/* Navigation */
.navigation {
float: right;
height: 100%;
margin: 0;
}
.navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 15px 20px;
position: relative;
box-sizing: border-box;
text-decoration: none;
}
a:hover {
color: #bc0456 !important;
}
.navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color: #067393;
font-family: Kapelka New;
text-decoration: none !important;
}
.sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
position: absolute;
background: black;
top: 100%;
}
.navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
min-height: 100vh;
width: 100%;
background: #f99a61;
}
.container {
display: flex;
align-items: center;
justify-content: center;
width: 85%;
background: #fff;
border-radius: 6px;
padding: 20px 60px 30px 40px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container .content {
display: flex;
align-items: center;
justify-content: space-between;
}
.container .content .left-side {
width: 25%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 15px;
position: relative;
}
.content .left-side::before {
content: '';
position: absolute;
height: 70%;
width: 2px;
right: -15px;
top: 50%;
transform: translateY(-50%);
background: #afafb6;
}
.content .left-side .details {
margin: 14px;
text-align: center;
}
.content .left-side .details i {
font-size: 30px;
color: #067393;
margin-bottom: 10px;
}
.content .left-side .details .topic {
font-size: 18px;
font-weight: 500;
}
.content .left-side .details .text-one,
.content .left-side .details .text-two {
font-size: 14px;
color: #afafb6;
}
.container .content .right-side {
width: 75%;
margin-left: 75px;
}
.content .right-side .topic-text {
font-size: 23px;
font-weight: 600;
color: #bc0456;
}
.right-side .input-box {
height: 50px;
width: 100%;
margin: 12px 0;
}
.right-side .input-box input,
.right-side .input-box textarea {
height: 100%;
width: 100%;
border: none;
outline: none;
font-size: 16px;
background: #F0F1F8;
border-radius: 6px;
padding: 0 15px;
resize: none;
}
.right-side .message-box {
min-height: 110px;
}
.right-side .input-box textarea {
padding-top: 6px;
}
.right-side .button {
display: inline-block;
margin-top: 12px;
}
.right-side .button input[type="button"] {
color: #fff;
font-size: 18px;
outline: none;
border: none;
padding: 8px 16px;
border-radius: 6px;
background: #067393;
cursor: pointer;
transition: all 0.3s ease;
}
.button input[type="button"]:hover {
background: #bc0456;
}
@media (max-width: 950px) {
.container {
width: 90%;
padding: 30px 40px 40px 35px;
}
.container .content .right-side {
width: 75%;
margin-left: 55px;
}
}
@media (max-width: 820px) {
.container {
margin: 40px 0;
height: 100%;
}
.container .content {
flex-direction: column-reverse;
}
.container .content .left-side {
width: 100%;
flex-direction: row;
margin-top: 40px;
justify-content: center;
flex-wrap: wrap;
}
.container .content .left-side::before {
display: none;
}
.container .content .right-side {
width: 100%;
margin-left: 0;
}
}<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
</head>
<body>
<header>
<section class="header">
<div class="header_content">
<div class="logo_container">
<a href="index.html">
<img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
</a>
</div>
<ul class="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="aboout_me.html">About ME</a>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</section>
</header>
<div class="container">
<div class="content">
<div class="left-side">
<div class="address details">
<i class="fas fa-map-marker-alt"></i>
<div class="topic">Address</div>
<div class="text-one">Los Angles, CA</div>
<div class="text-two">Austin,TX</div>
</div>
<div class="phone details">
<i class="fas fa-phone-alt"></i>
<div class="topic">Phone</div>
<div class="text-one">(512) xxx-xxxx</div>
<div class="text-two"> </div>
</div>
<div class="email details">
<i class="fas fa-envelope"></i>
<div class="topic">Email</div>
<div class="text-one">[email protected]</div>
<div class="text-two">[email protected]</div>
</div>
</div>
<div class="right-side">
<div class="topic-text">Send me a message!</div>
<br>
<p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
<form action="#">
<div class="input-box">
<input type="text" placeholder="Enter your name">
</div>
<div class="input-box">
<input type="text" placeholder="Enter your email">
</div>
<div class="input-box message-box">
</div>
<div class="button">
<input type="button" value="Send Now">
</div>
</form>
</div>
</div>
</div>
</body>
</html>uj5u.com熱心網友回復：
問題發生在身體上。你分配給flex。我洗掉了它并創建了一個新的 div 來包裝容器。如果要減小導航欄中的寬度，則必須將其包裹到另一個 div 并將其居中。
/* About ME */
/* Google Font CDN Link */
/* Header */
.header {
width: 100%;
height: 50px;
display: block;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.logo_container {
height: 100%;
display: table;
float: left;
border: none;
}
.logo {
max-height: 50px;
display: table-cell;
vertical-align: middle;
}
/* Navigation */
.navigation {
float: right;
height: 100%;
margin: 0;
}
.navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 15px 20px;
position: relative;
box-sizing: border-box;
text-decoration: none;
}
a:hover {
color: #bc0456 !important;
}
.navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color:#067393;
font-family: Kapelka New;
text-decoration: none !important;
}
.sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
position: absolute;
background: black;
top: 100%;
}
.navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins" , sans-serif;
}
body{
min-height: 100vh;
width: 100%;
background: #f99a61;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.container{
width: 85%;
background: #fff;
border-radius: 6px;
padding: 20px 60px 30px 40px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.container .content .left-side{
width: 25%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 15px;
position: relative;
}
.content .left-side::before{
content: '';
position: absolute;
height: 70%;
width: 2px;
right: -15px;
top: 50%;
transform: translateY(-50%);
background: #afafb6;
}
.content .left-side .details{
margin: 14px;
text-align: center;
}
.content .left-side .details i{
font-size: 30px;
color: #067393;
margin-bottom: 10px;
}
.content .left-side .details .topic{
font-size: 18px;
font-weight: 500;
}
.content .left-side .details .text-one,
.content .left-side .details .text-two{
font-size: 14px;
color: #afafb6;
}
.container .content .right-side{
width: 75%;
margin-left: 75px;
}
.content .right-side .topic-text{
font-size: 23px;
font-weight: 600;
color: #bc0456;
}
.right-side .input-box{
height: 50px;
width: 100%;
margin: 12px 0;
}
.right-side .input-box input,
.right-side .input-box textarea{
height: 100%;
width: 100%;
border: none;
outline: none;
font-size: 16px;
background: #F0F1F8;
border-radius: 6px;
padding: 0 15px;
resize: none;
}
.right-side .message-box{
min-height: 110px;
}
.right-side .input-box textarea{
padding-top: 6px;
}
.right-side .button{
display: inline-block;
margin-top: 12px;
}
.right-side .button input[type="button"]{
color: #fff;
font-size: 18px;
outline: none;
border: none;
padding: 8px 16px;
border-radius: 6px;
background: #067393;
cursor: pointer;
transition: all 0.3s ease;
}
.button input[type="button"]:hover{
background: #bc0456;
}
@media (max-width: 950px) {
.container{
width: 90%;
padding: 30px 40px 40px 35px ;
}
.container .content .right-side{
width: 75%;
margin-left: 55px;
}
}
@media (max-width: 820px) {
.container{
margin: 40px 0;
height: 100%;
}
.container .content{
flex-direction: column-reverse;
}
.container .content .left-side{
width: 100%;
flex-direction: row;
margin-top: 40px;
justify-content: center;
flex-wrap: wrap;
}
.container .content .left-side::before{
display: none;
}
.container .content .right-side{
width: 100%;
margin-left: 0;
}
}<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<!-- <title> Responsive Contact Us Form | CodingLab </title>
<link rel="stylesheet" href="style.css">
<!-- Fontawesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<link href="css/stylesheet2.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="header">
<div class="header_content">
<div class="logo_container">
<a href="index.html">
<img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
</a>
</div>
<ul class="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="aboout_me.html">About ME</a>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</header>
<div class="wrapper">
<div class="container">
<div class="content">
<div class="left-side">
<div class="address details">
<i class="fas fa-map-marker-alt"></i>
<div class="topic">Address</div>
<div class="text-one">Los Angles, CA</div>
<div class="text-two">Austin,TX</div>
</div>
<div class="phone details">
<i class="fas fa-phone-alt"></i>
<div class="topic">Phone</div>
<div class="text-one">(512) xxx-xxxx</div>
<div class="text-two"> </div>
</div>
<div class="email details">
<i class="fas fa-envelope"></i>
<div class="topic">Email</div>
<div class="text-one">[email protected]</div>
<div class="text-two">[email protected]</div>
</div>
</div>
<div class="right-side">
<div class="topic-text">Send me a message!</div>
<br>
<p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
<form action="#">
<div class="input-box">
<input type="text" placeholder="Enter your name">
</div>
<div class="input-box">
<input type="text" placeholder="Enter your email">
</div>
<div class="input-box message-box">
</div>
<div class="button">
<input type="button" value="Send Now" >
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/454006.html
上一篇：如何分隔堆疊在一起的div