CSS
关注
分享
扫一扫
7Maggie_C
这个作者很懒，什么都没留下…
展开
-
Web前端－HTML/CSS－响应式页面的设计
所谓响应式页面，即集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。只需在<head>标签下添加如下代码：<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0...原创 2018-03-16 22:41:50 · 1209 阅读 · 1 评论 -
CSS模块化开发
CSS 模块化一、文件结构常见文件结构一个项目的CSS最基本结构通常是下面这样的：- base.css- common.css- pages.css复杂一点的项目可能是这样分：- base.css- header.css- footer.css- sidebar.css- forms.css- icons.css- buttons.css- dropd...转载 2018-09-27 19:20:52 · 350 阅读 · 0 评论 -
CSS｜backdrop-filter 和filter 写出高斯模糊效果 以及两者区别
backdrop-filter：blur(10px);只支持ios端；只作用于当前元素；适用场景：为背景添加模糊效果；如果目标元素内包裹着其他内容 则应用filter属性；（不支持安卓，效果不明显） filter：blur(10px); 兼容性比较好，不仅仅作用于当前元素，后代元素也会继承这个属性，作用于一个空背景元素没有效果适用场景：（效果其实还是通过作用于具体的img...转载 2018-04-10 12:49:16 · 5250 阅读 · 0 评论 -
vue2.0之transition
vue2.0的transition渐入渐出功能在1.0的基础上做了较大变动，功能也更强大。1.0的写法是&.fade-transition?12345678.detail transition all 0.5s &.fade-transition opacity 1 background rgba(7,17,27,0.8) &.fade-enter,&am...原创 2018-04-10 07:56:20 · 370 阅读 · 0 评论 -
两种最常用的Sticky footer布局方式
Sticky footer布局是什么？我们所见到的大部分网站页面，都会把一个页面分为头部区块、内容区块和页脚区块，当头部区块和内容区块内容较少时，页脚能固定在屏幕的底部，而非随着文档流排布。当页面内容较多时，页脚能随着文档流自动撑开，显示在页面的最底部，这就是Sticky footer布局。图示说明当内容较少时，正常的文档流效果如下图在正常的文档流中，页面内容较少时，页脚部分不是固定在视窗底部的，...转载 2018-04-07 15:53:38 · 345 阅读 · 0 评论 -
CSS／Sticky footers
《CSS Secrets》是@Lea Verou最新著作，这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书。问题在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。这种效果不仅是无处不在，很受欢迎，而且实现起来看上去也非常容易。...转载 2018-04-07 15:27:18 · 178 阅读 · 0 评论 -
HTML/CSS/JavaScript fullPage.js的使用
关于fullPage.js：fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站，主要功能有：支持鼠标滚动支持前进后退和键盘控制多个回调函数支持手机、平板触摸事件支持 CSS3 动画支持窗口缩放窗口缩放时自动调整可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等兼容性jQuery 兼容兼容 jQuery 1.7+。浏览器兼容IE8+ ✔...转载 2018-03-19 08:01:41 · 471 阅读 · 0 评论 -
HTML／CSS 如何修改submit的宽与高
今天在做一个网站项目时需要修改<input type="submit" >的宽高，发现如果直接这样添加的话<input type="submit" style="height: 50px;width: 100px"> submit的宽高并不会发生变化。后查询得知，在Mac上面，准确来说在所有的苹果设备上面，如果直接设置height:35px;width:20px的话，sub...原创 2018-03-18 21:40:37 · 13930 阅读 · 1 评论 -
CSS display:flex 相关用法（转载＋补充）
转载自阮一峰的博客网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全...转载 2018-03-17 18:21:20 · 449 阅读 · 0 评论 -
CSS background-size contain 与cover的区别
最近在重温CSS，发现好多东西都忘了，比如background－size属性中，contain与cover的区别。菜鸟教程上是这么说的： 有点难理解，通俗解释就是：两者均以保持图像宽高比的形式缩放来适合背景容器的大小。那么两者的区别呢？这就要根据图像是否重复来分别讨论了。在no-repeat情况下，如果容器宽高比与图片宽高比不同， cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分...原创 2018-03-17 16:57:35 · 9629 阅读 · 1 评论 -
CSS BFC（块格式化上下文）原理详解
三种定位方案在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案:普通流 (normal flow)在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML ...原创 2019-04-02 15:19:15 · 323 阅读 · 0 评论