导航栏制作图片排列

最新推荐文章于 2024-04-08 19:18:32 发布

勤奋式幽默

最新推荐文章于 2024-04-08 19:18:32 发布

阅读量938

点赞数

分类专栏：代码图片排列导航栏文章标签： HTML CSS 网站代码图片排列导航栏

本文链接：https://blog.csdn.net/lxf12366/article/details/102545680

版权

代码同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

图片排列

2 篇文章 0 订阅

订阅专栏

导航栏

2 篇文章 0 订阅

订阅专栏

图片排列

代码如下：

<head>
	<meta charset="UTF-8">
	<title>礼品网页</title>
	<style>
		.all{ width: 20%;height: 120px;background-color: gray;float: left;margin-left: 4%;}
		.all img{width: 100%;height: 280px;}
		.all a{text-decoration: none;}
		
	
		.bll{position: relative;top: 600px;
			width: 20%;height: 120px;background-color: gray;float: left;margin-left: 4%;}
		.bll img{width: 100%;height: 280px;}
		.bll a{text-decoration: none;}
		
		.cll{position: relative;top:120px;
			width: 20%;height: 120px;background-color: gray;float: left;margin-left: 4%;}
		.cll img{width: 100%;height: 280px;}
		.cll a{text-decoration: none;}
		
		.vv button{text-align:center;font-size:20px;
		width: 100%;color: black;font-family: "微软雅黑";}
        .vv a{font-size: 20px;color: black;font-family: "微软雅黑";}
       .cc{position:  absolute;left: 0px;top: 1180px;}
	</style>
</head>
<body>
	<P><b>定制展示：</b></P>
	
	<div class="all"><a href="定制商城.html"  target="_blank">抱枕</a>
		<img src="img/抱枕.jpg">
	</div>
	<div class="all"><a href="定制商城.html" target="_blank">午睡毯</a>
		<img src="img/午睡毯.jpg">
	</div>
	
	<div class="all"><a href="定制商城.html" target="_blank">围巾</a>
		<img src="img/围巾.jpg">
	</div>
	
	<div class="all"><a href=""target="_blank">地毯</a>
		<img src="img/地毯.jpg">
	</div>
	
	<div class="bll"><a href=""target="_blank">收纳箱</a>
		<img src="img/收纳箱.jpg">
	</div>
	<div class="bll"><a href=""target="_blank">毛线帽</a>
		<img src="img/毛线帽.jpg">
	</div>
	<div class="bll"><a href=""target="_blank">浴巾</a>
		<img src="img/浴巾.jpg">
	</div>
	<div class="bll"><a href=""target="_blank">纸巾</a>
		<img src="img/纸巾.jpg">
	</div>
	
	
	<div class="cll"><a href=""target="_blank">耳机</a>
		<img src="img/耳机.jpg">
	</div>
	<div class="cll"><a href=""target="_blank">衣架</a>
		<img src="img/衣架.jpg">
	</div>
	
	<div class="cll"><a href=""target="_blank">雨伞</a>
		<img src="img/雨伞.jpg">
	</div>
	
	<div class="cll"><a href=""target="_blank">台灯</a>
		<img src="img/台灯.jpg">
	</div>
	<div class="vv">
	<button class="cc"><a href="首页.html" target="_blank"><b>返回</b></button></a></div>
	</body>