css

Fle 布局教程：语法篇

Flex 布局教程：语法篇（修改转载自阮一峰老师的博客）网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它
业界 2016年06月29日

18 个 UI demo 设计实例，深挖让用户愉悦的小惊喜

文章分享了对话框及模态窗口、注册与登录页面、导航及菜单、滑动条和切换开关等UI设计实例，希望对大家有所启发。CodePen网站已成为开发者的游乐场。那是一个你可以驰骋想象、开发创造的沙盘。里面既有实践的东西，也有实验性的概念——是个激发灵感的宝库。我们在其中做了一些挖掘，发现了一些有趣的UI demo和概念图，包括对话框和模态窗口、注册与登录页面、导航及菜单、滑动条和切换开
产品 2017年01月05日

Sass 与 SCSS 是什么关系？

我最近写了很多 Sass 代码，但是最近发现并不是每一个人都知道 Sass 具体是什么。下面是一个简短的说明：当我们说起 Sass ，我们经常指的是两种事物：一种 css 预处理器和一种语言。我们经常这样说，“我们正在使用 Sass”，或者 “这是一个 Sass mixin”。同时，Sass （预处理器）有两种不同的语法：Sass,一种缩进语法SCSS,一种 CSS-lik
业界 2016年07月06日

position:absolute的容器居中

web页面开发中，最经常是使用的当然要属于容器居中啦，“居中”有时候是一个很简单的问题，但是！有时候也让人苦恼的“牙痒痒”！HTML代码如下： child containerCSS代码（不占据文档流，水平居中）如下：# parents { width: 100%; position: relative; background-color: pink;
业界 2016年07月27日

background-clip 和 background-origin

下面都是我自己的理解, 如果有不对的地方, 还请大家帮忙指出.下面是在 chrome 浏览器上测试的background-clip 和 background-origin先说说background-imagebackground-image 默认的起始位置是 padding 外边缘的左上角. 如下图所示:但是注意: 默认的结束位置却是 border 外边缘的右下角, 如下图
业界 2016年07月27日

书页效果

书页效果.book {position: relative;width: 200px;height: 248px;margin-left: 20px;border: 1px # eee solid;background-color: # fff;box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2)}.book::after {positi
业界 2016年07月18日

切图崽的自我修养－优化图片加载流程

前言优化！ 又是优化！切图崽们作为整个web应用的纽带，连接着用户行为和机器性能. 而优化的最终意义，在于在这两者之间取得一个最佳的平衡点.对于图片资源的加载来说，更是如此. 今天我们就来简单说说，项目开发中常见的图片加载优化方式.预加载1.遮罩大法我们经常用jquery, jquery中$(function){})实际上是DOMContentLoaded事件完成的回调，只
业界 2016年07月07日

一个前端写的php博客系统2--前台展示+后台登录

部署的演示地址我的博客地址： http://www.weber.pub 可以查看到具体的站点展示github 地址：https://github.com/baiyuming/byblog前台首页展示首页的侧边预留的位置是给后面的统计，热门之类的版块预留位置。。。控制器文章列表展示要考虑到文章数量增多后分页展示，那么我们要统计文章数量，使用 count() 计算文章总数，然后
业界 2016年08月01日

你所不知道的 CSS - 居中

你所不知道的 CSS - 居中这次翻译一篇来自 Chris Coyier 的 《Centering in CSS: A Complete Guide》前言居中是在CSS中经常被抱怨的问题之一。这个问题真的有这么难吗？事实上这个问题并没有那么复杂，它困难在于对于不同的情景，解决居中问题需要用到不一样的方法。在这里，我们会一起建立思维导图来帮助大家来解决这个问题。github
业界 2016年08月01日
加载更多