Question

无论我尝试或改变它都没有用。我的CSS文件与我的HTML位于同一文件夹中。这是代码：

 <!DOCTYPE html>
    <html>
     <head>
      <link rel="stylesheet" type="text/css" href="style.css">
       <title>Photos'r'us</title>
      <div="header">
         <img id="banner" src="https://i.imgur.com/iTt5U3E.jpg" alt:"pic">
          <ul id="navigation">
             <li>Home</li>
             <li>About</li>
             <li>Portfolio</li>
             <li>Contact</li>
              </ul>
        </div>
      </head>
      <body>
      </body>
       </html>

这是CSS：

@charset "UTF-8";

#header {
height: 230px;
background-image: url(https://i.imgur.com/iTt5U3E.jpg);
background-repeat: no-repeat;
font-family: 'Ariel', sans-serif;
}
#banner {
float: left;
width: 100px;
height: 400px;
margin: 20px;
}
#navigation {
display: inline;
}

请帮忙。

Answer 1

将您的所有元素放入body内不在head的标记中，并将此行<div="header">更正为<div id="header">。

有关html的更多帮助，请阅读：The global structure of an HTML document

＆＃13;

@charset "UTF-8";
#header {
  height: 230px;
  background-image: url(https://i.imgur.com/iTt5U3E.jpg);
  background-repeat: no-repeat;
  font-family: 'Ariel', sans-serif;
}

#banner {
  float: left;
  width: 100px;
  height: 400px;
  margin: 20px;
}

#navigation {
  display: inline;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Photos'r'us</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div id="header">
    <img id="banner" src="https://i.imgur.com/iTt5U3E.jpg" alt="pic">
    <ul id="navigation">
      <li>Home</li>
      <li>About</li>
      <li>Portfolio</li>
      <li>Contact</li>
    </ul>
  </div>
</body>

</html>

＆＃13;

Answer 2

您使用了错误的属性语法

＆＃13;

@charset "UTF-8";

#header {
height: 230px;
background-image: url(https://i.imgur.com/iTt5U3E.jpg);
background-repeat: no-repeat;
font-family: 'Ariel', sans-serif;
}
#banner {
float: left;
width: 100px;
height: 80px;
margin: 20px;
}
#navigation {
display: inline;
}

＆＃13;

<!DOCTYPE html>
    <html>
     <head>
      <link rel="stylesheet" type="text/css" href="style.css">
       <title>Photos'r'us</title>
      </head>
      <body>
      <div id="header">
         <img id="banner" src="https://i.imgur.com/iTt5U3E.jpg"  alt="pic">
          <ul id="navigation">
             <li>Home</li>
             <li>About</li>
             <li>Portfolio</li>
             <li>Contact</li>
              </ul>
        </div>
      </body>
       </html>

＆＃13;

id

<div id="header">

alt="pic"设置错误

我更改了width:80px;以更好地展示，并且正常工作。

为什么HTML5不读我的CSS？

2 个答案: