分类：CSS+DIV

2016
10-14

史上最强大的40多个纯CSS绘制的图形

今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形，里面有最简单的矩形、圆形和三角形，也有各种常见的多边形，甚至是阴阳太极和网站小图标，真的非常强大，分享给大家。Square(正方形)#square{width:100px;height:100px;background:red;}Rectangle(矩形)#rectangle{width:200px;height:100px;background:red;}Circle(圆形)#circle{width:100px;height:100p... 继续阅读 >
2016
10-05

使用CSS完成元素居中的七种方法

在网页上使HTML元素居中看似一件很简单的事情.至少在某些情况下是这样的，但是复杂的布局往往使一些解决方案不能很好的发挥作用。在网页布局中元素水平居中比元素垂直居中要简单不少，同时实现水平居中和垂直居中往往是最难的。现在是响应式设计的时代，我们很难确切的知道元素的准确高度和宽度，所以一些方案不大适用。据我所知,在CSS中至少有六种实现居中的方法。我将使用下面的HTML结构从简单到复杂开始讲解:<divclass=... 继续阅读 >
2016
09-29

必看谷歌 HTML/CSS 规范 HOT

背景这篇文章定义了HTML和CSS的格式和代码规范，旨在提高代码质量和协作效率。通用样式规范协议省略图片、样式、脚本以及其他媒体文件URL的协议部分（ http:,https: ），除非文件在两种协议下都不可用。这种方案称为protocol-relativeURL，好处是无论你是使用HTTPS还是HTTP访问页面，浏览器都会以相同的协议请求页面中的资源，同时可以节省一部分字节。<!--Notrecommended--><scriptsrc="https://w... 继续阅读 >
2016
09-16

有关css栅格系统的故事

说到栅格系统（gridsystem），你也许见过这样的概念：像这样，通过固定的格子结构，来进行布局设计。这是一种设计风格，而且一直以来很广泛地应用于网页设计领域。这样的风格清晰、工整，可以让网页具有更友好的浏览体验。而随着响应式设计（responsivedesign）的流行，栅格系统开始被赋予新的意义，那就是，一种响应式设计的实现方式。栅格与响应式响应式的要点是为同一个页面设计多种布局形态，分别适... 继续阅读 >
2016
09-10

20个编写现代CSS代码的建议

明白何谓MarginCollapse不同于其他很多属性，盒模型中垂直方向上的Margin会在相遇时发生崩塌，也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时，只有二者中的较大值会被保留下来，可以从下面这个简单的例子来学习:.square{width:80px;height:80px;}.red{background-color:#F44336;margin-bottom:40px;}.blue{background-color:#2196F3;margin-top:30px;}在上述例子中我们会发... 继续阅读 >
2016
09-10

调试 CSS 的方法

我经历过许多CSS代码的调试工作，有别人写的也有自己写的，有移动端平台的也有标准桌面浏览器的，从陈旧的IE到最新的基于Webkit的每日构建。经验告诉我，很多人并没有一个标准的CSS调试流程。我发现在大多数情况下，拥有专业的解决问题的方法，能够节省花在bug上的时间。下面是我总结的经验。我不保证这是最适合的调试CSS的方法，但是确实对我很有效。如何CSS不是你的主要编程语言，调试它可能就像暗黑艺术一样... 继续阅读 >
2016
08-22

试试这４个CSS动画解决方案和资源

随着移动设备的大量使用和CSS3兼容性在浏览器中的普及，越来越多的程序猿开始设计和使用基于CSS3的动画效果解决方案，但是自己编写基于CSS3的动画效果也是一件比较让人纠结的事情，为了快速的完成项目，大家也可以考虑使用一些现成的CSS3的动画效果库，今天这篇文章中，给大家介绍五款比较流行的CSS3类库和资源，希望大家能够喜欢~~Animate.cssanimate.css是我经常在项目中使用的动画效果类库，包含了很丰富的动画过... 继续阅读 >
2016
08-19

前端CSS一些小细节 HOT

英文原文：LearningtoLovetheBoringBitsofCSS未来的CSS太让人兴奋了：一方面，是全新的页面布局方式；另一方面，是酷炫的滤镜、颜色等视觉效果。这些CSS，受开发者追捧，被杂志和博客文章铺天盖地地介绍。如果说这些特性是CSS华丽的一面，那我们来看看它朴实的一面：很不起眼的东西，如选择器、单位、函数（方法）。我经常说这是繁琐的东西，但我意思是它们能干漂亮的活，这就是我要分享的。怎么说呢，让... 继续阅读 >
2016
08-01

扒一扒 CSS 语言的诞生史

实话说，在过去这一年，这已经成为我好心情的固定来源。即不断地告诉一波波想要像在TeX、MicrosoftWord等常见的文档处理工具中那样方便地控制HTML文档的样式的人们说——安全带系好，受伤别怪我：“很不好意思，你完蛋了！”——马克·安德森1994年在1991年，蒂姆·伯纳斯·李首次提出HTML的时候，并没有给页面添加样式的方法。给定的HTML该如何渲染决定... 继续阅读 >
2016
08-01

带你玩转css3的3D！

话不多说，先上demo酷炫css3走马灯/正方体动画：https://bupt-hjm.github.io/css3-3d/github源码地址：https://github.com/BUPT-HJM/css3-3d酷炫css3翻页动画：https://bupt-hjm.github.io/css3-flip-book/github源码地址：https://github.com/BUPT-HJM/css3-flip-book以上均纯css3实现，没有使用任何js代码，希望能得到大家的star啦~css3的3d起步要玩转css3的3d，就必须了解几个词汇，便... 继续阅读 >
2016
07-15

提高CSS技术技巧

前言在今天的文章中，我将要聊聊我在一年半的实践中，总结出来的css经验。首先让我提醒你，css是极其简单的一门语言，简单到可以用三个词概括：选择器，属性以及属性的值。这也是一些人不喜欢css的原因：他们觉得写css像孩子玩乐高玩具一样简单。是这样的。。如果你给一个9岁的孩子介绍css的基本原理，他就会搭建一个网站。不过这个网站不会很复杂，也就是一些包含头部，链接，内容图片的页面而已。事实上，css是一门简单的语... 继续阅读 >
2016
06-18

使用 <pre> 标签样式的注意事项

你可能正在使用<pre>标签。这是一个HTML中非常特别的标签，它允许其中的空格真正显示出来。例如：四个空格将真实显示成四个空格。这不同于其他标签通常的做法，其他标签会将之间的空白压缩成一个。从这一点来说，<pre>标签真的是很有用。你在<pre>标签中使用<code>标签吗？<pre>标签的“pre”的意思是“preformattedtext”（预格式化的文本），没有特别规定里面的文本是什么内容... 继续阅读 >
2016
06-18

用 CSS 隐藏页面元素的 5 种方法

用CSS隐藏页面元素有许多种方法。你可以将opacity设为0、将visibility设为hidden、将display设为none或者将position设为absolute然后将位置设到不可见区域。你有没有想过，为什么我们要有这么多技术来隐藏元素，而它们看起来都实现的是同样的效果？每一种方法实际上与其他方法之间都有一些细微的不同，这些不同决定了在一个特定的场合下使用哪一个方法。这篇教程将覆盖到那些你需要记住的细小不同点，让... 继续阅读 >
2016
04-24

CSS之父：Web事业未竞，尚需前赴后继

提到Web设计，很少有人的影响会超过HåkonWiumLie。在CERN与Web之父TimBerners-Lee一起工作的Lie，发明了CSS。如果没有那次大胆的提议，我们今天谈论的Web设计很可能是完全不同的一回事。正如Lie所说：“这个技术可能会被一家公司占有，比如法国电信，比如微软。很可能会掌控在私人手中。”“当时的Web还比较混乱，有不少乱七八糟的东西，但同时那也正是人性的反映。而且所有人都可以免费使... 继续阅读 >
2016
04-11

深入理解PHP对象注入

0x00背景php对象注入是一个非常常见的漏洞，这个类型的漏洞虽然有些难以利用，但仍旧非常危险，为了理解这个漏洞，请读者具备基础的php知识。0x01漏洞案例如果你觉得这是个渣渣洞，那么请看一眼这个列表，一些被审计狗挖到过该漏洞的系统，你可以发现都是一些耳熟能详的玩意（就国外来说）WordPress3.6.1Magento1.9.0.1Joomla3.0.3Ipboard3.3.5除此之外等等一堆系统，八成可能大概在这些还有其他的php程序中还有很... 继续阅读 >
2016
04-11

CSS Grid布局指南

简介CSSGrid布局（又名"网格"），是一个基于二维网格布局的系统，主要目的是改变我们基于网格设计的用户接口方式。如我们所知，CSS总是用于网页的样式设置，但它并没有起到很好的作用。刚开始的时候我们使用表格(table)，然后使用浮动(float)、定位(position)和内联块(inline-block)，但所有这些方法本质上来讲都是hacks，存留了很多需要实现的重要功能问题(例如，垂直居中)。虽然Flexbox可以起到一定的补救作用，但是它只可... 继续阅读 >
2015
12-20

30+有用的CSS代码片段

在一篇文章中收集所有的CSS代码片段几乎是不可能的事情，但是我们这里列出了一些相对于其他的更有用的代码片段，不要被这些代码的长度所吓到，因为它们都很容易实现，并且具有良好的文档。除了那些解决常见的恼人的问题外，也包含了一些解决新问题的新技术。1.垂直对齐如果你之前遇到过这个问题，你就应该知道它是多么的烦人，幸运的是，现在你可以使用CSS3变换来解决这个问题：.vc{position:relative;top... 继续阅读 >
2015
11-09

css设计中的不变与可变 推荐

“人活一世,有人成了面子,有人成了里子,都是时势使然。”——《一代宗师》如果重构分里子与面子的话，那么html应该是负责里子的，而css就是负责面子了。在上篇html结构的拆与合说了html之后，我们继续来说下css，这次我们从可变与不变的角度分析。一个面试题首先这是一个面试题，其次反正我是没做过这个面试题，最后忘了是哪个厂的面试题。具体的要求我忘了，大概的意思就是要这个内容在视窗内垂直方向居中，以图片为参考，文... 继续阅读 >
2015
09-30

使用字符串(STRINGS)设置样式 推荐

今年在墨尔本(澳大利亚)举办的CSSConf中，我有一个主题需要演讲——"StylingWithSTRINGS"。该讲座主要介绍的是在组件中如何使用Flexbox、currentColor和em，在浏览器中快速实现Web应用程序所需要的风格。特别提醒：原文提供了一个视频，不过需要翻。大家都懂的。这里归纳了几个要点：布局(Layout)当你创建一个移动应用的布局时，并不是整个页面滑动，而只是某些部分。比如说，页面的头部和脚部是固定的，只是中间的主内容区... 继续阅读 >
2015
09-30

CSS中你不知道的小技巧 推荐

CSS中的级联(cascade)在同一时间可谓是幸福的，也可以说是痛苦不堪的。通常能工作得非常好，但有问题的时候，也让人们都很激动，甚至事件中也离开不CSS。我们所涉及的不仅是CSS的级联也还涉及到CSS的权重。不是说碰到特殊问题才显得困难，可以说CSS的困难无处不在。在这篇文章中，我将通过一些示例来向大家展示一些CSS的小技巧，让你知道如何使用CSS的级联能变得更友好，也减少一些不必要的需求，从而也减少权重上遇到的麻烦。... 继续阅读 >
2015
09-02

推荐 10 个超棒的 CSS3 代码生成工具

新的在线工具和WebApp帮助开发者快速地创建网站而不用写代码。前端开发已经在框架和代码库方面有了很大的进展。但是许多开发者已经忘记了代码生成器在构建网站时的价值。下面的资源是完全免费的WebApp，这些WebApp能够为模板，渐变，甚至浏览器属性的前缀生成CSS3代码。如果你是前端开发者，这些资源可以帮助你节省很多时间，并可以为以后的项目提供可复用的源码。1.CSS3GeneratorCSS3Generator是... 继续阅读 >