![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 87
刺杀曲奇兔
这个作者很懒,什么都没留下…
展开
-
了解响应式布局--知识点+案例详细讲解
+ 媒体查询 - MediaQuery使用方法 - @media常用参数 - 媒体查询的其他引入方式 + flex弹性布局 + 案例展示: - 1.输入框布局 - 2.长表单布局 - 3.不同宽度的视口下自动调整字体大小 - 4.自适应布局 - 5.响应式布局原创 2022-01-29 21:08:25 · 836 阅读 · 0 评论 -
响应式布局之案例--常见电商类页面效果
本博客由于字数原因从作者上一篇博客摘分出来进行讲解,如果想了解响应式布局可以点此链接进入。 响应式布局的布局特点为确保一个页面在所有终端上,都能显示出令人满意的效果,用一句话来概括就是 一套方案,处处运行。 废话不多说,先来看看页面在移动端和pc端的效果 pc端: 移动端: 可以看出来,最上面是banner区,左侧导航,右侧内容展示,妥妥的电商平台网页,实现方法就是调整布局的宽高占比、横纵排列以及细节优化。怎么具体实现请看代码: html部分很简单,只有div盒子以及li标签。 <div.原创 2022-01-29 20:46:02 · 1435 阅读 · 0 评论 -
浮动对页面带来的影响以及怎样消除浮动(详细)
网页布局是 CSS 的一个重点应用,传统的盒子模型依赖的主要是display,position以及float属性。在多次应用浮动之后,我决定深入了解浮动的原理,应用以及浮动带来的影响,如何清除浮动等,进行一番深入探索。自己汲取知识的同时也能方便在看的读者朋友,让我们开始吧! 首先,什么是浮动? 浮动,顾名思义,就是浮起来,脱离文档流,元素脱离正常元素的布局排版规则,其他处于文档流中的盒子在计算布局排版时,会自动无视已脱离文档流的元素来进行定位。 float属性用于创建浮动框,将其移动到一边,直到左边缘或.原创 2022-01-22 00:06:41 · 2193 阅读 · 0 评论