【前端基础篇】一文掌握所有网页布局方式

最新推荐文章于 2025-04-05 17:22:58 发布
最新推荐文章于 2025-04-05 17:22:58 发布
阅读量559 收藏
点赞数
分类专栏： CSS3 前端开发知识 网站搭建 文章标签： 前端 网页布局 CSS html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39335404/article/details/131717560
版权
本文介绍了网页布局的五种主要技术：静态布局、流式布局、自适应布局、响应式布局和弹性布局（rem布局）。静态布局使用固定像素，不适应屏幕变化；流式布局使用百分比宽度，保持布局不变；自适应布局通过媒体查询切换不同静态布局；响应式布局结合流式和自适应，利用媒体查询提供多套布局；弹性布局使用rem单位，允许元素尺寸随字体大小变化。各种布局各有优缺点，适用于不同的设备和场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

​
一、静态布局(Static Layout)
即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。

HTML5+CSS3系列课程
携程网首页-移动端
响应式布局实战之微加建站
校园官网考试实战项目

1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度)布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。
2、设计方法：

PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；

移动设备：另外建立移动网站，单独设计一个

了解本专栏 订阅专栏 解锁全文 超级会员免费看
【Web前端】一文带你吃透HTML(完整篇)
zhangxia_的博客
10-24 2万+
万维网W3C标准中网页分为结构，表现和行为三部分，HTML用于描述页面的结构，CSS用于控制页面中的元素样式，JavaScript用于响应用户的操作。HTML，CSS和JavaScript组成了前端技术栈。
【前端之旅】一文掌握AJAX技术
请你喝杯Java
09-27 647
AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML优点：在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。不使用AJAX，浏览器与服务器交互总要刷新页面（GET请求新页面，POST提交表单）AJAX中的X代表XML，早期AJAX以XML为数据交换格式目前JSON是AJAX中数据交换的主要格式AJAX作用：与服务器进行数据通信：通过AJAX可以给服务器发送请求，并获取服务器响应的数据。
前端页面常见的三种页面布局
weixin_65030370的博客
05-06 475
熟练运用好三种布局，就可以很方便的进行前端页面的制作，练起来吧！
前端常见的几种布局方式
wding914的博客
08-18 5736
页面布局
Web前端页面搭建
最新发布
mengyao2001的博客
04-05 356
在view视图文件中修改 前端展示名称和html文件名相同。在public目录中的。htaccess中填写下面代码。在根目录中创建index目录将html放在根目录中。将public的文件替换压缩包在下面。创建网站，根目录到public。创建index前端页面。在文件夹里安装tp框架。打开页面展示以下效果。在PS中打开tp文件。
前端常见的十种布局方式
qq_20382175的博客
03-11 1760
前端布局有很多种，各式各样，每个都有它自己适合的应用场景，并不是说主流或者常用好的就是最好的，视情况而定，个人用的比较多的是 flex 布局🤭。
网页布局的分类
WYJ的博客
10-29 5585
一、静态布局（Static Layout） 即传统web设计，网页上的所有元素的尺寸一律使用px作为单位。 布局特点：不管浏览器具体尺寸是多少，网页布局始终按照最初写代码时候的布局来显示。常规的pc的网站都是静态的（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度，就会出现滚动条，如果大于这个宽度，则内容居中外加背景，这种设计常见于pc端。 设计方法： pc：居中布局...
前端界面布局的几种方法
MaYang_的博客
09-08 1996
几种布局区别 https://blog.csdn.net/sunday97/article/details/84591190 先明白视口和像素是什么 https://www.cnblogs.com/webxu20180730/p/9562543.html 1. 流式布局 什么是流式布局？开发思路如何？ 一个典型的案例（http://m.duba.com/）用浏览器控制台调控尝试一下吧 适用页面特...
爬虫训练场基础铺垫，BT加载器，分页，列表组，卡片，下拉菜单一文掌握
梦想橡皮擦，专栏100例写作模式先行者，现象级专栏 《Python 爬虫 100 例》作者、《滚雪球学 Python 专栏》原创者
12-21 1万+
本篇博客为大家继续补充，爬虫训练场这一项目需要的 Bootstrap 基础知识，其内容设计加载器，分页，列表组，卡片，下拉菜单。Bootstrap 5 提供了下拉列表（dropdown）组件，可以用来在网站或应用中创建下拉菜单。Bootstrap 5 提供了列表组（list group）组件，可以用来在网站或应用中创建列表。Bootstrap 5 提供了卡片（card）组件，可以用来在网站或应用中创建卡片布局。在 Bootstrap 中，卡片是使用 .card 类来创建的。等类来设置卡片的内容。
【Web前端】一文带你吃透CSS(上篇)
热门推荐
zhangxia_的博客
10-31 1万+
CSS 指层叠样式表 (Cascading Style Sheets)。样式定义如何显示 HTML 元素样式通常存储在样式表中外部样式表可以极大提高工作效率，通常存储在CSS文件中多个样式定义可层叠为一个。
前端常用布局方式
YM_010530的博客
09-30 670
前端常用布局方式：静态布局，弹性布局（flexbox），自适应布局（bootstrap），流式布局（fluid），响应式布局，浮动布局，网格布局（grid），定位布局
前端的布局方式
hmxxhbjt的博客
02-23 2306
前端的布局方式有以下几种：文档流、浮动布局、流式布局、定位布局、弹性布局、自适应布局和响应式布局。 1、文档流：就是将窗体自上而下分成一行一行，其中块级元素就是自上而下的排列，撑满一行，宽度是父元素的100%，而高度就是根据内容撑开；而行内元素则从左到排列，撑满一行在换行，它的高度和宽度就是根据内容撑开的。 2、浮动布局：它就是可以让块级元素显示在同一行，但是浮动的话就不会再撑开父级的高度了，这就会造成高度塌陷，有兄弟标签时就会出现布局重叠问题，因此如果用了浮动，同级兄弟标签也要浮动，或者清除浮动。用了
静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别
wy983948599的博客
07-11 1406
一、静态布局（Static Layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。2、设计方法：　　PC：居中布局，所有样...
前端布局的方式
kepler星球的博客
02-24 487
前端布局的方式 1.静态布局： 最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。采用的是css2之前的写法,不存在浏览器兼容性。布局简单。但是移动端不可以使用pc端的页面,两个页面的布局不一致,移动端需要自己另外设计一个布局并使用不同域名呈现。 2.弹性布局： css3引入的，flex布局；优点在于其容易上手，根据flex规则很容易达到某个布局效果，然而缺点是：浏览器兼容性比较差，只能兼
前端布局学习笔记（第一篇：入门）
斌哥谈编程
05-11 288
文章目录一、知识点1、margin、padding有什么区别，不想再混乱了2、五种最常见的CSS页面布局3、box-sizing属性是什么作用？4、行内元素水平方向不对齐有哪些原因？5、块标签、行内标签、行内块标签有哪些？区别是什么？6、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？7、display有哪些值？说明他们的作用?8、请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？9、CSS3有哪些新特性？10、display:none与visibility：hidden
前端三种布局方式
m0_47431585的博客
03-17 1143
前端三种布局方式
前端页面布局方式总结
zhou
01-26 1671
前端布局方案灵活，方式并不唯一，仅供参考。 八种布局1. 弹性布局（flex）布局概念优点缺点2. 流式布局（Liquid Layout）布局概念优点缺点3. 响应式布局(Responsive layout)布局概念优点缺点4. 静态布局(Static Layout)布局概念优点缺点5. 网格布局布局概念优点缺点6. 圣杯布局（Holy Grail Layout）布局概念优点缺点关联7. 双飞翼布局布局概念优点缺点关联8. 悬挂式布局布局概念备注： 1. 弹性布局（flex） 布局概念 Flexible B
前端页面几种常见的布局方式
往事随风~未来可期
07-10 2944
1、静态布局 2、弹性布局 3、自适应布局 4、流式布局 5、响应式布局 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 圣杯布局方式 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <...
鲜花商城系统参考文献20篇
03-04
### 鲜花商城系统参考文献 对于鲜花商城系统的开发，可以从多个角度获取灵感和技术支持。郝勤在其研究中指出，在设计任何类型的管理系统时，理解数据库结构及其应用程序开发流程是至关重要的基础工作[^3]。 #### 数据库设计的重要性 在构建鲜花商城系统的过程中，合理的数据库规划能够有效提升系统的性能和用户体验。这不仅涉及到如何存储商品信息、订单记录以及客户资料等内容，还需要考虑数据的安全性和可扩展性等问题。因此，在着手编写代码之前，应当先完成详尽的需求分析并据此制定科学的数据库设计方案。 #### 开发框架的选择 针对Web端的应用程序，《基于B/S模式的学生毕业设计管理系统的设计和应用》一文中提到采用Spring Boot作为后台服务的技术栈是一个不错的选择。该框架提供了丰富的功能模块和支持快速迭代的能力，非常适合用于搭建像鲜花商城这样面向用户的电子商务平台[^1]。 #### 用户交互体验优化 为了提高顾客满意度，除了确保网站本身稳定可靠外，还应该注重页面布局美观大方、购物流程简便快捷等方面的工作。通过引入现代化前端技术如Vue.js 或 React 来增强视觉效果的同时简化操作步骤，可以让更多潜在买家顺利完成交易过程[^2]。 ```python from flask import Flask, render_template_string app = Flask(__name__) @app.route('/') def home(): template = """ <!DOCTYPE html> <html lang="en"> <body> <h1>Welcome to the Flower Shop!</h1> <!-- More HTML code here --> </body> </html> """ return render_template_string(template) if __name__ == '__main__': app.run(debug=True) ``` 此段Python代码展示了使用Flask创建简单HTTP服务器的方法，可用于展示鲜花商城首页的内容。当然实际项目会更加复杂，涉及更多的业务逻辑处理和服务接口定义等工作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MagnumHou

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值