前端学习之旅(四)【float实操】

任务

使用float的方式,实现以下效果:

前端学习之旅(四)【float实操】_第1张图片

代码实现





    
    浮动小实践
    



    
banner1
banner2
栏目一
栏目二
栏目三
栏目四
栏目五
栏目六
栏目七
栏目八
栏目九
页脚

实现结果展示

前端学习之旅(四)【float实操】_第2张图片

总结

在编写HTML页面元素之前,可以提前将一些大量使用的样式先制作对应的CSS样式,后续通过添加类名即可。

参考内容

浮动布局练习

你可能感兴趣的:(B大学前端,学习,html,前端)