图片展示(上面一个大图下面四个小图)

在这里插入图片描述

<!doctype html>
<html>
<head>
<meta chatest="utf-8">
<title>商品图片浏览器</title>
<style type="text/css">
body,ul,li,h1{
margin:0px;
padding:0px;
border:0px;
list-style-type:none;
}
a:hover,img{
border:0px;
}
#goods h1{
text-align:center;
font-family:"微软雅黑";
color:#808080;

}
#show {
margin:0px auto;
width:350px;
height:500px;
border:3px solid #ccc;
overflow:hidden;
}
#show img{
width:350px;
height:500px;
}
#nav_box{
border:1px solid #808080;
}
#nav{
margin:0px auto;
height:150px;
width:560px;
}
#nav li {
float: left;
width:100px;
margin-right:10px;
border: 1px solid #ccc;

}
#nav li img{
width:100px;
height:150px;


}


</style>

</head>


<body>
<div id="goods">
<h1>三星手机图片展示</h1>
<div id="show">
<ul>
<li><a name="p1"></a><img src="b1.jpg"alt="手机"/></li>
<li><a name="p2"></a><img src="b2.jpg"alt="手机"/></li>
<li><a name="p3"></a><img src="b3.jpg"alt="手机"/></li>
<li><a name="p4"></a><img src="b4.jpg"alt="手机"/></li>
<li><a name="p5"></a><img src="b5.jpg"alt="手机"/></li>
</ul>
</div id="nav_box">
<ul id="nav">
<li><a href="#p1"><img src="b1.jpg"alt="手机"/></a></li>
<li><a href="#p2"><img src="b2.jpg"alt="手机"/></a></li>
<li><a href="#p3"><img src="b3.jpg"alt="手机"/></a></li>
<li><a href="#p4"><img src="b4.jpg"alt="手机"/></a></li>
<li><a href="#p5"><img src="b5.jpg"alt="手机"/></a></li>
</ul>
</div>
</div>
</body>
</html>
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页