当前位置: 首页 > news >正文

网页布局思路

一、布局思路

1,确定页面的版心(可视区)

2、分析页面中的行模块,以及每个行模块中的列模块。(页面布局第一准则)

3、一行中的列模块经常用浮动布局,先确定每个列的大小,之后确定列的位置(页面布局第二准则)

4、制作 HTML结构。遵循先有结构,后有样式的原则。(结构永远最重要)

所以,先理清楚布局结构,再写代码尤为重要

二、布局总结

通过盒子模型,清楚知道大部分html标签是一个盒子。

通过CSS浮动、定位可以让每个盒子排列成为网页。

一个完整的网页,是标准流、浮动、定位一起完成布局的,每个都有自己的专门用法。

1.标准流

可以让盒子上下排列或者左右排列,垂直的块级盒子显示就用标准流布局

2.浮动

可以让多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局

3.定位

定位最大的特点是有层叠的概念,就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局

相关文章:

  • 【Django】教程-15-注册页面
  • [Effective C++]条款30:透彻了解inlining的里里外外
  • 如何通过简单步骤保护您的网站安全
  • 【Dart语言】七、类修饰符
  • 5️⃣ Coze+AI应用基础教学(2025年全新版本)
  • LLM之Agent(十六)| MCP已“过时”?Google近期推出Agent2Agent 协议 (A2A)
  • 学校安全用电解决电安全隐患-充满活力的校园享受科技进步的便利
  • LangGraph 架构详解
  • 计算机组成原理——CPU与存储器连接例题
  • UML-银行取款序列图
  • 《解锁分布式软总线:构建智能设备统一管理平台》
  • Python装饰器(Decorator)详解
  • 【c】-include经典注入问题
  • Python学习笔记(二)(字符串)
  • 有哪些反爬机制可能会影响Python爬取视频?如何应对这些机制?
  • C#结合SQLite数据库使用方法
  • Dynamics365 ExportPdfTemplateExportWordTemplate两个Action调用的body构造
  • CASAIM自动化智能检测系统在螺杆转子数字化检测应用
  • 使用 Datadog 和 Slack Alerts 监控 minikube
  • Linux安装Elasticsearch详细教程
  • 印记室内设计网站/站长工具 站长之家
  • 成都自助建站软件/互联网营销策略有哪些
  • 四川住房和城乡建设局网站/教育培训报名
  • django 开放api 做网站/免费seo视频教学
  • 做网站先学什么/网页模板之家
  • 泰安北京网站建设/seo和竞价排名的区别