移动端样式布局
文章平均质量分 55
lemon0__0tree
这个作者很懒,什么都没留下…
展开
-
侧边栏的滑进滑出效果
点击左上角用户头像,侧边栏快速滑出,然后单击右侧区域,侧边栏快速滑入。侧边栏悬浮在网页主体内容之上,通过position属性值为absolute实现该效果。接下来要将其隐藏,一般情况下绝对定位通过指定left和top来实现,此处只需要将left属性赋值为“元素宽度乘以负1”即可。html结构分为主体、遮罩和侧边栏三个部分,遮罩和侧边栏默认隐藏。<div class="body"> ...转载 2018-05-02 15:51:30 · 2587 阅读 · 0 评论 -
水平居中和垂直居中
一、水平居中1、行内元素,对其父元素设置text-align:center2、块级元素,如果它有固定的宽度,对自身设置margin: 0 auto; 如果没有固定的宽度,借助css3变形属性transform来实现 position:absolute; left:50%; transform:translateX(-50%);二、垂直居中1、行内元素垂直居中 1)单行文本垂直居中...转载 2018-05-02 18:07:24 · 774 阅读 · 0 评论 -
flex多栏布局
在不同分辨率下显示不同的效果。 当屏幕宽度大于1000像素的时候,显示为三栏。 当屏幕宽度小于1000像素,大于768像素时,隐藏右侧边栏。 当屏幕宽度小于768像素,纵向排列三栏。 <!--页面主体--> <div class="container"> <!--导航菜单--> <nav> <a hr...转载 2018-05-02 21:47:08 · 182 阅读 · 0 评论