进阶HTML CSS Step2-任务2

这次的任务是创建一个布局,可以选用table,也可以选用div,这里我选用的是div,文末也借鉴了同学的table方法。

我用到了4个大的div分块,其中两个div分块中均含有div子分块:    

       

计算中心
资环学院
信息学院
动科学院

用浮动模式float可实现多个div分块并列一行,height与line-height的值相同时可实现文字在div分块中垂直居中:

绝对定位和相对定位结合可以实现两个div分块的相对位置的分布(父元素设置position:relative   ,子元素设置position:absolute  ; top:**px  ; left:**px;)实现子元素相对父元素的顶端**px,左端**px:


附上源代码:



	
		
		我的网站
		
            
            
		
			
	
	
		
计算中心
资环学院
信息学院
动科学院
用户名:
密码:    
                     

我的实现界面:进阶HTML CSS Step2-任务2_第1张图片

借鉴 table:






	

		

		简单校园页面

		

	

	

		找不到图片

		
我的校园 校园生活 我的家园
计算中心
       



             
资环学院
信息学院
动科学院

你可能感兴趣的:(前)