需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：
div {width: 72pxheight: 72pxbackground: url(small3.png) no-repeatoverflow: hidden}
3、浏览器运行index.html页面，此时成功将矩形图片只显示了正方形部分。
4、点击小图后，成功显示了大图。
有好多方法。我这里用table的方法，你参考一下：<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<table width="200" height="200" border="0" bgcolor="#000000">
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
<html><head>
<style>
.main{width:1000pxmargin:0 autoborder:1px solid red}
.main ul li{width:400pxheight:400pxfloat:leftbackground:#000list-style:nonemargin:25px}
.cl{clear:both}
</style>
</head>
<body>
<div class="main">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<div class="cl"></div>
</ul>
</body>
</html>
代码是正方形的，图扁了。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）