基于“浮动+定位”网页布局技术在HTML5+CSS3中的研究  

Research on“Floating+Positioning”Web Layout Technology in HTML5+CSS3

作　　者：程代娣[1] CHENG Daidi

机构地区：[1]安徽警官职业学院信息管理系,安徽合肥230031

出　　处：《淮南师范学院学报》2024年第5期137-143,共7页Journal of Huainan Normal University

基　　金：高校科研计划校级自然科学研究重点项目“基于HTML5响应式Web前端设计应用研究——以《监所网站建设与维护》课程为例”(2022zkxm004);2023年度高校中青年教师培养行动项目——青年骨干教师境内访学研修资助项目(JNFX2023155);安徽高校自然科学研究项目(重点)“基于深度学习的图像分割方法研究”(KJ2021A1471)。

摘　　要：目前很多网页布局往往采用单一的浮动布局或定位布局技术。二者各有优缺点,浮动布局可以灵活地实现多种页面布局,但不能精确控制元素的位置,而定位布局使元素出现在指定的精确位置。为实现灵活布局和元素的精确定位,文章提出浮动布局和定位布局相结合技术,从而能更简单、有效地完成复杂页面的布局。本文首先分析了页面布局类型,其次研究了页面浮动和定位布局基本原理,最后通过一个案例阐述了浮动和定位布局相结合应用,为学习网页布局技术提供参考。At present,many web layouts often use a single floating layout or positioning layout technology.Both have advantages and disadvantage:floating layout can flexibly achieve a variety of page layout,but can not precisely control the position of the element;positioning layout makes the element appear in the specified precise location.In order to realize flexible layout and precise positioning of elements,this paper puts forward the technology of combining floating layout and positioning layout,which can complete complex page layout more simply and effectively.This paper first analyzes the types of page layout,then studies the basic principles of page floating and positioning layout,and finally expounds on the combined application of floating and positioning layout through a case,which provides a reference for learning web layout technology.

关 键 词：网页布局 浮动 定位布局 

分 类 号：TP393.092[自动化与计算机技术—计算机应用技术]