CSS布局
文章平均质量分 67
lilly呀
这个作者很懒,什么都没留下…
展开
-
vue的for循环一行两列
vue中使用v-for循环,实现一行两列的布局原创 2022-04-13 17:36:56 · 8202 阅读 · 0 评论 -
用css实现聊天对话框向上小三角效果
背景:有时候,我们会遇到用CSS设计对话框效果的样式,我们可以用CSS设计出对话框的尖角效果。一、尖角效果的实现原理<!DOCTYPE html><html><head><meta charset="utf-8"><style>div{ display:block; width:0px; height:0px; border-top:25px solid blue; border-bott原创 2021-02-02 10:29:46 · 1682 阅读 · 0 评论 -
移动端首页头图自适应布局
前言:有时候,我们在移动端制作登陆首页的时候,上半部分是一部分图片,中间为登陆框,底部为logo,需求会要求上半部分的图片,在不同的移动设备上,图片不被压缩。解决方法:就是把整个背景图片切成两部分,高度用百分比的形式来显示。一、html部分<div id="app"> <template> <div class="page" style="height:100%;box-sizing:border-box;max-width:640px;m原创 2020-12-18 15:22:15 · 849 阅读 · 0 评论 -
手机端日历calendar页面布局方案
背景:最近,手机微信端的项目需要重构,涉及到日历页面,需要重新设计一个,遇到的日历页面布局如下,在此记录一下。一、日历页面基本布局 查看设计稿,日历局部的布局难点在于红色部分,涉及到三级嵌套,而且有选中与未选中状态的背景色变化,且“入住”与“离店”状态之间又有灰色背景,处理好这部分的布局结构,那么问题也就迎刃而解了。 日历全局页面,分为两个部分,底...原创 2019-04-18 13:54:28 · 974 阅读 · 0 评论 -
如何实现“新手引导”效果
前言:初次登录一些网站时,一般会有“新手指引”操作,用于指引新用户如何使用本网站的一些说明。在网上查阅资料,学习了《慕课网》的一个视频资料,现记录如下。“新手指引”操作,主要涉及html结构(黑色蒙版),css的绝对定位,js的“下一步”操作,以及用户登录时只操作一次的cookie设置。一、HTML结构介绍 HTML结构布局,添加蒙版,定义父块及各个引导单元。<!DO...转载 2018-12-11 10:18:09 · 14731 阅读 · 0 评论 -
弹出框--用css实现div在页面居中(水平垂直居中效果)
前言:在写页面的时候,经常会用到弹出框效果,一般使用插件进行处理,但是有时会出现冲突问题,下文将记录用CSS实现弹出框效果,超级简单,在此记录一下。一、div宽高固定,使用css实现居中效果 ①当div的宽高固定时,父元素shadow通过absolute定位以后,通过top:50%,left:50%移动到屏幕中央,子元素shadow-bg也absolute定位,通过top,lef...原创 2018-10-10 14:02:02 · 20893 阅读 · 1 评论 -
网页布局“三层元素叠加”--使用z-index来改变网页中元素的堆叠顺序
前言:最近,在写网页的时候,有遇到一个三级堆叠的视觉效果,再次回顾一下层模型,absolute和z-index的相关知识,再此mark一下。一、视觉设计稿和相关布局分析 网页的UI设计稿如下所示: 网页层模型采用顺序流,使用absolute定位,通过top来上移位置,使用z-index实现堆叠效果。此时,网页在窗口进行缩放时,中间白色主体部分始终居中显示,网页整体...原创 2018-08-30 14:01:08 · 1673 阅读 · 0 评论 -
微信公众号内嵌的H5页面
前言:之前写微信端购物商城的页面时,使用过flex布局,方便灵活,对手机端兼容性良好,同时可应对复杂的嵌套布局,很是方便。但是,针对两栏式的微信端页面,除了flex布局,还有较为简单的position:relative;和padding-left:90px;布局方法,这类布局简单易操作,在某些场景下有广泛使用。一、了解需求及实例 页面布局如下图所示: ①...原创 2018-08-15 15:31:31 · 48536 阅读 · 1 评论 -
CSS布局--布局模型
前言:在网页中,我们经常运用CSS来进行布局,那么,CSS常用的布局模型有哪些呢?今天,我们就来了解一下吧。在网页中,元素有三种布局模型:①流动模型(Flow)默认的;②浮动模型(Float);③层模型(Layer)。一、流动模型(Flow) 流动(Flow)模型是默认的网页布局模型,也就是说网页在默认状态下的HTML网页元素,都是根据流动模型来分布网页内容的。 流动布局模...原创 2018-07-05 16:19:44 · 2546 阅读 · 1 评论 -
CSS布局对齐方式--水平居中、垂直居中、水平垂直居中
前言:在网页布局中,经常遇到需要使元素居中对齐的时候,居中对齐的方式有:水平居中、垂直居中和水平垂直居中。这次,借此回顾总结一下,并在此记录下相关内容。一、水平居中: (1)行内元素的水平居中 如果被设置的元素为文本、图片等行内元素时,在父元素中设置text-align:center实现行内元素水平居中,将子元素的设置为display:inline-...原创 2018-07-04 11:09:39 · 45728 阅读 · 1 评论 -
基于flex弹性布局实现“头尾固定,中间滚动”的页面
最近,在写微信端购物商城的项目时,有遇到“头尾固定,中间滚动的”页面布局,基于现在很多购物类APP都是这种布局,在此记录一下。比如,淘宝的首页:一、相关实例介绍 头部搜索框和底部菜单栏的内容固定,中间区域部分的内容,随着游览的内容不断滚动,滚动的同时,也不会影响头部和尾部的位置,也不会遮盖住头部和尾部的内容。 这种布局运用很多,有时候,会用fix...原创 2018-06-19 11:16:58 · 6051 阅读 · 0 评论 -
清除浮动还是闭合浮动(Enclosing float or Clearing float)?闭合浮动的方式有哪些?
前言:当我们开始进行网页布局的时候,就开始接触了浮动float。使用浮动,可以轻松地帮助改变文档的普通流,让div进行左浮动和右浮动,从而快速的实现基本的布局。因为任何元素都可以浮动,浮动的使用范围较广,所以,有时也会出现滥用浮动的情况。然而,因使用浮动改变了文档的普通流,常常会影响相邻元素的排列方式,就涉及到清除浮动的方式。一、清除浮动还是闭合浮动(Enclosing flo...原创 2018-06-25 18:09:22 · 485 阅读 · 0 评论 -
使用flexbox来布局web应用--在页面中把一个元素居中/垂直放置一系列的容器/创建一个水平折叠的容器
随着flex布局在移动端的广泛应用,在PC端越来越广泛的支持,使用flexbox可以帮助你设计出引人注目的布局,并且在PC端或移动端能够很好的缩放。告别使用浮动的<div>布局、绝对定位和一些JavaScript hacks,使用仅仅几行CSS就可以构建出水平或垂直方向的布局。下面是本文的一些基本的使用案例: ①将一个元素放在页面的中间; ②一组在垂直方向可...原创 2018-06-15 16:53:18 · 440 阅读 · 0 评论