CSS 文件沒有鏈接到 HTML，也沒有按照 CSS 代碼進行格式化
[英]CSS file is not linking to HTML and not formatting as per CSS code
問題描述
我在一個菜單欄中創建了一個帶有徽標、菜單和社交圖標的標題。
現在我的問題是我無法根據需要移動文本。 CSS 編碼根本沒有反映在最終結果中。
我的 HTML
<!doctype html>
<html>
<head>
<title> Social Menu </title>
<link rel="stylesheet" href="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/social/social.css" type="text/css">
<link rel="stylesheet" href="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/social/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="header-section">
<div class="logo">
<h3> New Horizons </h3>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Bio</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<div class="social">
<ul>
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-instagram"></a></li>
<li><a href="#" class="fa fa-pinterest"></a></li>
<li><a href="#" class="fa fa-twitter"></a></li>
</ul>
</div>
</div>
</header>
<div class="container">
<div class="content-area">
<p> Our business model </p>
</div>
<div class="image">
<img src>
</div>
</div>
<footer>
<p> ©, 2021 all rights reserved </p>
</footer>
</body>
</html>
我的 css 代碼
html,body {
margin:0;
}
/*setting full width header */
.header-section {
top:0;
left:0;
width:100%;
height:10%;
margin:0;
display:flex;
flex-wrap:wrap;
border-bottom:3px solid black;
background-color:#444442;
box-sizing:border-box;
position:relative;
}
/* setting logo */
.logo {
width:33%;
text-align:left;
flex:1;
}
/* setting navigation */
nav {
width:33%;
text-align:center;
flex:1;
}
/* setting social menu */
.social {
width:33%;
text-align:right;
flex:1
}
/*logo style */
.logo h3 {
font-family:Architects daughter, sans-serif;
font-weight:bold;
font-size:150%;
margin-left:15px;
color:yellow;
float:left;
flex:1;
}
/*menu style */
ul {
display:flex;
margin-left:35px;
flex:1;
}
ul li {
list-style-type:none;
float:right;
vertical-align:middle;
text-align:center;
display:inline;
overflow:hidden;
padding:0;
margin:0;
}
ul li a {
text-decoration:none;
color:#42cefc;
font-family:Architechts daughter, sans-serif;
font-weight:bold;
font-size:100%;
float:left;
display:inline;
flex:1;
padding-top:8px 25px 8px 25px;
margin:15px;
box-sizing:border-box;
]
/*social media icons */
.social ul {
display:flex;
margin-left:50px;
margin-right:8px;
flex:1;
}
.social ul li {
list-style-type:none;
float:right;
vertical-align:right;
display:inline;
overflow:hidden;
padding:0;
margin:0;
box-sizing:border-box;
}
.social ul li a {
text-decoration:none;
font-size:150%;
float:right;
display:inline;
flex:1;
padding-top:5px;
padding-right:60px;
margin-left:20px;
box-sizing:border-box;
]
/* main content area */
.container {
width:100%;
margin-right:15px;
}
.content-area {
width:50%;
border-top:3px solid black;
margin-right:10px;
}
footer {
text-align: center;
font-size: 85%;
font-color: #f2cede;
padding-bottom: 20px;
}
容器部分和頁腳部分的格式與 CSS 中給出的格式不同。 此外，我無法在 HTML 的標題部分之后創建（div）。
請幫忙。
2 個解決方案
解決方案1
1 2021-07-12 10:46:02
將您的 html 文件和 CSS 文件放在同一文件夾中，並通過其相對路徑調用鏈接 href 中的 CSS 文件
像這樣
<link rel="stylesheet" href="social.css" type="text/css">
它會工作，它會自動將整個 url 與端點放置為 social.css
解決方案2
0 已采納 2021-07-12 10:49:53
問題出在你的 css 上。 在兩行中，您用方括號]而不是卷曲}關閉了樣式。 此外， font-color不是 css 屬性。 只需使用color 。
html, body { margin: 0; } /*setting full width header */ .header-section { top: 0; left: 0; width: 100%; height: 10%; margin: 0; display: flex; flex-wrap: wrap; border-bottom: 3px solid black; background-color: #444442; box-sizing: border-box; position: relative; } /* setting logo */ .logo { width: 33%; text-align: left; flex: 1; } /* setting navigation */ nav { width: 33%; text-align: center; flex: 1; } /* setting social menu */ .social { width: 33%; text-align: right; flex: 1 } /*logo style */ .logo h3 { font-family: Architects daughter, sans-serif; font-weight: bold; font-size: 150%; margin-left: 15px; color: yellow; float: left; flex: 1; } /*menu style */ ul { display: flex; margin-left: 35px; flex: 1; } ul li { list-style-type: none; float: right; vertical-align: middle; text-align: center; display: inline; overflow: hidden; padding: 0; margin: 0; } ul li a { text-decoration: none; color: #42cefc; font-family: Architechts daughter, sans-serif; font-weight: bold; font-size: 100%; float: left; display: inline; flex: 1; padding-top: 8px 25px 8px 25px; margin: 15px; box-sizing: border-box; } /*social media icons */ .social ul { display: flex; margin-left: 50px; margin-right: 8px; flex: 1; } .social ul li { list-style-type: none; float: right; vertical-align: right; display: inline; overflow: hidden; padding: 0; margin: 0; box-sizing: border-box; } .social ul li a { text-decoration: none; font-size: 150%; float: right; display: inline; flex: 1; padding-top: 5px; padding-right: 60px; margin-left: 20px; box-sizing: border-box; } /* main content area */ .container { width: 100%; margin-right: 15px; } .content-area { width: 50%; border-top: 3px solid black; margin-right: 10px; } footer { text-align: center; font-size: 85%; color: #f2cede; padding-bottom: 20px; }
html 未鏈接到 Visual Studio Code 中的 css 文件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.