<!doctype html><html lang="en"> <head> ?<meta charset="UTF-8"> ?<title>Document</title> ???<style> ???????#images{ ???????????????????????width:500px; ???????????height:150px; ???????????border:1px solid #000; ???????????????????????overflow:auto; ???????} ???????#images p{ ???????????width:800px; ???????????height:100px; ???????} ???????#images img{ ???????????width:100px; ???????????border-radius:5px; ???????????margin-left:5px; ???????????border:2px solid transparent; ???????} ???????#images img:hover{ ???????????border-color:#f00; ???????} ???</style> </head> <body> ???/*在本目录下创建一个文件夹images存放图片*/ ?????<div id='images'> ???????<p> ???????????<img src="images/p_small_001.jpg"> ???????????<img src="images/p_small_002.jpg"> ???????????<img src="images/p_small_003.jpg"> ???????????<img src="images/p_small_004.jpg"> ???????????<img src="images/p_small_005.jpg"> ???????????<img src="images/p_small_006.jpg"> ???????????<img src="images/p_small_007.jpg"> ???????</p> ???</div> </body></html>HTML-网购图示例
原文地址：https://www.cnblogs.com/-hjj/p/9943072.html