Question

我的CSS / HTML有一个奇怪的问题

这是我的代码

＆＃13;

a:hover {
	color: deeppink;
	transition: all 0.2s ease-out
}

.logo {
	height: 300px;
	margin-top: -100px;
	transition: all 0.2s ease-in;
	transform: scale(1)
}
	
.logo:hover {
	transition: all 0.2s ease-in;
	transform: scale(1.05)
}


.p1 {
	margin-left: 50px
}

.p1::first-letter {
	font-size: 2em;
	font-style: italic;
	font-weight: bold
}

.p dwnld1 {
	margin-top: 3%
}

.contactcontenu {
	text-align: center;
	margin-top: 5%
 }

＆＃13;

<html>
	<link href="stylekalaha.css" rel="stylesheet" type="text/css" />
	<head>
		<title>Le Jeu du Kalaha</title>
	</head>
	
	<body>
	
		<h1> <img class ="logo" src="images/logoweb.png"></h1>
		
		<div class="bandeau">
			<div class="left"> <a href="index.html"> Projet </a></div>
			<div class="gauche"><a href="regles.html"> Règles </a></div>
			<div class="droite"><a href="download.html"> Téléchargement </a></div>
			<div class="right"> Contacts </div>
		</div>
		
		<div class="contactcontenu"> <center>
<form action="mailto:a.bounas@yahoo.fr" name="envoi" method=POST enctype="text/plain">
<table border="0">
	<tr>
		<td>
			<p><b>Nom : </b><input name="nom"size=50 maxlength=50></p>
			<p><b>Prenom : </b><input name="PRENOM"size=50 maxlength=50></p>
			<p><b>Mail : </b><input name="mail" size=50 maxlength=50></p>
			<textarea name="message" cols="60" rows="5"></textarea>
		</td>
	</tr>
</table>
		<input type="submit" value="Envoyer" name="Envoyer">
		<input type="reset" name="Submit" value="Effacer">
</form>


</center></div>
			<div class="end"> </div>
</body>
</html>

＆＃13;

我的转换在我的其他html文件上运行正常但不适用于此文件。当我加载网页时，我的div class=bandeau是动画的，从页面中间到顶部稍微滑动，如果我删除了我的javascript，则没有问题

那么我的javascript如何影响这个html页面？因为其他人工作正常，我的徽标就像我想要的那样动画我有图像转换+加载后的这种转换，很奇怪......

Answer 1

您的链接标记不在头部内部，因此您的样式表无法加载。

＆＃13;

a:hover {
	color: deeppink;
	transition: all 0.2s ease-out
}

.logo {
	height: 300px;
	margin-top: -100px;
	transition: all 0.2s ease-in;
	transform: scale(1)
}
	
.logo:hover {
	transition: all 0.2s ease-in;
	transform: scale(1.05)
}


.p1 {
	margin-left: 50px
}

.p1::first-letter {
	font-size: 2em;
	font-style: italic;
	font-weight: bold
}

.p dwnld1 {
	margin-top: 3%
}

.contactcontenu {
	text-align: center;
	margin-top: 5%
 }

＆＃13;

<html>
	
	<head>
        <link href="stylekalaha.css" rel="stylesheet" type="text/css" />
		<title>Le Jeu du Kalaha</title>
	</head>
	
	<body>
	
		<h1> <img class ="logo" src="images/logoweb.png"></h1>
		
		<div class="bandeau">
			<div class="left"> <a href="index.html"> Projet </a></div>
			<div class="gauche"><a href="regles.html"> Règles </a></div>
			<div class="droite"><a href="download.html"> Téléchargement </a></div>
			<div class="right"> Contacts </div>
		</div>
		
		<div class="contactcontenu"> <center>
<form action="mailto:a.bounas@yahoo.fr" name="envoi" method=POST enctype="text/plain">
<table border="0">
	<tr>
		<td>
			<p><b>Nom : </b><input name="nom"size=50 maxlength=50></p>
			<p><b>Prenom : </b><input name="PRENOM"size=50 maxlength=50></p>
			<p><b>Mail : </b><input name="mail" size=50 maxlength=50></p>
			<textarea name="message" cols="60" rows="5"></textarea>
		</td>
	</tr>
</table>
		<input type="submit" value="Envoyer" name="Envoyer">
		<input type="reset" name="Submit" value="Effacer">
</form>


</center></div>
			<div class="end"> </div>
</body>
</html>

＆＃13;

使用javascript进行CSS过渡图像错误

1 个答案: