html溢出隐藏案例之电子相册

无梦忆梦

已于 2022-07-02 16:32:34 修改

阅读量408

点赞数

文章标签： html5 css

于 2022-07-02 16:32:29 首次发布

本文链接：https://blog.youkuaiyun.com/qq_55199851/article/details/125574611

版权

本文介绍了一个利用HTML5和CSS技术制作的电子相册案例，通过点击小图展示对应大图，应用了溢出隐藏确保布局整洁，并在需要时显示滚动条。锚点的使用使得页面导航更加便捷。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

废话不多说，上图。

实现效果为点击右边小图片就显示对应图片，用到了溢出隐藏，溢出显示滚动条以及使用了锚点，很简单。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: #282828;
        }
        .box{
            width: 530px;
            height: 410px;
            margin: 0 auto;
            margin-top: 88px;
            background-color: #666666;
            border: 1px solid #cccccc;
            transform: scale(1.2);
        }
        .box p{
            line-height: 60