[HTML & CSS] Почему файл CSS не применяется к html? : /: / - PullRequest
Новая
       3

[HTML & CSS] Почему файл CSS не применяется к html? : /: /

0 голосов
/ 25 апреля 2020

Я пишу HTML файл и CSS файл и работаю в Chrome, но я думаю, что CSS файл не относится к HTML файлу ...

Я не знаю почему ... но я думаю, что я задокументировал код правильно

здесь каталог введите описание изображения здесь

и вот что проблематично c код 

* {
  margin:0;
  padding:0;
}
body {
  font-family:"맑은 고딕", "돋움";
  font-size:12px;
  color:#444444;
}
ul {
  list-style-type:none;
}
.clear {
  clear:both;
}
#wrap {
  width:970px;
  margin:0 auto;
}
/* 상단 헤더 */
header {
  height:100px;
  position:relative;
}
header #logo {
  position:absolute;
  top:10px;
  left:20px;
}
header #top_menu {
  position:absolute;
  top:10px;
  left:770px;
}
header #main_menu{
  width:757px;
  height:38px;
  background-image:url("../img/main_menu_bg.png");
  background-repeat:no-repeat;
  position:absolute;
  top:40px;
  left:210px;
}
header #main_menu li {
  display:inline-block;
  margin:12px 30px 0 50px;
  font-size:13px;
}
header #main_menu a:link {
  text-decoration:none;
  color:#ffffff;
}
header #main_menu a:hover {
  text-decoration:none;
  color:#ffffff;
}
header #main_menu a:visited {
  text-decoration:none;
  color:#ffffff;
}
header #main_menu a:active {
  text-decoration:none;
  color:#ffffff;
}
aside {
  width:190px;
  float:left;
}
aside #login_box {
  width:186px;
  heigth:120px;
  border:solid 1px #dddddd;
}
aside #login_title {
  margin:10px 0 0 10px;
}
aside #input_button {
  margin:10px 0 0 10px;
}
aside #login_input {
  float:left;
}
aside #login_btn {
  float:left;
  margin:3px 0 0 5px;
}
aside #login_input input {
  width:100px;
  height:20px;
  border:solid 1px #dddddd;
}
aside #login_input li {
  margin-top:2px;
}
aside #join_search {
  margin: :10px 0 0 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>클래식기타 커뮤니티</title>
<link rel="stylesheet" type=="text/css" href="/css/common.css?">
<link rel="stylesheet" type=="text/css" href="/css/header.css?">
<link rel="stylesheet" type=="text/css" href="/css/footer.css?">
<link rel="stylesheet" type=="text/css" href="/css/main.css?">
</heda>
<body>
<div id="wrap">
  <header>
    <a href="index.html"><img id="logo" src="img/logo.png">
    <nav id="main_menu">
      <ul>
        <li><a href="board_list.html">자유 게시판</a><li>
        <li><a href="#">기타 연주</a><li>
        <li><a href="#">공동 구매</a><li>
        <li><a href="#">연주회 안내</a><li>
        <li><a href="#">회원 게시판</a><li>
      </ul>
    </nav>
  </header> <!-- header -->
  <aside>
    <article id="login_box">
      <img id="login_title" src="img/ttl_login.png">
      <div id="input_button">
        <ul id="login_input">
          <li><input type="text"></li>
          <li><input type="password"></li>
        </ul>
        <img id="login_btn" src="img/btn_login.gif">
      </div>
    <article>
  </aside>
</div><!-- wrap -->
</body>
</html>

и это вывод введите описание изображения здесь

, поэтому я хочу знать, почему файл CSS не не работает: /

Ответы [ 3 ]

0 голосов
/ 25 апреля 2020

Кажется, есть какая-то проблема с путями файлов, указанными в ссылке href файлов css. Вместо упоминания "/css/common.css", если вы пишете "css / common. css". Стили должны загружаться с учетом структуры каталогов, как показано на рисунке.

0 голосов
/ 25 апреля 2020

Проверьте ваш css путь, используемый в css, согласно вашему скриншоту, вам нужно удалить / с самого начала, также я предлагаю вам открыть консил chrome таким образом, что вы не сможете увидеть проблему с маршрутизацией

0 голосов
/ 25 апреля 2020

Если вы проверите консоль браузера, у вас, скорее всего, будут отсутствующие CSS включения, и вы увидите, откуда он пытается их загрузить.

При использовании href="/css/common.css" он пытается загрузить стили из базового домена, так что, например, если ваш URL для доступа к сайту: http://localhost/Ch12_Make_commuSite/index.html файлы CSS будут загружены отсюда: http://localhost/css/common.css, что определенно не правильно.

Это работает точно как src для изображений, которые вы получили правильно.

Вы можете прочитать больше здесь

Вот решение, которое должно работать 

* {
  margin:0;
  padding:0;
}
body {
  font-family:"맑은 고딕", "돋움";
  font-size:12px;
  color:#444444;
}
ul {
  list-style-type:none;
}
.clear {
  clear:both;
}
#wrap {
  width:970px;
  margin:0 auto;
}
/* 상단 헤더 */
header {
  height:100px;
  position:relative;
}
header #logo {
  position:absolute;
  top:10px;
  left:20px;
}
header #top_menu {
  position:absolute;
  top:10px;
  left:770px;
}
header #main_menu{
  width:757px;
  height:38px;
  background-image:url("../img/main_menu_bg.png");
  background-repeat:no-repeat;
  position:absolute;
  top:40px;
  left:210px;
}
header #main_menu li {
  display:inline-block;
  margin:12px 30px 0 50px;
  font-size:13px;
}
header #main_menu a:link {
  text-decoration:none;
  color:#ffffff;
}
header #main_menu a:hover {
  text-decoration:none;
  color:#ffffff;
}
header #main_menu a:visited {
  text-decoration:none;
  color:#ffffff;
}
header #main_menu a:active {
  text-decoration:none;
  color:#ffffff;
}
aside {
  width:190px;
  float:left;
}
aside #login_box {
  width:186px;
  heigth:120px;
  border:solid 1px #dddddd;
}
aside #login_title {
  margin:10px 0 0 10px;
}
aside #input_button {
  margin:10px 0 0 10px;
}
aside #login_input {
  float:left;
}
aside #login_btn {
  float:left;
  margin:3px 0 0 5px;
}
aside #login_input input {
  width:100px;
  height:20px;
  border:solid 1px #dddddd;
}
aside #login_input li {
  margin-top:2px;
}
aside #join_search {
  margin: :10px 0 0 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>클래식기타 커뮤니티</title>
<link rel="stylesheet" type=="text/css" href="css/common.css?">
<link rel="stylesheet" type=="text/css" href="css/header.css?">
<link rel="stylesheet" type=="text/css" href="css/footer.css?">
<link rel="stylesheet" type=="text/css" href="css/main.css?">
</heda>
<body>
<div id="wrap">
  <header>
    <a href="index.html"><img id="logo" src="img/logo.png">
    <nav id="main_menu">
      <ul>
        <li><a href="board_list.html">자유 게시판</a><li>
        <li><a href="#">기타 연주</a><li>
        <li><a href="#">공동 구매</a><li>
        <li><a href="#">연주회 안내</a><li>
        <li><a href="#">회원 게시판</a><li>
      </ul>
    </nav>
  </header> <!-- header -->
  <aside>
    <article id="login_box">
      <img id="login_title" src="img/ttl_login.png">
      <div id="input_button">
        <ul id="login_input">
          <li><input type="text"></li>
          <li><input type="password"></li>
        </ul>
        <img id="login_btn" src="img/btn_login.gif">
      </div>
    <article>
  </aside>
</div><!-- wrap -->
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...