gpt4 book ai didi

HTML CSS 链接错误

转载 作者:太空宇宙 更新时间:2023-11-04 10:34:38 25 4
gpt4 key购买 nike

我在我的 html 代码和所有 HTML 编辑器中链接了样式 css,我的代码在我的网站上工作得非常好。要求:超链接图像应水平滚动。预期输出:所有图像都带有超链接,当页面打开时它们会自动滚动。实际输出:所有图像都带有超链接,但图像在我的页面上是垂直链接的。在所有编辑器上,我都看到图像在滚动。

该网站是一个wordpress网站这是我的代码片段。 CSS 来源:designshack.com

<!DOCTYPE html>
<html>
<head>
<style>

{margin: 0; padding: 0;}

body {

background: url('dark_geometric.png');
}

#container {
width: 1000px;
overflow: hidden;
margin: 50px auto;
background: white;
}

/*header*/
header {
width: 800px;
margin: 40px auto;
}

header h1 {
text-align: center;
font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
}

header p {
font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
text-align: justify;
}

/*photobanner*/
.photobanner {
height: 233px;
width: 3550px;
margin-bottom: 80px;
}

/*keyframe animations*/
.first {
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
-o-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}

@keyframes bannermove {
0% {
margin-left: 0;
}

100% {
margin-left: -2125px;
}
}

@-moz-keyframes bannermove {
0% {
margin-left: 0;
}

100% {
margin-left: -2125px;
}
}

@-webkit-keyframes bannermove {
0% {
margin-left: 0;
}

100% {
margin-left: -2125px;
}
}

@-ms-keyframes bannermove {
0% {
margin-left: 0;
}

100% {
margin-left: -2125px;
}
}

@-o-keyframes bannermove {
0% {
margin-left: 0;
}

100% {
margin-left: -2125px;
}
}

.photobanner {
height: 233px;
width: 3550px;
margin-bottom: 80px;
}

.photobanner img {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}

.photobanner img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
cursor: pointer;
-webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0 3px 5px rgba(0,0,0,0.2);
box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
</style>
</head>
<body>

<div class="photobanner">
<a href="mysite">
<img class="first" src="me.jpg" alt="" /> </a>
<a href="site"
<img src="ns.jpg" alt="" /></a>
<a href="mysite"
<img src="gu.jpg" alt="" /></a>
<a href="mysite"
<img src="ri.jpg" alt="" /></a>
<a href="mysite"
<img src="me.jpg" alt="" /></a>
<a href="mysite"
<img src="ns.jpg" alt="" /></a>
<a href="mysite"
<img src="gu.jpg" alt="" /></a>
<a href="mysite"
<img src="ri.jpg" alt="" /></a>
</div>

</body>
</html>

最佳答案

首先修复你的 html 语法?:

<div class="photobanner">
<a href="mysite">
<img class="first" src="me.jpg" alt="" />
</a>
<a href="site">
<img src="ns.jpg" alt="" />
</a>
<a href="mysite">
<img src="gu.jpg" alt="" />
</a>
<a href="mysite">
<img src="ri.jpg" alt="" />
</a>
<a href="mysite">
<img src="me.jpg" alt="" />
</a>
<a href="mysite">
<img src="ns.jpg" alt="" />
</a>
<a href="mysite">
<img src="gu.jpg" alt="" />
</a>
<a href="mysite">
<img src="ri.jpg" alt="" />
</a>
</div>

关于HTML CSS 链接错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36236506/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com