效果图如下:
代码实例如下:
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title><style type="text/css">.one {width:80%;height:120%;/*去掉圆点*/list-style:none;/*居中对齐*/text-align:center;/*将系统自动生成的间隙去掉*/font-size:0;/*相对于body设置位置*/position:absolute;margin-top:100px;margin-left:100px;}.one ul li a {/*相对定位*/position:relative; /*因为a为行内元素不支持宽和高，div为块级元素支持宽和高，所以要将行内元素转换为行内块级元素*/display:inline-block;/*图片随浏览器的大小自适应缩放，只设置宽度即可*/width:8%;/*使用 padding-bottom 设置高度基于宽度的自适应*/padding-bottom:8%;/*设置一个外边距*/margin:5px;}.one ul li a img {/*绝对定位*/position: absolute;/*因为img为行内元素不支持宽和高，div为块级元素支持宽和高，所以要将行内元素转换为行内块级元素*/display:inline-block;top: 0;left: 0;width: 100%;height: 100%;}</style></head><body><div class="one"><ul><li>/*这里的图片要跟此html网页放到同一个文件夹下*/<a herf="#"><img src="timg.jpg"></a><a herf="#"><img src="timg.jpg"></a></li></ul></div></body></html>
如果要转载的话，请附上博客地址:
/qq_43290288/article/details/103046856
