【Web前端基础】实验5 CSS基础

Lailalalala

已于 2022-08-01 12:43:58 修改

阅读量1.2k

点赞数 1

分类专栏： Web前端基础文章标签：前端 css html

于 2022-07-30 14:59:33 首次发布

本文链接：https://blog.csdn.net/Lailalalala/article/details/126072378

版权

项目1 Hoverbox图像画廊

页面效果图：

页面效果图

要求：

鼠标经过的图片显示大图。

HTML代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hoverbox图像画廊</title>
        <link type="text/css" rel="stylesheet" href='hoverbox.css'>
        </link>
    </head>
    <body>
        <div id="" class="">
            <h1>鼠标经过图片放大显示大图(Hoverbox Image Gallery)</h1>
            <u1 class="hoverbox">
                <li><a href="#">
                    <img src="img/photo01.jpg" alt="description" class="preview"/>
                    <img src="img/photo01.jpg" alt="description"/>
                </a></li>
                <li>
                    <a href="#">
                        <img src="img/photo02.jpg" alt="description" class="preview"/>
                        <img src="img/photo02.jpg" alt="description"/>
                    </a>   
                </li>
                <li>
                    <a href="#">
                        <img src="img/photo03.jpg" alt="description" class="preview"/>
                        <img src="img/photo03.jpg" alt="description"/>
                    </a>   
                </li>
                <