案例1：回到首页
htmlheadmetacharset=' utf-8 ' title/titlestyletype=' text/CSS ' * { border : 边距： 0； padding: 0； }.box1， box2{height: 3000px； width: 200px； background-color: green； }/style/headbodyp id='content1'目录1/PDI vclass=' box1'/div PID=' content2'目录2/PDI vclass=' box2' /
如下图所示，依次单击1、2、3、4进行图像切换。 (这里用矩形框置换了。 ）
其实照片很长。 您只需在存储图像的容器中设置大小，并在“overflow”中设置“hidden”，即可看到其他图像。
htmlheadmetacharset=' utf-8 ' title/titlestyletype=' text/CSS ' * { border : 边距： 0； padding: 0； }.box{height: 500px； width: 500px； border: 1px black solid； 边距： 20px自动； 定位：关系； }.botton{position : absolute； right: 5px； bottom:5px； }a{height: 30px； width: 20px； 文本解码： none； 文本照明3360中心； line-height: 30px； background-color : rgba (0，0，0，0.3 )； 颜色：红色； /*rgba的第四个参数是透明度* /边距： 2px； padding: 2px； 浮动：左； } a : hover { background-color : rgba (0，0，0.8 )； }.image _ list div { height 3360500 px； width: 500px； }.image_list{height: 500px； width: 500px； overflow :隐藏； }/style/headbodydivclass=' box ' divclass=' botton ' a href=' # image1 '1/aa href=' # image2 '2/aa href=' # iton/div divid=' image2 ' style=' background-color : blue '；/div divid=' image3' style=' background-color : yellow '；/div divid=' image4' style=' background-color : green '； /div/div/div/body/html