前端基础总结——布局

最新推荐文章于 2023-07-03 15:29:44 发布

--Rainman

最新推荐文章于 2023-07-03 15:29:44 发布

阅读量275

点赞数 1

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/weixin_44541250/article/details/86513411

本文介绍了前端开发中常用的布局方法，包括Flex弹性布局、响应式布局及栅格响应式布局等，强调了在不同设备上保持网页美观的重要性。

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

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：html+css3

作者：张海锋

撰写时间：2019-1-16

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

在学习前端的过程中，我觉得最重要的就是对网页的布局得有一条清晰的思路。所以我们要对布局方法有一定的了解。下面简要的说说几种常见的布局。

1.Flex弹性布局，可以简便、完整、响应式地实现各种页面布局。
而传统解决方案，基于盒状模型，需要position属性或者float属性才能实现与其相同的布局。如图：

flex布局代码：(只需在父元素上加display：flex；就能令子元素并排显示)

position属性或者float属性代码：（需在每个子元素上加浮动才能令其并排显示）

而flex弹性布局还有一个属性：随屏幕宽度的改变其子元素也会随之伸缩。

2.响应式布局：媒体查询（是一种CSS语法。可以根据浏览器的特性，
一般是屏幕或浏览器容器宽度提供CSS规则。）

在刚开始学习前端时，自己做了一个静态网页。本来做出来的效果在自己电脑上看觉得很完美，但考在别人的电脑上看时样式全乱了。然后就上网查找了原因才知道，电脑的分辨率不同会导致样式的混乱，后来才知道用响应式布局：媒体查询的方法可以解决。~~最后果然弄好了。

3.栅格响应式布局（引用bootstrap）

以上几种是学习前端最基础的~也是最实用的布局手法。。。。

博客等级

码龄7年

38
原创

21
点赞

61
收藏

7
粉丝

关注

私信

热门文章

下一篇：: 伪类样式总结

最新评论

用css3制作跳动的爱心
m0_75247197: *{ padding:0; margin: 0; } body{ display:flex; justify-content: center; align-items: center; height: 100vh; } .love{ position:relative; width: 200px; height: 200px; transform: rotate(45deg); background: crimson; animation: love 1s infinite; } .love::after,.love::before{ content:''; position: absolute; width: 200px; height: 200px; border-radius: 50%; background: crimson; animation: love 1s infinite; } .love::after{ top:0; left: -100px; } .love::before{ top:-100px; left: 0; } /* 定义心跳动画*/ @keyframes love{ 0%{ width:200px; height: 200px; } 20%{ width:230px; height: 230px; background: #ef3953; } 100%{ width:200px; height: 200px; } }
用css3制作跳动的爱心
m0_75247197: *{ padding:0; margin: 0; } body{ display:flex; justify-content: center; align-items: center; height: 100vh; } .love{ position:relative; width: 200px; height: 200px; transform: rotate(45deg); background: crimson; animation: love 1s infinite; } .love::after,.love::before{ content:''; position: absolute; width: 200px; height: 200px; border-radius: 50%; background: crimson; animation: love 1s infinite; } .love::after{ top:0; left: -100px; } .love::before{ top:-100px; left: 0; } /* 定义心跳动画*/ @keyframes love{ 0%{ width:200px; height: 200px; } 20%{ width:230px; height: 230px; background: #ef3953; } 100%{ width:200px; height: 200px; } }
用css3制作跳动的爱心
m0_75247197: *{ padding:0; margin: 0; } body{ display:flex; justify-content: center; align-items: center; height: 100vh; } .love{ position:relative; width: 200px; height: 200px; transform: rotate(45deg); background: crimson; animation: love 1s infinite; } .love::after,.love::before{ content:''; position: absolute; width: 200px; height: 200px; border-radius: 50%; background: crimson; animation: love 1s infinite; } .love::after{ top:0; left: -100px; } .love::before{ top:-100px; left: 0; } /* 定义心跳动画*/ @keyframes love{ 0%{ width:200px; height: 200px; } 20%{ width:230px; height: 230px; background: #ef3953; } 100%{ width:200px; height: 200px; } }
用css3制作跳动的爱心
m0_75247197: *{ padding:0; margin: 0; } body{ display:flex; justify-content: center; align-items: center; height: 100vh; } .love{ position:relative; width: 200px; height: 200px; transform: rotate(45deg); background: crimson; animation: love 1s infinite; } .love::after,.love::before{ content:''; position: absolute; width: 200px; height: 200px; border-radius: 50%; background: crimson; animation: love 1s infinite; } .love::after{ top:0; left: -100px; } .love::before{ top:-100px; left: 0; } /* 定义心跳动画*/ @keyframes love{ 0%{ width:200px; height: 200px; } 20%{ width:230px; height: 230px; background: #ef3953; } 100%{ width:200px; height: 200px; } }
Wpf DataGrid的数据绑定
yang3389: 学习了dataGrid1.ItemsSource = dt.DefaultView;

大家在看

最新文章

目录

展开全部

收起

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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