css+div实现显示美国国旗

效果图：

html代码：

<!DOCTYPE html>
<html>
	<head>
		<title>美国国旗</title>
		<meta charset="UTF-8">
		<link type="text/css" rel="stylesheet" href="css/nationalFlag.css">
		 
	</head>
	<body>
		<div class="father">
			<div class="one">  </div>
			<div class="two">  </div>
			<div class="three">  </div>
			<div class="four">  </div>
			<div class="five">  </div>
			<div class="six">  </div>
			<div class="seven">  </div>
			<div class="eight">  </div>
			<span class="star1">★</span>
			<span class="star2">★</span>
			<span class="star3">★</span>
			<span class="star4">★</span>
			<span class="star5">★</span>
			<span class="star11">★</span>
			<span class="star21">★</span>
			<span class="star31">★</span>
			<span class="star41">★</span>
			<span class="star12">★</span>
			<span class="star22">★</span>
			<span class="star32">★</span>
			<span class="star42">★</span>
			<span class="star52">★</span>
			
			<span class="star13">★</span>
			<span class="star23">★</span>
			<span class="star33">★</span>
			<span class="star43">★</span>
			
			<span class="star14">★</span>
			<span class="star24">★</span>
			<span class="star34">★</span>
			<span class="star44">★</span>
			<span class="star54">★</span>
			
			<span class="star15">★</span>
			<span class="star25">★</span>
			<span class="star35">★</span>
			<span class="star45">★</span>

			<span class="star16">★</span>
			<span class="star26">★</span>
			<span class="star36">★</span>
			<span class="star46">★</span>
			<span class="star56">★</span>
			
			<span class="star17">★</span>
			<span class="star27">★</span>
			<span class="star37">★</span>
			<span class="star47">★</span>
			
			<span class="star18">★</span>
			<span class="star28">★</span>
			<span class="star38">★</span>
			<span class="star48">★</span>
			<span class="star58">★</span>
			
			<span class="star19">★</span>
			<span class="star29">★</span>
			<span class="star39">★</span>
			<span class="star49">★</span>
			
			<span class="star110">★</span>
			<span class="star210">★</span>
			<span class="star310">★</span>
			<span class="star410">★</span>
			<span class="star510">★</span>
		</div>
	</body>
</html>

js代码：

/*消除内外边框距离*/
*{
	padding:0px;
	margin:0px;
}
/*设置父级容器*/
.father{
	border-color:#ccc;
	border-width:1px;
	border-style:solid;	
	margin:0px auto;
	width:300px;
	height:185px;
}

/*横向方向，红色*/
.one{
	background-color:#BC1440;	
	width:300px;
	height:15px;
	/*让star漂浮*/
	float:left;
	/*定位*/
	margin-left:0px;
	margin-top:0px;

}
.two{
	background-color:#BC1440;	
	width:300px;
	height:15px;
	/*让star漂浮*/
	float:left;
	/*定位*/
	margin-left:0px;
	margin-top:10px;

}
.three{
	background-color:#BC1440;	
	width:300px;
	height:15px;
	/*让star漂浮*/
	float:left;
	/*定位*/
	margin-left:0px;
	margin-top:13px;

}
.four{
	background-color:#BC1440;	
	width:300px;
	height:15px;
	/*让star漂浮*/
	float:left;
	/*定位*/
	margin-left:0px;
	margin-top:13px;

}
.five{
	background-color:#BC1440;	
	width:300px;
	height:15px;
	/*让star漂浮*/
	float:left;
	/*定位*/
	margin-left:0px;
	margin-top:14px;

}
.six{
	background-color:#BC1440;	
	width:300px;
	height:15px;
	/*让star漂浮*/
	float:left;
	/*定位*/
	margin-left:0px;
	margin-top:15px;

}
.seven{
	background-color:#BC1440;	
	width:300px;
	height:15px;
	/*让star漂浮*/
	float:left;
	/*定位*/
	margin-left:0px;
	margin-top:15px;

}
.eight{
	background-color:#05275C;
	width:150px;
	height:111px;
	/*让star漂浮*/
	float:left;
	/*定位*/
	margin-left:0px;
	margin-top:-200px;
}
.star1{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:0px;
	margin-top:-189px;
}
.star2{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:0px;
	margin-top:-170px;
}
.star3{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:0px;
	margin-top:-149px;
}
.star4{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:0px;
	margin-top:-129px;
}
.star5{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:0px;
	margin-top:-110px;
}

.star11{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:13px;
	margin-top:-180px;
}
.star21{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:13px;
	margin-top:-160px;
}
.star31{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:13px;
	margin-top:-140px;
}
.star41{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:13px;
	margin-top:-120px;
}

.star12{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:26px;
	margin-top:-189px;
}
.star22{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:26px;
	margin-top:-170px;
}
.star32{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:26px;
	margin-top:-149px;
}
.star42{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:26px;
	margin-top:-129px;
}
.star52{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:26px;
	margin-top:-110px;
}

.star13{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:39px;
	margin-top:-180px;
}
.star23{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:39px;
	margin-top:-160px;
}
.star33{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:39px;
	margin-top:-140px;
}
.star43{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:39px;
	margin-top:-120px;
}
.star14{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:52px;
	margin-top:-189px;
}
.star24{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:52px;
	margin-top:-170px;
}
.star34{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:52px;
	margin-top:-149px;
}
.star44{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:52px;
	margin-top:-129px;
}
.star54{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:52px;
	margin-top:-110px;
}

.star15{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:65px;
	margin-top:-180px;
}
.star25{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:65px;
	margin-top:-160px;
}
.star35{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:65px;
	margin-top:-140px;
}
.star45{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:65px;
	margin-top:-120px;
}

.star16{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:78px;
	margin-top:-189px;
}
.star26{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:78px;
	margin-top:-170px;
}
.star36{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:78px;
	margin-top:-149px;
}
.star46{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:78px;
	margin-top:-129px;
}
.star56{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:78px;
	margin-top:-110px;
}

.star17{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:91px;
	margin-top:-180px;
}
.star27{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:91px;
	margin-top:-160px;
}
.star37{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:91px;
	margin-top:-140px;
}
.star47{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:91px;
	margin-top:-120px;
}

.star18{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:104px;
	margin-top:-189px;
}
.star28{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:104px;
	margin-top:-170px;
}
.star38{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:104px;
	margin-top:-149px;
}
.star48{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:104px;
	margin-top:-129px;
}
.star58{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:104px;
	margin-top:-110px;
}

.star19{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:117px;
	margin-top:-180px;
}
.star29{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:117px;
	margin-top:-160px;
}
.star39{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:117px;
	margin-top:-140px;
}
.star49{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:117px;
	margin-top:-120px;
}

.star110{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:130px;
	margin-top:-189px;
}
.star210{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:130px;
	margin-top:-170px;
}
.star310{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:130px;
	margin-top:-149px;
}
.star410{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:130px;
	margin-top:-129px;
}
.star510{
	color:#E4F2FD;
	background-color:#05275C;
	width:0px;
	height:0px;
	/*漂浮起来*/
	float:left;
	/*定位*/
	margin-left:130px;
	margin-top:-110px;
}

css+div实现显示美国国旗

猜你喜欢