如何用HTML和css制作一個簡單的帶有滑動條的網頁電子相冊實體-有解無憂

超完整的代碼+詳細注釋，適合給小白做的簡單的網頁電子相冊實體
代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 清除默認邊距 */
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            /* 寬度 */
            width: 420px;
            /* 高度 */
            height: 324px;
            /* 背景顏色 */
            background: #666666;
            /* 相對html頁面定位 */
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            /* 居中 */
            margin: auto;
            /* 大盒子邊框 */
            border: 1px solid #cdcdcd;
        }
        h3{
            /* 字體大小 */
            font-size: 18px;
            /* 文本上下居中 */
            line-height: 48px;
            /* 文字顏色 */
            color: #fff;
            /* 文本左右對齊 */
            text-align: center;
            /* 字體不加粗 */
            font-weight: 100;
        }
        .div_l{
            width: 280px;
            height: 196px;
            border: 1px solid #ffffff;
            /* 左浮動 */
            float: left;
            /* 大圖片左邊外邊距 */
            margin-left: 20px;
            /* 圖片超出盒子大小隱藏多余圖片 */
            overflow: hidden;
        }
        .div_l img{
            width: 100%;
            height: 100%;
        }
        .div_r{
            width: 80px;
            height: 196px;
            /* 右浮動 */
            float: right;
            /* 豎直方向滑動條 */
            overflow-y: scroll;
        }
        .div_r img{
            /* 小圖片四周邊框 */
            border: 1px solid #ffffff;
            /* 取消圖片之間的間距 */
            vertical-align: top;
        }
        .div_r a{
            /* 將行內元素轉變為塊元素 */
            display: block;
            /* 底部外邊距 */
            margin-bottom: 8px;
        }



    </style>
</head>
<body>
	<!-- div是一個塊元素盒子 -->
    <div class="box1">
        <h3>奧黛麗·赫本</h3>
        <!-- 快捷鍵： .box1 ->出現以下效果 -->
        <!-- <div class="box2"></div> -->
        <div class="div_l">
            <!--快捷鍵： img[src="../電子相冊/mn$.jpg"]*8 -->
            <!-- id="img標簽名字" 給標簽起名字，不然等下找圖片跳轉不到相對應的圖片 -->
            <img id="img1" src="../images/mn1.jpg" alt="">
            <img id="img2" src="../images/mn2.jpg" alt="">
            <img id="img3" src="../images/mn3.jpg" alt="">
            <img id="img4" src="../images/mn4.jpg" alt="">
            <img id="img5" src="../images/mn5.jpg" alt="">
            <img id="img6" src="../images/mn6.jpg" alt="">
            <img id="img7" src="../images/mn7.jpg" alt="">
            <img id="img8" src="../images/mn8.jpg" alt="">

        </div>
        <div class="div_r">
            <!-- 注釋快捷鍵  Ctrl+/  默認在網頁上看不見的內容 -->
            <!-- 快捷鍵： a[href="#img$"]*8>img[src="../電子相冊/c$.jpg"] -->
            <!-- a:超鏈接標簽  href="跳轉路徑"（跳轉時必須帶有符號#哦） 
            img:圖片標簽  src="圖片存放的路徑" alt="圖片無法顯示時顯示的文字" -->
            <a href="#img1"><img src="../images/c1.jpg" alt=""></a>
            <a href="#img2"><img src="../images/c2.jpg" alt=""></a>
            <a href="#img3"><img src="../images/c3.jpg" alt=""></a>
            <a href="#img4"><img src="../images/c4.jpg" alt=""></a>
            <a href="#img5"><img src="../images/c5.jpg" alt=""></a>
            <a href="#img6"><img src="../images/c6.jpg" alt=""></a>
            <a href="#img7"><img src="../images/c7.jpg" alt=""></a>
            <a href="#img8"><img src="../images/c8.jpg" alt=""></a>

        </div>
    </div>
</body>
</html>

使用瀏覽器打開你的HTML檔案瀏覽最終呈現效果（以下圖片是本案例的最終呈現效果）：
在這里插入圖片描述
點擊小圖片顯示對應大圖片（記得超鏈接對應的路徑一定不要設錯，否則顯示的圖片就不一樣啦）

圖片路徑與圖片命名：
圖片的路徑和命名小白們最好使用英文來命名，使用中文來命名小心會出現報錯哦
設定圖片的路徑須知：
（同級）
1)當當前檔案與目標檔案在同一目錄下，直接書寫目標檔案的檔案名+擴展名；（上級找下級）
2)當當前檔案與目標檔案所處的檔案夾在同一目錄下，寫法如下：
檔案夾名/目標檔案全稱+擴展名；（下級找上級）
3)當當前檔案所處的檔案夾和目標檔案在同一目錄下，寫法如下：
…/目標檔案檔案名+擴展名；