锚标记转到网页的错误部分 [英] Anchor tag goes to the wrong section of a web page
问题描述
Here's an actual video recording of what the problem is (I'm not trying to advertise in any way): https://www.youtube.com/watch?v=7b38cQ0VGWI
因此,我出于练习的目的创建了一个网站,并且一切进展顺利,直到遇到这个问题.我有2个<nav>
菜单,其中顶部导航栏将一个导航到另一页,而第二导航栏将一个导航到同一页面中的某个部分.但是我在第二个导航栏上遇到了问题.所以下面是我正在使用的html:
So I'm creating a website just for practice's sake, and everything was going smoothly until I ran into this problem. I have 2 <nav>
menus, where the top main nav bar leads one to another page, while the 2nd nav bar leads one to a certain section within the same page. But I'm having problems with the 2nd nav bar. So below is the html I'm using:
<nav class="navbar">
<div class="container">
<ul>
<li><a href="#drama">Drama</a></li>
<li><a href="#comedy">Comedy</a></li>
<li><a href="#romance">Romance</a></li>
<li><a href="#action">Action</a></li>
</ul>
</div>
</nav>
下面是一系列的电影图片列表,但我仅以下面的输入2为例:
After this is a series of movie picture lists but I'm only going input 2 below as an example:
<div class="grid-picture">
<!--First row of movies-->
<div id="action">
<div class="movies">
<a href="https://www.imdb.com/title/tt2911666/" target="_blank">
<img src="https://images-na.ssl-images-amazon.com/images/I/91atCmxi6hL._UR1200,1600_RI_.jpg">
<h3>John Wick</h3>
<p>Action, Crime, Triller</p>
</a>
</div>
</div>
<br>
<!--1st row of romance movies-->
<div id="romance">
<div class="movies">
<a href="https://www.imdb.com/title/tt1638002/?ref_=nv_sr_srsg_0">
<img src="https://kbimages1-a.akamaihd.net/beb95aaa-36b7-444d-8557-0cb7efa8e898/1200/1200/False/love-rosie-1.jpg">
<h3>Love, Rosie</h3>
<p>Comedy, Romance</p>
</a>
</div>
</div>
</div>
如您所见,"John Wick"位于div标签中,ID为"action",而"Love,Rosie"位于div标签中,ID为"romance".现在,动作"链接可以正常工作;它将页面准确地定向到动作" ID中的电影所在的位置.但是,当我单击浪漫"链接时,它并没有带我进入网站底部.相反,它会将我带到与单击操作"链接相同的位置.
As you can see, "John Wick" is within a div tag with an ID of "action", while "Love, Rosie" is within a div tag with an ID of "romance." Now, the "Action" link works fine; it directs the page exactly where the movies within the ID of "action" are. However, when I click the "Romance" link, it doesn't take me to the bottom of the website. Rather, it takes me to the same place as if I clicked the "Action" link.
因此,基本上,即使我确保输入href="#romance"
,并且也确保将影片"Love,Rosie"包裹在ID为"romance"的div标签中,锚标签对我来说仍然不起作用.外部链接可以正常工作,只是内部链接不能像我想象的那样正常工作.我还检查了四张是否有未封闭的div标签,但这不是原来的四倍.
So basically, the anchor tag isn't working for me even though I made sure to input href="#romance"
and also made sure to wrap around the movie "Love, Rosie" within a div tag with an ID of "romance". External links work just fine, only that internal links aren't working as I assumed it would. I also quadruple checked if I had any unclosed div tags, but that wasn't the case.
所有电影都在同一页面上.
All of the movies are in the same page.
下面是CSS(对不起,组织混乱,目前仍在进行此工作):
Below is the CSS (sorry for the disorganization, still working on that):
body {
margin: 0;
line-height: 1.6em;
font-size: 16px;
font-family: sans-serif;
}
.container {
width: 80%;
margin: auto;
overflow:hidden;
}
nav {
margin: 0;
color: #E52EAE;
z-index: 1;
}
nav ul {
list-style: none;
padding: 0;
}
nav li {
display: inline;
}
nav a{
text-decoration: none;
color: white;
padding-right: 18px;
padding-bottom: 5px;
text-align: center;
float: right;
}
.navbar {
margin-right: 227px;
position: relative;
font-size: 30px;
color: #22D8E5;
}
.navbar a:visited {
color: #22D8E5;
}
.navbar a:hover {
color: red;
}
#showcase {
background-image:url('http://getwallpapers.com/wallpaper/full/c/4/8/1367231-beautiful-black-cool-background-1920x1200-for-windows-7.jpg');
background-position: center right;
background-color: black;
background-size: 850px;
background-position: left;
height: 300px;
text-align: center;
color: white;
}
.movies {
box-sizing: border-box;
width: 25%;
float: left;
padding: 1px;
}
.movies img {
height: 500px;
width: 100%;
}
a:link {
text-decoration: none;
color: black;
}
a:visited {
color: coral;
}
a:hover {
color: red;
}
这是整个html:
<!DOCTYPE html>
<html>
<head>
<title>My Video Library</title>
<link rel="stylesheet" type="text/css" href="movies.css">
</head>
<body>
<section id="showcase">
<nav id="main-nav">
<div class="container">
<ul>
<li><a href="#">Etc</a></li>
<li><a href="#">Animation</a></li>
<li><a href="#">LaughTime</a></li>
<li><a href="movies.index.html">Movies</a></li>
<li><a href="practice3.index.html">Home</a></li>
</ul>
</div>
</nav>
<div class="container">
<h1>Movie List</h1>
<nav class="navbar">
<div class="container">
<ul>
<li><a href="#drama">Drama</a></li>
<li><a href="#comedy">Comedy</a></li>
<li><a href="#romance">Romance</a></li>
<li><a href="#action">Action</a></li>
</ul>
</div>
</nav>
</div>
</section>
<div class="grid-picture">
<!--First row of movies-->
<div id="action">
<div class="movies">
<a href="https://www.imdb.com/title/tt2911666/" target="_blank">
<img src="https://images-na.ssl-images-amazon.com/images/I/91atCmxi6hL._UR1200,1600_RI_.jpg" alt="john wick">
<h3>John Wick</h3>
<p>Action, Crime, Triller</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2802144/" target="_blank">
<img src="https://cdn.collider.com/wp-content/uploads/2015/02/kingsman-the-secret-service-final-poster.jpg">
<h3>Kingsmen</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2381249/" target="_blank">
<img src="https://images-na.ssl-images-amazon.com/images/I/81wcVvqV8pL._RI_.jpg">
<h3>Mission Impossible: Rogue Nation</h3>
<p>Action, Adventure, Thriller</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt0468569/" target="_blank">
<img src="https://images-na.ssl-images-amazon.com/images/I/91KkWf50SoL._SL1500_.jpg">
<h3>The Dark Knight</h3>
<p>Action, Crime, Drama</p>
</a>
</div>
<br>
<!--2nd row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt1431045/" target="_blank">
<img src="https://pics.filmaffinity.com/Deadpool-834516798-large.jpg">
<h3>Deadpool</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt3315342/" target="_blank">
<img src="https://vignette.wikia.nocookie.net/xmenmovies/images/2/22/Logan-Poster-5.jpg/revision/latest?cb=20170131012906">
<h3>Logan</h3>
<p>Action, Drama, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt6806448/" target="_blank">
<img src="https://musicart.xboxlive.com/7/e9225100-0000-0000-0000-000000000002/504/image.jpg?w=1920&h=1080">
<h3>Fast & Furious: Hobbs & Shaw</h3>
<p>Action, Adventure</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt0371746/" target="_blank">
<img src="https://cdn.collider.com/wp-content/uploads/2015/04/iron-man-1-poster.jpg">
<h3>Iron Man</h3>
<p>Action, Adventure, Sci-Fi</p>
</a>
</div>
<br>
<!--3rd row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt3501632/" target="_blank">
<img src="https://m.media-amazon.com/images/M/MV5BMjMyNDkzMzI1OF5BMl5BanBnXkFtZTgwODcxODg5MjI@._V1_.jpg">
<h3>Thor: Ragnarok</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1631867/" target="_blank">
<img src="http://collider.com/wp-content/uploads/edge-of-tomorrow-poster3.jpg">
<h3>Edge of Tomorrow</h3>
<p>Action, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2024469/?ref_=nv_sr_srsg_0" target="_blank">
<img src="https://m.media-amazon.com/images/M/MV5BOTI3NzcxMjkzMl5BMl5BanBnXkFtZTgwMDY0NTQ0MDE@._V1_.jpg">
<h3>Non-Stop</h3>
<p>Action, Thriller, Mystery</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt0936501/?ref_=nv_sr_srsg_0" target="_blank">
<img src="https://images-na.ssl-images-amazon.com/images/I/91gANPtj-7L._SL1500_.jpg">
<h3>Taken</h3>
<p>Action, Thriller</p>
</a>
</div>
<br>
<!--4th row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt4154756/?ref_=nv_sr_srsg_3" target="_blank">
<img src="https://m.media-amazon.com/images/M/MV5BMjMxNjY2MDU1OV5BMl5BanBnXkFtZTgwNzY1MTUwNTM@._V1_.jpg">
<h3>Avengers: Infinity War</h3>
<p>Action, Adventure, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt4154796/?ref_=nv_sr_srsg_0" target="_blank">
<img src="https://m.media-amazon.com/images/M/MV5BMTc5MDE2ODcwNV5BMl5BanBnXkFtZTgwMzI2NzQ2NzM@._V1_.jpg">
<h3>Avengers: Endgame</h3>
<p>Action, Adventure, Drama</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt6146586/?ref_=nv_sr_srsg_0" target="_blank">
<img src="https://i.pinimg.com/originals/1b/03/a1/1b03a1a68c4616f8fb203d00a2849a9a.jpg">
<h3>John Wick 3: Chapter 3 - Parabellum</h3>
<p>Action, Crime, Thriller</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1270797/?ref_=nv_sr_srsg_0">
<img src="https://images-na.ssl-images-amazon.com/images/I/91ZwG8Ytb3L._RI_.jpg">
<h3>Venom</h3>
<p>Action, Sci-Fi, Thriller</p>
</a>
</div>
<br>
<!--5th row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt2015381/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BMTAwMjU5OTgxNjZeQTJeQWpwZ15BbWU4MDUxNDYxODEx._V1_.jpg">
<h3>Guardians of the Galaxy</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt3498820/?ref_=nv_sr_srsg_6">
<img src="https://m.media-amazon.com/images/M/MV5BMjQ0MTgyNjAxMV5BMl5BanBnXkFtZTgwNjUzMDkyODE@._V1_.jpg">
<h3>Captain America: Civil War</h3>
<p>Action, Adventure, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt0145487/?ref_=nv_sr_srsg_7">
<img src="https://images-na.ssl-images-amazon.com/images/I/71moJUZkLwL._SL1285_.jpg">
<h3>Spiderman</h3>
<p>Action, Adventure, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt4912910/?ref_=nv_sr_srsg_0">
<img src="https://cdn.collider.com/wp-content/uploads/2018/05/mission-impossible-fallout-poster-tom-cruise.jpg">
<h3>Mission Impossible: Fallout</h3>
<p>Action, Adventure, Thriller</p>
</a>
</div>
<br>
<!--6th row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt1790864/?ref_=nv_sr_srsg_3">
<img src="https://images-na.ssl-images-amazon.com/images/I/91mPBc21TcL._RI_.jpg">
<h3>The Maze Runner</h3>
<p>Action, Mystery, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt5095030/?ref_=nv_sr_srsg_3">
<img src="https://images-na.ssl-images-amazon.com/images/I/A1CGAvzql5L._SL1500_.jpg">
<h3>Ant-Man and the Wasp</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2082221/?ref_=nv_sr_srsg_0">
<img src="http://mblogthumb1.phinf.naver.net/MjAxODAxMTNfMjk2/MDAxNTE1NzcyNTg1MTc0.NeCkyOl-gJwl4ksYNeAmYSHCHg9iRVLpCh0Qy4zFR1Ag.MfdAtUo9Efw0rx_8zKgkzAAj1azlUfm-ov3qgDuLRbUg.JPEG.zzid2/movie_image.jpg?type=w800">
<h3>범죄와의 전</h3>
<p>Action, Crime, Drama</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2625030/?ref_=nv_sr_srsg_6">
<img src="http://mblogthumb4.phinf.naver.net/20130506_151/refine9_136781657095534Gd5_JPEG/movie_image.jpg?type=w2">
<h3>신세계</h3>
<p>Action, Crime, Drama</p>
</a>
</div>
</div>
<br>
<!--1st row of romance movies-->
<div id="romance">
<div class="movies">
<a href="https://www.imdb.com/title/tt1638002/?ref_=nv_sr_srsg_0">
<img src="https://kbimages1-a.akamaihd.net/beb95aaa-36b7-444d-8557-0cb7efa8e898/1200/1200/False/love-rosie-1.jpg">
<h3>Love, Rosie</h3>
<p>Comedy, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2194499/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BMTA1ODUzMDA3NzFeQTJeQWpwZ15BbWU3MDgxMTYxNTk@._V1_.jpg">
<h3>About Time</h3>
<p>Comedy, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1041829/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BOGM5YTNiYzktNmEwZC00ZjE5LWIyNzEtOTUwNDE0NmVkYzE3XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg">
<h3>The Proposal</h3>
<p>Comedy, Drama, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1129423/">
<img src="https://m.media-amazon.com/images/M/MV5BMGZhYzFjY2ItNDVmZi00Y2Q1LWFmMDgtMzAwYTU3NTI3ZGU4XkEyXkFqcGdeQXVyMTMxMTY0OTQ@._V1_.jpg">
<h3>Fireproof</h3>
<p>Drama, Romance</p>
</a>
</div>
</div>
<br>
<!--1st row of comedy movies-->
<div id="comedy">
<div class="movies">
<a href="https://www.imdb.com/title/tt1638002/?ref_=nv_sr_srsg_0">
<img src="https://kbimages1-a.akamaihd.net/beb95aaa-36b7-444d-8557-0cb7efa8e898/1200/1200/False/love-rosie-1.jpg">
<h3>Love, Rosie</h3>
<p>Comedy, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2194499/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BMTA1ODUzMDA3NzFeQTJeQWpwZ15BbWU3MDgxMTYxNTk@._V1_.jpg">
<h3>About Time</h3>
<p>Comedy, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1041829/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BOGM5YTNiYzktNmEwZC00ZjE5LWIyNzEtOTUwNDE0NmVkYzE3XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg">
<h3>The Proposal</h3>
<p>Comedy, Drama, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1129423/">
<img src="https://m.media-amazon.com/images/M/MV5BMGZhYzFjY2ItNDVmZi00Y2Q1LWFmMDgtMzAwYTU3NTI3ZGU4XkEyXkFqcGdeQXVyMTMxMTY0OTQ@._V1_.jpg">
<h3>Fireproof</h3>
<p>Drama, Romance</p>
</a>
</div>
</div>
</div>
</body>
</html>
推荐答案
下面是您提供的代码的有效示例.更改为:
Below is a working example of the code you provided. The changes are:
- 在
.movies
CSS类中添加了position:relative;
- 在CSS中添加了
.grid-picture { position:relative; float:left; }
- 在每个电影类别关闭
</div>
标记之前添加<br style="clear:both;"/>
,以确保div调整大小以匹配其内容的高度(老把戏)
- added
position:relative;
to.movies
CSS class - added
.grid-picture { position:relative; float:left; }
to the CSS - added
<br style="clear:both;"/>
right before each movie category closing</div>
tag in order to make sure that the div resizes to match the height of its content (old trick)
注意:我也整理了一下您的代码.您可以运行下面的示例进行测试.
Note: I also tidied up your code a bit. You can run the example below to test it.
body {
margin: 0;
line-height: 1.6em;
font-size: 16px;
font-family: sans-serif;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
nav {
margin: 0;
color: #E52EAE;
z-index: 1;
}
nav ul {
list-style: none;
padding: 0;
}
nav li {
display: inline;
}
nav a{
text-decoration: none;
color: white;
padding-right: 18px;
padding-bottom: 5px;
text-align: center;
float: right;
}
.navbar {
margin-right: 227px;
position: relative;
font-size: 30px;
color: #22D8E5;
}
.navbar a:visited {
color: #22D8E5;
}
.navbar a:hover {
color: red;
}
#showcase {
background-image: url('http://getwallpapers.com/wallpaper/full/c/4/8/1367231-beautiful-black-cool-background-1920x1200-for-windows-7.jpg');
background-position: center right;
background-color: black;
background-size: 850px;
background-position: left;
height: 300px;
text-align: center;
color: white;
}
.movies {
position:relative;
float:left;
box-sizing: border-box;
width: 25%;
padding: 1px;
}
.movies img {
height: 500px;
width: 100%;
}
a:link {
text-decoration: none;
color: black;
}
a:visited {
color: coral;
}
a:hover {
color: red;
}
.grid-picture {
position:relative;
float:left;
}
<!DOCTYPE html>
<html>
<head>
<title>My Video Library</title>
<link rel="stylesheet" type="text/css" href="movies.css">
</head>
<body>
<section id="showcase">
<nav id="main-nav">
<div class="container">
<ul>
<li><a href="#">Etc</a></li>
<li><a href="#">Animation</a></li>
<li><a href="#">LaughTime</a></li>
<li><a href="movies.index.html">Movies</a></li>
<li><a href="practice3.index.html">Home</a></li>
</ul>
</div>
</nav>
<div class="container">
<h1>Movie List</h1>
<nav class="navbar">
<div class="container">
<ul>
<li><a href="#drama">Drama</a></li>
<li><a href="#comedy">Comedy</a></li>
<li><a href="#romance">Romance</a></li>
<li><a href="#action">Action</a></li>
</ul>
</div>
</nav>
</div>
</section>
<div class="grid-picture">
<!--First row of movies-->
<div id="action">
<div class="movies">
<a href="https://www.imdb.com/title/tt2911666/" target="_blank">
<img src="https://images-na.ssl-images-amazon.com/images/I/91atCmxi6hL._UR1200,1600_RI_.jpg" alt="john wick">
<h3>John Wick</h3>
<p>Action, Crime, Triller</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2802144/" target="_blank">
<img src="https://cdn.collider.com/wp-content/uploads/2015/02/kingsman-the-secret-service-final-poster.jpg">
<h3>Kingsmen</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2381249/" target="_blank">
<img src="https://images-na.ssl-images-amazon.com/images/I/81wcVvqV8pL._RI_.jpg">
<h3>Mission Impossible: Rogue Nation</h3>
<p>Action, Adventure, Thriller</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt0468569/" target="_blank">
<img src="https://images-na.ssl-images-amazon.com/images/I/91KkWf50SoL._SL1500_.jpg">
<h3>The Dark Knight</h3>
<p>Action, Crime, Drama</p>
</a>
</div>
<br>
<!--2nd row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt1431045/" target="_blank">
<img src="https://pics.filmaffinity.com/Deadpool-834516798-large.jpg">
<h3>Deadpool</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt3315342/" target="_blank">
<img src="https://vignette.wikia.nocookie.net/xmenmovies/images/2/22/Logan-Poster-5.jpg/revision/latest?cb=20170131012906">
<h3>Logan</h3>
<p>Action, Drama, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt6806448/" target="_blank">
<img src="https://musicart.xboxlive.com/7/e9225100-0000-0000-0000-000000000002/504/image.jpg?w=1920&h=1080">
<h3>Fast & Furious: Hobbs & Shaw</h3>
<p>Action, Adventure</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt0371746/" target="_blank">
<img src="https://cdn.collider.com/wp-content/uploads/2015/04/iron-man-1-poster.jpg">
<h3>Iron Man</h3>
<p>Action, Adventure, Sci-Fi</p>
</a>
</div>
<br>
<!--3rd row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt3501632/" target="_blank">
<img src="https://m.media-amazon.com/images/M/MV5BMjMyNDkzMzI1OF5BMl5BanBnXkFtZTgwODcxODg5MjI@._V1_.jpg">
<h3>Thor: Ragnarok</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1631867/" target="_blank">
<img src="http://collider.com/wp-content/uploads/edge-of-tomorrow-poster3.jpg">
<h3>Edge of Tomorrow</h3>
<p>Action, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2024469/?ref_=nv_sr_srsg_0" target="_blank">
<img src="https://m.media-amazon.com/images/M/MV5BOTI3NzcxMjkzMl5BMl5BanBnXkFtZTgwMDY0NTQ0MDE@._V1_.jpg">
<h3>Non-Stop</h3>
<p>Action, Thriller, Mystery</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt0936501/?ref_=nv_sr_srsg_0" target="_blank">
<img src="https://images-na.ssl-images-amazon.com/images/I/91gANPtj-7L._SL1500_.jpg">
<h3>Taken</h3>
<p>Action, Thriller</p>
</a>
</div>
<br>
<!--4th row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt4154756/?ref_=nv_sr_srsg_3" target="_blank">
<img src="https://m.media-amazon.com/images/M/MV5BMjMxNjY2MDU1OV5BMl5BanBnXkFtZTgwNzY1MTUwNTM@._V1_.jpg">
<h3>Avengers: Infinity War</h3>
<p>Action, Adventure, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt4154796/?ref_=nv_sr_srsg_0" target="_blank">
<img src="https://m.media-amazon.com/images/M/MV5BMTc5MDE2ODcwNV5BMl5BanBnXkFtZTgwMzI2NzQ2NzM@._V1_.jpg">
<h3>Avengers: Endgame</h3>
<p>Action, Adventure, Drama</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt6146586/?ref_=nv_sr_srsg_0" target="_blank">
<img src="https://i.pinimg.com/originals/1b/03/a1/1b03a1a68c4616f8fb203d00a2849a9a.jpg">
<h3>John Wick 3: Chapter 3 - Parabellum</h3>
<p>Action, Crime, Thriller</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1270797/?ref_=nv_sr_srsg_0">
<img src="https://images-na.ssl-images-amazon.com/images/I/91ZwG8Ytb3L._RI_.jpg">
<h3>Venom</h3>
<p>Action, Sci-Fi, Thriller</p>
</a>
</div>
<br>
<!--5th row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt2015381/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BMTAwMjU5OTgxNjZeQTJeQWpwZ15BbWU4MDUxNDYxODEx._V1_.jpg">
<h3>Guardians of the Galaxy</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt3498820/?ref_=nv_sr_srsg_6">
<img src="https://m.media-amazon.com/images/M/MV5BMjQ0MTgyNjAxMV5BMl5BanBnXkFtZTgwNjUzMDkyODE@._V1_.jpg">
<h3>Captain America: Civil War</h3>
<p>Action, Adventure, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt0145487/?ref_=nv_sr_srsg_7">
<img src="https://images-na.ssl-images-amazon.com/images/I/71moJUZkLwL._SL1285_.jpg">
<h3>Spiderman</h3>
<p>Action, Adventure, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt4912910/?ref_=nv_sr_srsg_0">
<img src="https://cdn.collider.com/wp-content/uploads/2018/05/mission-impossible-fallout-poster-tom-cruise.jpg">
<h3>Mission Impossible: Fallout</h3>
<p>Action, Adventure, Thriller</p>
</a>
</div>
<br>
<!--6th row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt1790864/?ref_=nv_sr_srsg_3">
<img src="https://images-na.ssl-images-amazon.com/images/I/91mPBc21TcL._RI_.jpg">
<h3>The Maze Runner</h3>
<p>Action, Mystery, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt5095030/?ref_=nv_sr_srsg_3">
<img src="https://images-na.ssl-images-amazon.com/images/I/A1CGAvzql5L._SL1500_.jpg">
<h3>Ant-Man and the Wasp</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2082221/?ref_=nv_sr_srsg_0">
<img src="http://mblogthumb1.phinf.naver.net/MjAxODAxMTNfMjk2/MDAxNTE1NzcyNTg1MTc0.NeCkyOl-gJwl4ksYNeAmYSHCHg9iRVLpCh0Qy4zFR1Ag.MfdAtUo9Efw0rx_8zKgkzAAj1azlUfm-ov3qgDuLRbUg.JPEG.zzid2/movie_image.jpg?type=w800">
<h3>범죄와의 전</h3>
<p>Action, Crime, Drama</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2625030/?ref_=nv_sr_srsg_6">
<img src="http://mblogthumb4.phinf.naver.net/20130506_151/refine9_136781657095534Gd5_JPEG/movie_image.jpg?type=w2">
<h3>신세계</h3>
<p>Action, Crime, Drama</p>
</a>
</div>
<br style="clear:both;" />
</div>
<br>
<!--1st row of romance movies-->
<div id="romance">
<div class="movies">
<a href="https://www.imdb.com/title/tt1638002/?ref_=nv_sr_srsg_0">
<img src="https://kbimages1-a.akamaihd.net/beb95aaa-36b7-444d-8557-0cb7efa8e898/1200/1200/False/love-rosie-1.jpg">
<h3>Love, Rosie</h3>
<p>Comedy, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2194499/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BMTA1ODUzMDA3NzFeQTJeQWpwZ15BbWU3MDgxMTYxNTk@._V1_.jpg">
<h3>About Time</h3>
<p>Comedy, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1041829/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BOGM5YTNiYzktNmEwZC00ZjE5LWIyNzEtOTUwNDE0NmVkYzE3XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg">
<h3>The Proposal</h3>
<p>Comedy, Drama, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1129423/">
<img src="https://m.media-amazon.com/images/M/MV5BMGZhYzFjY2ItNDVmZi00Y2Q1LWFmMDgtMzAwYTU3NTI3ZGU4XkEyXkFqcGdeQXVyMTMxMTY0OTQ@._V1_.jpg">
<h3>Fireproof</h3>
<p>Drama, Romance</p>
</a>
</div>
</div>
<br>
<!--1st row of comedy movies-->
<div id="comedy">
<div class="movies">
<a href="https://www.imdb.com/title/tt1638002/?ref_=nv_sr_srsg_0">
<img src="https://kbimages1-a.akamaihd.net/beb95aaa-36b7-444d-8557-0cb7efa8e898/1200/1200/False/love-rosie-1.jpg">
<h3>Love, Rosie</h3>
<p>Comedy, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2194499/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BMTA1ODUzMDA3NzFeQTJeQWpwZ15BbWU3MDgxMTYxNTk@._V1_.jpg">
<h3>About Time</h3>
<p>Comedy, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1041829/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BOGM5YTNiYzktNmEwZC00ZjE5LWIyNzEtOTUwNDE0NmVkYzE3XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg">
<h3>The Proposal</h3>
<p>Comedy, Drama, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1129423/">
<img src="https://m.media-amazon.com/images/M/MV5BMGZhYzFjY2ItNDVmZi00Y2Q1LWFmMDgtMzAwYTU3NTI3ZGU4XkEyXkFqcGdeQXVyMTMxMTY0OTQ@._V1_.jpg">
<h3>Fireproof</h3>
<p>Drama, Romance</p>
</a>
</div>
<br style="clear:both;" />
</div>
</div>
</body>
</html>
这篇关于锚标记转到网页的错误部分的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!