实现页面布局

多栏布局页面

当我们开发一个网站的时候,有几种我们常见的页面布局的方法,比如多栏布局页面、弹性布局页面。利用布局的方法使我们的页面更完整更美观。下面是我用代码实现的多栏布局页面(如下图)
在这里插入图片描述
首先创建头部一个div为box类,中间创建一个大的div包裹着三个小的div,分别给它们设置类,尾部就跟头部一样然后设置一个类box2。
然后给它们设置样式(CSS部分如下图)
在这里插入图片描述
(实现的效果图如下)
在这里插入图片描述
看起来代码并不难写,但要是做一个真正的页面可不止这么简单。我们要考虑到这个页面不仅可以在电脑上看的美观整齐而且同时要在手机上看的页面效果要一致。
学习总结:通过这次的学习,我懂得如何去布局一个页面,然后使页面更完整的效果。然后找到自己的不足,使自己的学习能力提高,我也希望大家能给一些意见,一起进步。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值