Fatal编程技术网
  • html/
  • Html 锚定标记指向网页的错误部分

Html 锚定标记指向网页的错误部分

html css

Html 锚定标记指向网页的错误部分,html,css,anchor,href,Html,Css,Anchor,Href,下面是一段关于问题所在的实际视频记录（我不想以任何方式做广告）： 所以我只是为了练习而创建了一个网站，在遇到这个问题之前，一切都进展顺利。我有两个菜单，其中顶部的主导航条将一个导航条引导至另一个页面，而第二个导航条将一个导航条引导至同一页面中的某个部分。但是第二导航栏有问题。下面是我使用的html： <nav class="navbar"> <div class="container"> <ul>

下面是一段关于问题所在的实际视频记录（我不想以任何方式做广告）：

所以我只是为了练习而创建了一个网站，在遇到这个问题之前，一切都进展顺利。我有两个
菜单，其中顶部的主导航条将一个导航条引导至另一个页面，而第二个导航条将一个导航条引导至同一页面中的某个部分。但是第二导航栏有问题。下面是我使用的html：

<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>
下面是整个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>


我的视频库

    

  • 

  • 

  • 

  • 

  • 


电影列表

    

  • 

  • 

  • 

  •
我想你正在寻找这个
画廊过滤器

过滤器选择（“全部”）
函数过滤器选择（c）{
变量x，i；
x=document.getElementsByClassName（“列”）；
如果（c==“全部”）c=“”；
对于（i=0；i-1）w3AddClass（x[i]，“show”）；
}
}
函数w3AddClass（元素、名称）{
变量i，arr1，arr2；
arr1=element.className.split（“”）；
arr2=name.split（“”）；
对于（i=0；i-1）{
arr1.拼接（arr1.indexOf（arr2[i]），1）；
}
}
element.className=arr1.join（“”）；
}
//将活动类添加到当前按钮（高亮显示）
var btnContainer=document.getElementById（“myBtnContainer”）；
var btns=btnContainer.getElementsByClassName（“btn”）；
对于（变量i=0；i
*{
框大小：边框框；
}
身体{
背景色：#f1f1；
填充：20px；
字体系列：Arial；
}
/*中心网站*/
梅因先生{
最大宽度：1000px；
保证金：自动；
}
h1{
字体大小：50px；
单词break：打破一切；
}
.行{
利润率：10px-16px；
}
/*在每列之间添加填充*/
一行
.row>列{
填充：8px；
}
/*创建三个相邻浮动的相等列*/
.栏目{
浮动：左；
宽度：33.33%；
显示：无；/*默认情况下隐藏所有元素*/
}
/*清除行后的浮动*/
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
/*内容*/
.内容{
背景色：白色；
填充：10px；
}
/*“show”类被添加到过滤的元素中*/
.表演{
显示：块；
}
/*设计按钮的样式*/
.btn{
边界：无；
大纲：无；
填充：12px 16px；
背景色：白色；
光标：指针；
}
.btn:悬停{
背景色：#ddd；
}
.btn.active{
背景色：#666；
颜色：白色；
}* {
框大小：边框框；
}
身体{
背景色：#f1f1；
填充：20px；
字体系列：Arial；
}
/*中心网站*/
梅因先生{
最大宽度：1000px；
保证金：自动；
}
h1{
字体大小：50px；
单词break：打破一切；
}
.行{
利润率：10px-16px；
}
/*在每列之间添加填充*/
一行
.row>列{
填充：8px；
}
/*创建三个相邻浮动的相等列*/
.栏目{
浮动：左；
宽度：33.33%；
显示：无；/*默认情况下隐藏所有元素*/
}
/*清除行后的浮动*/
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
/*内容*/
.内容{
背景色：白色；
填充：10px；
}
/*“show”类被添加到过滤的元素中*/
.表演{
显示：块；
}
/*设计按钮的样式*/
.btn{
边界：无；
大纲：无；
填充：12px 16px；
背景色：白色；
光标：指针；
}
.btn:悬停{
背景色：#ddd；
}
.btn.active{
背景色：#666；
颜色：白色；
}

MYLOGO.COM


文件夹
全部展示
本性
汽车
人

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;
}



<!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>