Question

我的问题是一个简单的问题-如何将CSS输入到具有JavaScript和jQuery元素的HTML文档中？我想做的是将文字和徽标放在欢迎屏幕上，并可能更改背景。

所以我正在为学校编写Javascript项目。该网页应该是漫画的一般信息目录。 HTML文档具有Javascript，jQuery，HTML和CSS元素。现在，我对HTML和CSS有一定的经验，但对Javascript却几乎没有经验。我一直尝试使用不同的标识符和选择器，但没有一个可行。我的代码没有任何反应，相反，当页面加载时，我的代码将快速显示在页面上，然后消失。是否因为jQuery正在使用移动CSS？我很困惑，只需要澄清一下即可。

   .imageHomelogo {
	    	width: 100%
	    	border-radius: 25px 5px 55px 0;
	    	}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
    <html>
     <head>
      <meta charset="utf-8">
      <title>Prime Comics</title>
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width"> 
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
	
   
     </head>
	
     <body>
      <section data-role="page" id="pgWelcome">
         <article role="main" class="ui-content">
	      <div class="divCenter">
	        <h1>Welcome to Our Information Directory of Thousands of Different Comics!</h1>
	     <img class="Homelogo" src="primecomicslogo.jpg" alt="Logo">
	 <p><a href="#pgHome" data-role="button" data-icon="home" data-transition="flip">Home</a></p>
	</div>
     </article>
   </section>
 </body>

</html>

因此，对于CSS代码，我希望将徽标和文本与h1容器居中放置在一起，但事实并非如此。我在做什么错了？

Answer 1

应将其包装在<style>标记中，并且您的选择器必须与标记类匹配。

<style>
  .imageHomelogo {
    width: 100%
    border-radius: 25px 5px 55px 0;
  }
</style>

我在imageHomeLogo中找不到任何标签，因此这可能是您的代码的另一个问题。

Answer 2

在这里，您犯了一些错误。首先，我们在<style></style>标签内编写内部CSS，您应该在<style></style>标签内编写内部CSS。其次，没有名称为.imageHomelogo的类，在图像部分中，您使用了名称为.Homelogo的类。因此，两个类名应该相同。另外，您还犯了一个错误，即您没有关闭<section>标签，这不好。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Prime Comics</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
        <style type="text/css">
    	   h1 {
    		text-align: center;
    	   }
	   .Homelogo {
	        width: 100%;
	        border-radius: 25px 5px 55px 0;
	   }
        </style>
</head>
<body>
    <section data-role="page" id="pgWelcome">
	<article role="main" class="ui-content">
		<div class="divCenter">
		     <h1>Welcome to Our Information Directory of Thousands of Different Comics!</h1>
		     <img class="Homelogo" src="https://www.w3schools.com/howto/img_snow.jpg" alt="Logo">
		     <p><a href="#pgHome" data-role="button" data-icon="home" data-transition="flip">Home</a></p>
		</div>
	</article>
    </section>
</body>
</html>

Answer 3

<!doctype html>
<html>

 <head>
  <meta charset="utf-8">
  <title>Prime Comics</title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width"> 
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<style>
  .imageHomelogo {
        width: 100%;
        border-radius: 25px 5px 55px 0;
        }
    </style>        
 </head>

 <body>
  <section data-role="page" id="pgWelcome">
     <article role="main" class="ui-content">
      <div class="divCenter">
        <h1>Welcome to Our Information Directory of Thousands of Different Comics!</h1>
     <img class="imageHomelogo" src="https://dummyimage.com/600x400/000/fff" alt="Logo">
 <p><a href="#pgHome" data-role="button" data-icon="home" data-transition="flip">Home</a></p>
</div>
 </article>
 </section>
 </body>
</html>

首先，您需要将css代码包装在样式标签中。
没有这些样式标签，浏览器会将您的代码视为常规html内容。响应类启动后，jquery mobile将其从视口中隐藏起来。因此，您正在查看它片刻，然后它消失了。
整个网页中没有与imageHomelogo作为类名匹配的html元素。因此，您的CSS样式无效
您已经忘记在宽度：100％之后添加分号。应该是width：100％;

请更正上述问题，您的代码将完全正常。

为什么我的CSS代码在HTML文档中不起作用？

3 个答案: