如何用HTML和css制作一个简单的带有滑动条的网页电子相册实例
超完整的代码+详细注释，适合给小白做的简单的网页电子相册实例
代码：
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><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 class="box1"><h3>奥黛丽·赫本h3><div class="div_l"><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"><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文件与图片存放路径显示如下：
附上图片命名：
图片：
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！