【发布时间】：2016-11-08 01:26:44
【问题描述】：
我正在学习网页设计，并且对它很陌生。所以请原谅任何无知的问题。我努力创建一个可以与我的 MagnificPopUp 灯箱画廊和我的自定义 css img 悬停效果一起使用的 img。这样做之后，当单击 img 时，它不再创建灯箱画廊，而是将图像加载到单独的页面中。我不明白为什么要这样做，我尝试了许多不同的类，例如“图像链接”，但它做同样的事情。
这是我的文件：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="./dist/jquery.magnific-popup.js">
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="./dist/magnific-popup.css">
<!-- Magnific Popup core JS file -->
<script src="./dist/jquery.magnific-popup.js"></script>
</head>
<body>
<!-- HEADER -->
<section id="header">
<h1 class="name">Jessica Shae</h1>
<div class="container heading">
<div class="row">
<div class="col-md-4 animated rotateInDownLeft">
<img src="img/7.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/2.jpg" class="display">
</div>
<div class="col-md-4 animated rotateInDownRight">
<img src="img/9.jpg" class="display">
</div>
<div class="row">
<div class="col-md-12 text-xs-center">
<a href="#gallery"<i class="fa fa-chevron-down fa-3x" aria-hidden="true"></i></a>
</div>
</div>
</section>
<!-- Gallery -->
<section id="gallery">
<h2 class="title">The Dark Room</h2>
<div class="container photo-collection wow animated fadeInUpBig">
<div class="row">
<div class="col-md-4 affect">
<a class="gallery-item" href="img/3.jpg" title="Title"><img src="img/3.jpg" class="work"></a>
</div>
<div class="col-md-4 affect">
<img src="img/10.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/4.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/18.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/6.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/17.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/5.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/11.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/14.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/20.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/13.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/16.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/1.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/15.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/12.jpg" class="work">
</div>
</div>
</div>
</section>
<section class="contact-me">
<div class="contact">
<h3><span class="white">Conta</span><span class="black">ct Me</span></h3>
</div>
<form method="post" action="#" class="contact-form">
<div class="row">
<div class="col span-1-of-3">
<label for="name">Name:</label>
</div>
<div class="col span-2-of-3">
<input type="text" name="name" id="name" placeholder="Your name" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="email">Email:</label>
</div>
<div class="col span-2-of-3">
<input type="email" name="email" id="email" placeholder="Your email" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label>Drop me a line:</label>
</div>
<div class="col span-2-of-3">
<textarea name="message" placeholder="Your message"></textarea>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label> </label>
</div>
<div class="col span-2-of-3">
<input type="submit" value="Send it!">
</div>
</div>
</div>
</form>
</section>
<section class="copywrite">
<h6>Copywrite © 2016 built by Temple Cerulean Naylor</h6>
</section>
<script>
$(document).ready(function() {
$('.gallery-item').magnificPopup({
type: 'image'});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/wow.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>
</html>
【问题讨论】：
-
请使用 jsfiddle 或 codepen 向我们展示您迄今为止所做的一切。
-
转到codepen.io/pen 并粘贴您的代码。我知道您是初学者，所以不要忘记保存笔并在此处发布链接，以便我们可以看到您的工作设计。
-
但是该页面不像在我的浏览器中那样显示。整个背景是白色而不是黑色。如果您只是需要它来查看我的完整代码，那么您就可以了，但如果不需要，请告诉我。谢谢。
-
<link rel="stylesheet" href="./dist/jquery.magnific-popup.js">这不是 css
标签： javascript jquery html css image