超完整的代码+详细注释，适合给小白做的简单的网页电子相册实例
代码：
<!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)当当前文件所处的文件夹和目标文件在同一目录下，写法如下：
…/目标文件文件名+扩展名；
我的HTML文件与图片存放路径显示如下：
附上图片命名：
图片：
