CSS 文件没有链接到 HTML，也没有按照 CSS 代码进行格式化

Question

I have created a header with logo, menu and social icons all in one menu bar.我在一个菜单栏中创建了一个带有徽标、菜单和社交图标的标题。

Now my problem is I am unable to move the text as I desired.现在我的问题是我无法根据需要移动文本。 CSS coding is not at all reflecting in the final result. CSS 编码根本没有反映在最终结果中。

my html我的 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> &copy, 2021 all rights reserved </p>
</footer>
</body>
</html>

My css code我的 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;

}

Container section and footer section are not formatted as given in CSS.容器部分和页脚部分的格式与 CSS 中给出的格式不同。 Moreover I am unable to create (divs) after the header section in HTML.此外，我无法在 HTML 的标题部分之后创建（div）。

Please help.请帮忙。

Answer 1

place your html file and CSS file in the same folder and call the CSS file in link href by its relative path将您的 html 文件和 CSS 文件放在同一文件夹中，并通过其相对路径调用链接 href 中的 CSS 文件

like this像这样

<link rel="stylesheet" href="social.css" type="text/css">

it will work, it will automatically take the whole url with the endpoint placing as social.css它会工作，它会自动将整个 url 与端点放置为 social.css

Answer 2

The problem's in your css.问题出在你的 css 上。 On two lines you have closed the styles with a square bracket ] instead of curly } .在两行中，您用方括号]而不是卷曲}关闭了样式。 Moreover, font-color is not a css property.此外， font-color不是 css 属性。 Simply use color .只需使用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; }

CSS 文件没有链接到 HTML，也没有按照 CSS 代码进行格式化

问题描述

2 个解决方案

解决方案1
1 2021-07-12 10:46:02

解决方案2
0 已采纳 2021-07-12 10:49:53

CSS 文件没有链接到 HTML，也没有按照 CSS 代码进行格式化

问题描述

2 个解决方案

解决方案1 1 2021-07-12 10:46:02

解决方案2 0 已采纳 2021-07-12 10:49:53

解决方案1
1 2021-07-12 10:46:02

解决方案2
0 已采纳 2021-07-12 10:49:53