本文共 1289 字，大约阅读时间需要 4 分钟。

前言

刚刚大三对前端开发不是很熟练，之前学过html和Javascrip课程但是掌握的并不是很熟练，希望能够借助Bootstrap课程巩固前端课程。

一、Grid布局

主要应用网格布局做一些响应式网页开发。

二、Grid测试

1.题目1

按以下要求创建一个栅格系统布局：创建一个8-4列栅格，在第一个8列中插入8-4列，在第二个4列中插入9-3列（备注：以中屏md（970px）为例）。

简单的测试题

   
   
   
   
	
    
		
     
      col-md-8
     
		
     
      co-md-4
     
	
    
	
    
		
     
      col-md-9
     
		
     
      co-md-3
     
	
    
	
   

2.题目2

1. 用栅格系统布局一个网页：顶部有一个logo区域，同时跨越两栏。左栏内容，右栏导航，两栏下方还有一个footer区域。

footer区域随便写了一下，具体还是看格式，歌单形式。

			
   	
   	
   								
   
						
    
		  
     
			
      		  
     
		  
    
		  
    
		  
     
			
      
				
       			
      
		  
     
			
     
			
      
       
查询歌曲
      
			
      
       
我喜欢的
      
			
      
       
我喜欢的
      
			
      
       
我喜欢的
      
			
     
			
    
			
    			
   
			

3.题目3

网页制作布局题，目标达成网页响应。

字和图片排版出了点问题，希望有人指点一下

   
   
   
   
    
我们的使命
	
    
		
     
			
      
				
       			
      
		
     
		
     
				
      
				
       					
       治理污染					
       1.环境污染和生态破坏。将环境保护纳入国民经济与社会发展计划和年度计划，在经济发展中防治				
       					
       垃圾分类					
       2.关心垃圾分类，特别是可回收垃圾，进行回收再生，减少对森林树木的采集砍伐				
       					
       节能低碳					
       3.开始低碳生活吧，节能减排，减少对资源的浪费，并还自己一片蓝天!			
      
		
     
 	
    
   

效果

总结

一些html的知识比如盒子和排列的问题需要再去复习一下。

参阅：

转载地址：https://jxnuxwt.blog.csdn.net/article/details/108793489 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！