bootstrap学习笔记——黑马商城案例

bootstrap学习笔记——黑马商城案例

1.完成bootstrap的初始化工作

2.创建9个div

1.第一个div:存放logo信息,在中等屏幕,每个占四份,小屏幕,超小屏幕,每个占12份
2.第二个div:存放导航条,不用控制响应式
3.第三个div:存放轮播图,不用控制响应式
4.第四个div:存放热门商品
		1.上下切分为两个div
			上面的div
				存放热门商品文字信息
			下边的div
						存放商品图片
				切分为两个div
					左边的div
						存放竖着的大图:在中等屏幕占2份,小屏幕占12份,超小屏幕隐藏
					右边的div
						存放具体商品小图:在中等屏幕的时候占10份,小屏幕占12
份,超小屏幕12
						大图:在中等屏幕的时候占6份,小屏幕占隐藏,超小屏幕隐藏		
						小图:在中等屏幕的时候占2份,小屏幕占三份,超小屏幕6份
5.	第五个div:存放图片
6.		第六个div:	存放热门商品
		1.上下切分为两个div
			上面的div
				存放热门商品文字信息
			下边的div
						存放商品图片
				切分为两个div
					左边的div
						存放竖着的大图:在中等屏幕占2份,小屏幕占12份,超小屏幕隐藏
					右边的div
						存放具体商品小图:在中等屏幕的时候占10份,小屏幕占12
份,超小屏幕12
						大图:在中等屏幕的时候占6份,小屏幕占隐藏,超小屏幕隐藏		
						小图:在中等屏幕的时候占2份,小屏幕占三份,超小屏幕6份							
7.第七个idiv:存放图片		
8.第八个div:存放友情链接
9.第九个div:存放版权信息	

代码实现




	
	
	
	
	
	


	
热门商品

电饭煲

$9899

电饭煲

$9899

电饭煲

$9899

电饭煲

$9899

电饭煲

$9899

电饭煲

$9899

电饭煲

$9899

电饭煲

$9899

电饭煲

$9899

版权所有 侵权必究 烟台大学区块链技术应用研究中心

你可能感兴趣的