HBuilder-[开始]菜单风格进阶

最新推荐文章于 2024-08-16 22:57:43 发布

妮可珍郝坎

最新推荐文章于 2024-08-16 22:57:43 发布

阅读量76

点赞数 1

文章标签： html css javascript

本文链接：https://blog.csdn.net/nikezhenhaokan/article/details/129298553

版权

之前进行了简易的制作，现在进行增加与改变。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.box{
				width:116px;
				height: 76px;
				margin: 2px;
				background: rgb(75,174,180);
				float: left;
			}
		
			.boxs{
				width: 480px;	
			}
			.w1{
				width: 56px;
			}
			.w2{
				width: 236px;
			}
			.c-b{
				background: rgb(5,80,145);
			}
			.c-o{
				background: rgb(245,175,61);
			}
			.c-g{
				background: rgb(150,179,53);
			}
			.c-p{
				background: rgb(121,24,105);
				}
				.c-r{
					background: rgb(222,84,58);
				}
		</style>
	</head>
	<body>
		 <div class="boxs">
		 	<div class="box">1</div>
		 	<div class="box c-b">2</div>
		 	<div class="box">3</div>
		 	<div class="box c-o">4</div>
		 	<div class="box c-g w1">5</div>
		 	<div class="box c-g w1">6</div>
		 	<div class="box">7</div>
		 	<div class="box">8</div>
		 	<div class="box c-b">9</div>
		 	<div class="box">10</div>
		 	<div class="box c-g w1">11</div>
		 	<div class="box c-g w1">12</div>
		 	<div class="box">13</div>
		 	<div class="box">14</div>
		 	<div class="box c-p w2">15</div>
		 	<div class="box c-r w2">16</div>
			
		 </div>
	</body>
</html>

效果如下：