HTML5+CSS3学习笔记（五）相对定位、绝对定位、固定定位、粘滞定位【附练习：轮播图】

想要大口炫榴莲

已于 2023-03-23 19:21:55 修改

阅读量379

点赞数 1

分类专栏： HTML+CSS 文章标签： css css3 html5

于 2022-08-03 19:18:43 首次发布

本文链接：https://blog.csdn.net/yeee_f/article/details/126111230

版权

HTML+CSS 专栏收录该内容

10 篇文章 8 订阅

订阅专栏

HTML5+CSS3学习笔记（五）

本系列更多文章，可以查看专栏 HTML+CSS学习笔记

一、定位

定位（position）是一种高级的布局手段，通过设置position属性值可以将元素放到页面任意位置。

1. position属性

static： 默认值，元素静止不开启任何定位
relative： 开启元素的相对定位
absolute： 开启元素的绝对定位
fixed： 开启元素的固定定位
sticky： 开启元素的粘滞定位

下文中，如果提到开启定位，则指将position设置为非默认值，即relative、absolute、fixed、sticky均可。

2. 特点

定位类型	脱离文档流	参照元素	层级	滚动	其它变化
相对定位（relative）	不脱离	元素 $\color{orange}{原来的位置}$	提高	跟随滚动条滚动	不会影响本身是行内元素，还是块级元素
绝对定位（absolute）	脱离	$\color{blue}{离它最近}$ 的 $\color{blue}{开启了定位}$ 的 $\color{blue}{祖先元素}$ ；若无，则默认为初始包含块	提高	跟随滚动条滚动	$\color{darkblue}{行内元素变块元素，宽度由内容撑开}$
固定定位（fixed）	脱离	$\color{green}{浏览器视口}$	提高	$\color{purple}{不会}$ 跟随滚动条滚动	$\color{darkblue}{行内元素变块元素，宽度由内容撑开}$
粘滞定位（sticky）	不脱离	$\color{red}{距离最近}$ 且 $\color{red}{可滚动}$ 的 $\color{red}{祖先元素}$ ；若无，则默认为浏览器视口	提高	跟随滚动条滚动， $\color{purple}{但会固定在指定位置}$	不会影响本身是行内元素，还是块级元素

二、相对定位(relative)

position设置为relative后，不设置偏移量，不会对元素有任何影响

1. 偏移量(top、right、bottom、left）

以下文字和表格特点不需要特意去记，理解以后很好判断出实际的移动方向

设置某一方向的偏移量后，且值为正值时，当前元素相对于 该元素开启定位前，在文档流中所处的位置，向此方向相反的方向移动正值的距离；如果值为负值，则向相同方向移动负值的绝对值的距离。例如：

偏移量	示例	含义	特点
top	top:30px;	该元素相对于原先的位置下移30px	正值下移
top	top:-30px;	该元素相对于原先的位置上移30px	负值上移
right	right:30px;	该元素相对于原先的位置左移30px	正值左移
right	right:-30px;	该元素相对于原先的位置右移30px	负值右移
bottom	bottom:30px;	该元素相对于原先的位置上移30px	正值上移
bottom	bottom:-30px;	该元素相对于原先的位置下移移30px	负值下移
left	left:30px;	该元素相对于原先的位置右移30px	正值右移
left	left:-30px;	该元素相对于原先的位置左移30px	负值左移

2. 相对定位特点

开启定位后，还可以通过设置z-index属性来提高定位元素之间的层级（不限于相对定位，其它定位方式均可使用）

1.开启相对定位的元素，不设置偏移量时，元素不会产生任何变化

2.开启相对定位的元素，不会脱离文档流

3.开启相对定位的元素，会提高自身的层级

4.开启相对定位的元素，参照元素未开启定位时处于文档流中的位置，结合偏移量的值，进行定位

5.开启相对定位的元素，不会影响其本身是行内元素还是块级元素

未开启定位时，三个盒子布局如下图所示：

在这里插入图片描述
第二、三个盒子均开启相对定位，但未设置偏移量时：

特点1： 开启相对定位的元素，不设置偏移量时，布局不会产生任何变化

在这里插入图片描述

设置第二个盒子的偏移量时：

在这里插入图片描述
设置第三个盒子的偏移量时，三个盒子布局如下图所示：

特点2： 开启相对定位的元素，不会脱离文档流【2Lorem……内容仍处于原本的位置】
特点3： 开启相对定位的元素，会提高自身的层级【第二个盒子在第一个盒子之上】
特点4： 开启相对定位的元素，参照元素未开启定位时处于文档流中的位置，结合偏移量的值，进行定位
特点5： 开启相对定位的元素，不会影响其本身是行内元素还是块级元素:【第二个盒子原先所处的位置，仍然独占一行】

在这里插入图片描述
设置三个盒子的偏移量，同时设置层级后，效果如下图所示：

未开启定位偏移量不生效
未开启定位无法修改层级
z-index设置的数字越大，越不容易被遮盖

由于第一个盒子的偏移量和层级未生效，则位置不改变；第二个盒子的层级更高，所以第二个盒子会遮盖第三个盒子。

在这里插入图片描述
相对定位练习代码，如下所示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background: #bfa;
            /* 设置第一个盒子的偏移量，未开启定位偏移量不生效 */
            top: 600px;
            left: 600px;
            /* 设置第一个盒子的层级，未开启定位无法修改层级*/
            z-index: 3;
        }
        
        .box2 {
            width: 200px;
            height: 200px;
            background: tomato;
            /* 开启第二个盒子的相对定位 */
            position: relative;
            /* 设置第二个盒子的偏移量 */
            top: -150px;
            left: 50px;
            /* 设置第二个盒子的层级 */
            z-index: 2;
        }
        
        .box3 {
            width: 200px;
            height: 200px;
            background: cornflowerblue;
            /* 开启第三个盒子的相对定位 */
            position: relative;
            /* 设置第三个盒子的偏移量 */
            top: -300px;
            left: 100px;
            /* 设置第三个盒子的层级 */
            z-index: 1;
        }
    </style>
</head>

<body>
    <div class="box1">First</div>1Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, repellendus?
    <div class="box2">Second</div>2Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, repellendus?
    <div class="box3">Third</div>3Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, repellendus?
</body>

</html>

三、绝对定位(absolute)

1. 包含块

开启了定位且离当前元素最近的祖先元素（含父元素），称之为包含块
若祖先元素都未开启定位，则默认根元素为初始包含块（非html、body标签），初始包含块大小与视口大小相同

2. 绝对定位特点

1.开启绝对定位的元素，不设置偏移量时，位置不会产生任何变化，其它会变化
2.开启绝对定位的元素，会脱离文档流
3.开启绝对定位的元素，会提高自身的层级
4.开启绝对定位的元素，参照其包含块，结合偏移量的值，进行定位
5.开启绝对定位的元素，会改变元素的性质，行内元素变成块元素，块的宽度被内容撑开

未开启定位时，四个盒子布局如下图所示：
在这里插入图片描述

仅第三个和第四个盒子开启绝对定位，但未设置偏移量时，四个盒子布局如下图所示：

特点1： 开启绝对定位的元素，不设置偏移量时，位置不会产生任何变化，其它会变化

特点2： 开启绝对定位的元素，会脱离文档流【Four开头的文字上移】

仅第二个盒子开启绝对定位，且未设置偏移量时，四个盒子布局如下图所示：

特点2： 开启绝对定位的元素，会脱离文档流【盒子3和盒子4及Two开头的文字一同上移】

仅第二个盒子和第四个盒子开启绝对定位，且设置偏移量或设置层级相同时，四个盒子布局如下图所示：

特点3： 开启绝对定位的元素，会提高自身的层级

可知盒子2和盒子4点层级均提高或手动设置z-index相同时，代码靠后的元素的层级更高，会遮盖代码考前的元素
在这里插入图片描述

仅第二个盒子和第四个盒子开启绝对定位，且设置第四个盒子偏移量时，四个盒子布局如下图所示：

特点4： 开启绝对定位的元素，参照其包含块，结合偏移量的值，进行定位【由于盒子2不是盒子4的祖先元素，所以盒子4的包含块为初始包含块html】

关闭所有盒子的定位，为span标签开启绝对定位

特点5： 开启绝对定位的元素，会改变元素的性质，行内元素变成块元素，块的宽度被内容撑开【第三个span由行内元素变为块元素】

在这里插入图片描述

绝对定位练习代码，如下所示

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>绝对定位</title>
		<style>
			.box1 {
				width: 150px;
				height: 150px;
				background: #bfa;
			}

			.box2 {
				width: 150px;
				height: 150px;
				background: plum;
				/* 开启第二个盒子的绝对定位 */
				/* position: absolute; */
				/* 设置第二个盒子的层级 */
				/* z-index: 2; */
			}

			.box3 {
				width: 300px;
				height: 300px;
				background: tomato;
				/* 开启第三个盒子的绝对定位 */
				/* position: absolute; */
			}

			.box4 {
				width: 150px;
				height: 150px;
				background: cornflowerblue;
				/* 开启第四个盒子的绝对定位 */
				/* position: absolute; */
				/* 设置第四个盒子的层级 */
				/* z-index: 2; */
				/* 设置第四个盒子的偏移量 */
				/* top: 0;
				left: 0; */
			}

			span {
				/* 开启span标签的绝对定位 */
				position: absolute;
			}
		</style>
	</head>

	<body>
		<div class="box1">1</div>
		<span
			>One Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita,
			dolore natus quos rem architecto veniam labore sapiente praesentium
			nesciunt tempore, cumque, asperiores a magni quasi facere esse.
		</span>
		<div class="box2">2</div>
		Two Odio,necessitatibus? Sapiente. deleniti adipisci consequuntur qui
		<div class="box3">
			3
			<div class="box4">4</div>
			<span
				>Four adipisicing elit. Neque expedita perferendis non ad esse
				repellendus ut provident cumque odio ullam doloremque quidem
				necessitatibus, sapiente, corrupti harum architecto mollitia aspernatur
				minus?</span
			>
		</div>
	</body>
</html>

3. 水平方向布局

开启绝对定位的元素在其包含块中水平方向的位置，由以下9个属性值决定：

（1）left
（2）margin-left
（3）border-left
（4）padding-left
（5）width
（6）padding-right
（7）border-right
（8）margin-right
（9）right

$\color{red}{必须满足：}$ 开启绝对定位元素以上九种属性值之和 = 包含块元素内容区宽度

当九种属性值之和不满足等式时，称为过渡约束加粗样式，等式会自动调整。调整情况如下所示：

1. 当九个值没有 auto 时，浏览器会自动调整 right的值使等式成立
2. 当left和right设置为0时，width、margin-left、margin-right设置为auto时，浏览器会自动调整设置为auto的值使等式成立
（1）当只有一个值设置为auto时： 仅调整auto值使等式成立
（2）当width和某一外边距同时为auto时： auto的外边距设置为0，width自动调整为最大值
（3）三个值均为auto时： width为最大值，两个外边距均为0
（4）当width设置为固定值，其它两个外边距设置为auto时： 保证width不变，auto的外边距设置为相同的两个值

2. 当left、right设置为auto时，浏览器会优先调整left和right的值使等式成立
（1）当只有left设置为auto时，margin无论是否设置auto： 仅调整left的值，将其设置为可调整的最大值使等式成立
（2）当两个值均设置为auto时，margin无论是否设置auto： 仅调整right的值，将其设置为可调整的最大值使等式成立

由于情况过多，无法一一检验，建议实际开发中，通过手动调整，来保证布局效果

4. 垂直方向布局

开启绝对定位的元素在其包含块中垂直方向的位置，由以下9个属性值决定：
（1）top
（2）margin-top
（3）border-top
（4）padding-top
（5）height
（6）padding-bottom
（7）border-bottom
（8）margin-bottom
（9）bottom

$\color{red}{必须满足：}$ 开启绝对定位元素以上九种属性值之和 = 包含块元素内容区高度

可用以下样式来设置元素的水平和垂直方向均居中的样式:

width:固定px;
margin:auto;
left:0;
right:0;
top:0;
bottom:0;

四、固定定位(fixed)

1. 浏览器的视口

可用meta设置浏览器视口，meta标签 name设置为viewport

width=device-width,将页面宽度设置为跟随设备的屏幕宽度
initial-scale=1.0,设置初始缩放级别

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 固定定位特点

固定定位除了参照的不是包含块，而是浏览器的视口进行定位，其余都和绝对定位一致

1.开启固定定位的元素，不设置偏移量时，位置不会产生任何变化，其它会变化
2.开启固定定位的元素，会脱离文档流
3.开启固定定位的元素，会提高自身的层级
4.开启固定定位的元素，会改变元素的性质，行内元素变成块元素，块的宽度被内容撑开

以下是其与绝对定位不同的特点：

5.开启固定定位的元素，参照浏览器视口，结合偏移量的值，进行定位
6.开启固定定位的元素，不会随浏览器的滚动条而滚动

开启导航栏的绝对定位，此时位于浏览器顶部，效果如下图所示：

在这里插入图片描述
开启导航栏的绝对定位，此时位于浏览器底部，效果如下图所示：

特点5： 开启固定定位的元素，参照浏览器视口，结合偏移量的值，进行定位
特点6： 开启固定定位的元素，不会随浏览器的滚动条而滚动

在这里插入图片描述

绝对定位练习代码，如下所示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 
        可用meta设置浏览器视口，meta标签 name设置为viewport
        - width=device-width,将页面宽度设置为跟随设备的屏幕宽度
        - initial-scale=1.0,设置初始错放级别
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位</title>
    <style>
        /* 去除浏览器样式 */
        
        * {
            margin: 0;
            padding: 0;
        }
        /* 设置导航栏 */
        
        .nav {
            /* 设置宽度和高度 */
            width: 1210px;
            height: 48px;
            /* 设置导航栏背景色 */
            background-color: #E8E7E3;
            /* 设置导航栏为固定定位 */
            position: fixed;
            /* 
                设置导航栏水平居中
                - 由于是固定定位，除了margin，还要设置偏移量才可以保证居中
                - 否则right会变成最大值，不能保证居中
            */
            margin: auto;
            left: 0;
            right: 0;
            top: 50px;
            bottom: auto;
        }
        
        .nav li {
            float: left;
            list-style-type: none;
            height: 48px;
        }
        
        .nav li a {
            /* 设置超链接字体大小、颜色 */
            font-size: 18px;
            color: #8C8C8B;
            /* 去除超链接下划线 */
            text-decoration: none;
            /* 当line-height和height高度一致时，可以使文本垂居中 */
            line-height: 48px;
            /* display： inline-block时采用如下方式 */
            /* padding： 0 37px */
            /* float：left时采用如下方式 */
            padding: 0 39px;
        }
        
        .nav li:hover {
            color: #D4D3D0;
            background-color: #3F3F3F;
        }
        /* 以下方式也可以不带a，但是与此同时上面的内边距也不能设置在超链接内部，设置的值也不同 */
        
        .nav li:last-child a {
            /* display： inline-block时采用如下方式 */
            /*padding: 0 40px 0 40px;*/
            /* float：left时采用如下方式 */
            padding: 0 41px 0 42px;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li><a href="#">HTML/CSS</a></li>
        <li><a href="#">Browser Side</a></li>
        <li><a href="#">Server Side</a></li>
        <li><a href="#">Programming</a></li>
        <li><a href="#">XML</a></li>
        <li><a href="#">Web Building</a></li>
        <li><a href="#">Reference</a></li>
    </ul>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, culpa! Reiciendis eum est asperiores unde animi at autem accusantium tempora quos. Hic asperiores, corrupti laborum minus recusandae soluta accusantium ex?
    </div>
    <div>Quia velit perspiciatis accusantium neque iure saepe unde optio, aut maiores cupiditate facilis molestiae eos fugit fuga quidem natus reprehenderit temporibus voluptate illo, voluptatem incidunt! Quo mollitia facere eligendi unde!</div>
    <div>Fuga incidunt nisi enim quisquam vel expedita deleniti voluptates architecto amet nobis, ipsam consectetur accusantium rem officia. Laborum explicabo ut quam alias, libero perspiciatis architecto fugiat dolorem beatae qui excepturi.</div>
    <div>Eius explicabo veritatis praesentium similique possimus molestias nemo minima, tenetur ducimus alias porro molestiae, nam omnis. Earum quos quod molestiae consectetur atque neque a, error ea nesciunt quibusdam praesentium cum.</div>
    <div>Obcaecati omnis nesciunt, dicta voluptas neque odit, quos iusto quis esse aliquid dolor numquam ducimus vitae molestiae quibusdam fugiat ad vel rerum in, aspernatur possimus eius! Architecto tenetur ex fugiat.</div>
    <div>Error accusamus hic praesentium quasi excepturi perspiciatis voluptatum numquam est rem repudiandae neque laudantium dolores necessitatibus, assumenda labore saepe veniam amet. Eum dignissimos iste blanditiis vitae fugiat voluptatibus culpa error!</div>
    <div>Quam labore tempora minus tenetur. Porro asperiores, consequuntur repellat molestiae pariatur sapiente facere. Voluptas vero eius doloremque minima blanditiis. Vitae, officia dolorum corrupti doloribus voluptate ad incidunt illo neque quod?</div>
    <div>Nesciunt sint quae et excepturi a perferendis deleniti molestiae amet ex, cum maxime, sunt ut similique officiis at nobis aperiam saepe tenetur itaque sit. Necessitatibus ullam earum laudantium quos deleniti!</div>
    <div>Laboriosam reprehenderit error blanditiis illum perferendis. Ipsa, provident facere. Dignissimos impedit alias quos aliquam inventore, numquam officia, voluptatem quibusdam ea porro eligendi non est amet, incidunt error maiores. Aliquam, praesentium.</div>
    <div>Repellat, cupiditate distinctio! Accusantium perferendis, praesentium, expedita, optio at architecto excepturi odio a dolores minus quis veritatis numquam! Corrupti soluta deserunt voluptatibus explicabo molestias natus nostrum illum praesentium necessitatibus
        amet.
    </div>
    <div>Deleniti incidunt neque eum voluptates aperiam? Laborum dolore illo mollitia ut. Nam, iste quo velit veritatis soluta aliquam quos enim. Quidem nemo praesentium voluptate quo, pariatur sequi nihil blanditiis aliquam.</div>
    <div>Aperiam asperiores maxime eaque sit blanditiis totam quis facere fuga perspiciatis, tempore, ex sunt nostrum non placeat magnam nulla ut doloremque, tempora debitis! Delectus voluptas, autem magni mollitia ipsa sint.
    </div>
    <div>Fugit consequatur fuga ipsam voluptate blanditiis voluptas, beatae repellendus, illum dolorem cumque cupiditate deserunt tempore quia molestias repudiandae possimus provident deleniti nam ducimus consectetur maiores quisquam praesentium dolore ullam?
        Omnis!
    </div>
    <div>Maxime inventore iste hic id ea magni eaque aliquid, reiciendis adipisci qui nam odio velit voluptates neque dolores molestiae perferendis aspernatur, itaque assumenda. Modi voluptatem quas ab corrupti expedita accusantium!
    </div>
    <div>Placeat fugiat quam provident nulla? Ipsa porro quod totam vero tenetur nisi harum rem facere minima doloremque. Obcaecati corrupti voluptatem, quam laudantium modi atque dolore molestias, enim, ducimus assumenda itaque!
    </div>
    <div>Inventore pariatur ab architecto provident fugit voluptatem, nihil sunt soluta non nam deleniti quidem doloremque praesentium asperiores debitis. Corporis optio officia labore, sed nemo molestiae! Ea eius modi quidem sunt.</div>
    <div>Minima expedita voluptates dolor odio ullam? Aut voluptatem fugiat molestiae, sed veniam tempore porro ex, voluptas unde minima eaque voluptatum hic eligendi beatae, commodi iure laudantium. Illo nam commodi nostrum!
    </div>
    <div>Nisi odit distinctio porro deserunt! Eum repellendus debitis aut doloremque beatae illo animi! Debitis enim ad neque ipsam veniam incidunt fugit eligendi facilis corporis velit, deleniti esse error quae cum?</div>
    <div>Fugit ullam autem enim? Quidem, quis a. Sequi delectus doloribus perspiciatis nesciunt quidem. Obcaecati nemo omnis minus quaerat doloremque veritatis, alias inventore quae! Nesciunt, laudantium ab doloremque ipsam facere recusandae!
    </div>
    <div>Assumenda unde ratione inventore nesciunt atque, sed animi voluptatum repellat, deleniti vel dolorem recusandae quis commodi eos rem culpa labore doloremque earum molestias! Molestiae deleniti incidunt, quos totam reprehenderit earum?</div>
</body>

</html>

五、粘滞定位(sticky)

1. 粘滞定位特点

可滚动元素指 display:sccoll

粘滞定位与相对定位特点类似

1.开启粘滞定位的元素，不设置偏移量时，元素不会产生任何变化
2.开启粘滞定位的元素，不会脱离文档流
3.开启粘滞定位的元素，会提高自身的层级
4.开启粘滞定位的元素，参照元素未开启定位时处于文档流中的位置，结合偏移量的值，进行定位
5.开启粘滞定位的元素，不会影响其本身是行内元素还是块级元素

以下是其与相对定位不同的特点：

6.开启粘滞定位的元素，可以在元素到达某个固定位置时，将其固定

开启导航栏的粘滞定位，此时位于浏览器顶部，效果如下图所示：

在这里插入图片描述
开启导航栏的粘滞定位，此时位于浏览器底部，效果如下图所示：

特点6： 开启粘滞定位的元素，可以在元素到达某个固定位置时，将其固定
在这里插入图片描述

六、练习代码

1. 轮播图

此代码效果和京东网站实际轮播图仍有差距，无法在悬停时，更改每个圆点之间的距离。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 此效果和京东网站实际轮播图仍有差距 -->
    <title>轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .img-list {
            width: 590px;
            height: 470px;
            /* 设置图片容器水平居中 */
            margin: 50px auto;
            /* 常用手段，父相（对定位）子绝（对定位） */
            /* 这里使用相对定位，可以通过不设置偏移量保证img-list区域仅开启定位，但是位置无变化 */
            position: relative;
        }
        
        .img-list img {
            width: 590px;
            height: 470px;
            /* 开启图片绝对定位，使其脱离文档流，重叠在一起 */
            position: absolute;
        }
        
        .pointer {
            /* ！给圆点区域开启绝对定位 */
            position: absolute;
            /* 保证圆点出现在所有图片上方 */
            z-index: 10;
            /* 设置偏移量，通过父相子绝，保证圆点在img-list中定位 */
            bottom: 20px;
            left: 30px;
        }
        
        .pointer a {
            width: 10px;
            height: 10px;
            /* 设置外边距 */
            margin: 0 4px;
            /* 设置背景颜色 */
            background-color: rgba(255, 255, 255, .3);
            /* 设置圆形区域  */
            border-radius: 50%;
            /* 设置所有链接水平排列,使用float也会使其脱离文档流 */
            float: left;
            /* 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面 */
            background-clip: content-box;
            /* 为保证所有原点下方可以对其，为未悬停的原点设置透明边框 */
            border: 2px transparent solid;
        }
        /* 设置超链接悬停样式 */
        
        .pointer a:hover {
            background-color: white;
            /* 设置轮廓 */
            border: 2px rgba(168, 163, 163, 0.4) solid;
        }
    </style>
</head>

<body>
    <div class="img-list">
        <img src="../imgs/exercise5/1.jpg" alt="">
        <img src="../imgs/exercise5/2.jpg" alt="">
        <img src="../imgs/exercise5/3.jpg" alt="">
        <img src="../imgs/exercise5/4.jpg" alt="">
        <img src="../imgs/exercise5/5.jpg" alt="">
        <img src="../imgs/exercise5/6.jpg" alt="">
        <img src="../imgs/exercise5/7.jpg" alt="">
        <img src="../imgs/exercise5/8.jpg" alt="">

        <div class="pointer">
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </div>
</body>

</html>