问题描述
我已经在原子代码编辑器中键入了以下代码。我有一个名为 HTML-Personal Site 的文件夹,并且在其中有我的 index.html 文件以及其他链接的名为 Hobbies.html 和 Contact Info.html 的html文件。在HTML-Personal Site文件夹中,我还链接了一个名为 styles.css 的css文件,该文件已链接至主html文件(index.html)。问题是我对css文件所做的更改仅适用于我的 index.html 文件,而不适用于其他html文件(链接到index)。 html)。
这是我将index.html链接到styles.css(我的CSS文件)的方式:(请忽略代码中的大表)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<Meta charset="utf-8">
<title> Soham's Personal Site</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<table cellspacing="20">
<tr>
<td><img src="Attack-on-titan-circle.png" alt="Attack on Titan"></td>
<td>
<h1>Soham dengra</h1>
<p><em>A boy learning to code and make his <strong><a href="https://www.google.com/">1st website</a></strong>.</em></p>
<p>I like reading ? and listening to music music ?.</p>
</td>
</tr>
</table>
<hr>
<h3>Education</h3>
<ul>
<li><a href="http://nalandapublicschool.org/">Nalanda Public School</a></li>
<li>Secondary Section</li>
<ul>
<li>Class 10</li>
</ul>
</ul>
<hr>
<h3>Work experience</h3>
<table cellspacing="10">
<thead>
<tr>
<th>Dates</th>
<th>Places</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
<tr>
<td>2014-15</td>
<td>Scouts and Guides</td>
</tr>
<tr>
<td>2015-16</td>
<td>Scouts and Guides</td>
</tr>
</table>
<hr>
<h3>Skills</h3>
<table cellspacing="10">
<tr>
<td>Reading</td>
<td>⭐⭐⭐⭐⭐</td>
</tr>
<tr>
<td>General KNowledge</td>
<td>⭐⭐⭐⭐</td>
</tr>
<tr>
<td>Sports</td>
<td>⭐⭐⭐</td>
</tr>
</tbody>
</table>
<hr>
<a href="Hobbies.html">Hobbies</a><br>
<a href="Contact Info.html">Contact @R_918_4045@ion</a>
</body>
</html>
@H_502_30@
这是我的css文件(styles.css):
body {
background-color: #EAF6F6;
}
h1 {
color: #66BFBF;
}
h3 {
color: #66BFBF;
}
hr {
border-style: none;
border-top-style: dotted;
border-color: grey;
border-width: 5px;
width: 5%;
}
@H_502_30@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<Meta charset="utf-8">
<title>Contact Me</title>
</head>
<body>
<h1><em>This is my contact @R_918_4045@ion.</em></h1>
<ol>
<li>Phone No : 123456789</li>
<li>Email address : [email protected]</li>
<li>Facebook : contact.facebook.com</li>
</ol>
<hr>
<form class="" action="mailto:[email protected]" method="post" enctype="text/plain">
<label>Your Name:</label>
<input type="text" name="YourName" value=""><br>
<label>Your Email:</label>
<input type="email" name="YourEmail" value=""><br>
<label>Your Message:</label><br>
<textarea name="name" rows="10" cols="30"></textarea><br>
<input type="submit" name="">
</form>
</body>
</html>
@H_502_30@
这是我的第三个html文件(Hobbies.html)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<Meta charset="utf-8">
<title></title>
</head>
<body>
<h3>Hobbies</h3>
<ol>
<li>Reading</li>
<ol type="i">
<li>Fiction </li>
<li>Sci-fi</li>
<li>Fantasy</li>
<li>Mystery</li>
</ol>
<li><a href="https://www.imdb.com/">Movies</a></li>
<ol>
<li>Sci-fi</li>
<li>Mystery</li>
<li>Adventure</li>
</ol>
</ol>
</body>
</html>
@H_502_30@
有人告诉我,链接问题是由原子中的错误引起的,我需要重新安装它,但随后我尝试在另一台PC上的原子中运行相同的文件,但仍然面临相同的问题。 因此,请告诉我代码出了什么问题。我已经尝试解决问题,但是我无法做到(我是编码方面的初学者)。希望您能够理解我的问题。 谢谢
解决方法
您的Contact.html文件不包含样式表文件。您需要添加到所有应使用该样式表的文件。
,您必须为每个文件添加<link rel="stylesheet" href="css/styles.css">
将此代码从索引页面添加到其他页面。 进入头部。 例子
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="css/styles.css">
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>Hobbies</h3>
<ol>
<li>Reading</li>
<ol type="i">
<li>Fiction </li>
<li>Sci-fi</li>
<li>Fantasy</li>
<li>Mystery</li>
</ol>
<li><a href="https://www.imdb.com/">Movies</a></li>
<ol>
<li>Sci-fi</li>
<li>Mystery</li>
<li>Adventure</li>
</ol>
</ol>
</body>
</html>
,
添加:
<link rel="stylesheet" href="css/styles.css">
访问所有三个html文件