Webフロントエンド開発--ラブキューブ

	
		
		
		
	
	
		
"container">
			
"box">
				
"box-page top">
				
"box-page bottom">
				
"box-page left">
				
"box-page right">
				
"box-page before">
				
"box-page after">
			
		
		"text/javascript"</span>>
			var arr = document.<span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">".box-page"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
				<span class="token function">for</span><span class="token punctuation">(</span>var n =0<span class="token punctuation">;</span>n<arr.length<span class="token selector">;n++)</span>
				<span class="token punctuation">{</span>
					<span class="token function">for</span><span class="token punctuation">(</span>var i=0 <span class="token punctuation">;</span>i<3 <span class="token selector">;i++)</span>
							<span class="token punctuation">{</span>
								<span class="token function">for</span><span class="token punctuation">(</span>var j=0<span class="token punctuation">;</span>j<3<span class="token selector">; j++)</span>	
								<span class="token punctuation">{</span>
									var divs = document.<span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
									divs.style.cssText= <span class="token string">"width: 100px ;height: 100px ;border: 1px solid #fff; box-sizing : border-box ; position: absolute; background-image: url(img/"</span>+n+<span class="token string">".jpg); background-size: 300px 300px; "</span>
									arr[n].<span class="token function">appendChild</span><span class="token punctuation">(</span>divs<span class="token punctuation">)</span><span class="token punctuation">;</span>
									divs.style.left=j*100+<span class="token string">"px"</span><span class="token punctuation">;</span>
									divs.style.top=i*100+<span class="token string">"px"</span><span class="token punctuation">;</span>
									divs.style.backgroundPositionX=-j*100+<span class="token string">"px"</span><span class="token punctuation">;</span>
									divs.style.backgroundPositionY=-i*100+<span class="token string">"px"</span><span class="token punctuation">;</span>
								<span class="token punctuation">}</span>									
							<span class="token punctuation">}</span>
				<span class="token punctuation">}</span>