DIV+CSS排版实用技巧 - html/css语言栏目：html.css - 关注热度:58

相信大家对DIV 43;CSS布局应该有所了解，那么你对DIV 43;CSS排版是否熟悉，这里和大家分享一些DIV 43;CSS排版技巧，主要包括设置背景属性，首行缩进，竖排文字等内容，希望对你的学习有..[详情]

WEB2.0标准教程：CSS入门 - html/css语言栏目：html. 关注热度:47

在了解XHTML代码规范后，我们就要进行CSS布局。首先先介绍一些CSS的入门知识。如果你已经很熟悉了，可以跳过这一节。CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样..[详情]

去除冗余 – 精简您的CSS样式代码 - html/css语言栏 关注热度:52

一、前面简短的唠叨我掂量了下，本文还是有些必要的。讲讲常见的一些没有必要使用CSS代码情况，而这些不起作用可以去掉的CSS代码可能是我们经常忽视的。越是对CSS理解不够，越容..[详情]

CSS reset的重新审视 – 避免样式重置 - html/css语言 关注热度:53

一、CSS reset（CSS重置）的历史根据淘宝射雕的叙述，最早的一份CSS reset来自Tantek 的undohtml css，很简单的代码，Tantek 根据自己的需要，对浏览器的默认样式进行了一些重置。其余一些有名..[详情]

CSS的样式合并与模块化 - html/css语言栏目：html. 关注热度:71

一、引言本文的核心观点为CSS的合并与模块化， 20284;乎与前一篇文章CSS样式的再分离有矛盾，其实不然，分离可以精简CSS代码，合并也可以精简CSS代码，一切都是权衡！或是说是在恰当..[详情]

纯CSS仿制Google女生节Doodle - html/css语言栏目：ht 关注热度:63

看到google今天的女生节Doodle，自己用纯css仿制一个，送给老妈、老婆、女儿。大家可以点这里在线观看效果，点这里下载收藏效果。实现原理1 利用checkbox侦听处理单击事件。2 单击按钮..[详情]

前端研究CSS之文字与特殊符号元素结合的浏览器 关注热度:78

页面布局里总是会有类似 文字 | 文字 的设计样式，不同的浏览器存在严重偏差。有兼容问题就要解决，下面总结了3种解决方案，分享给大家：一 系统默认的样式1 元素换行的段落复制..[详情]

CSS BOX 回顾 - html/css语言栏目：html.css - 自学php 关注热度:75

盗用一张图 少花点时间 做个思维导图,盒子的计算:不管是添加border,还是padding,margin ,只要不是单一方向参数的(单一只加一边) CSS BOX 实际大小 = 双倍增加参数 43; 原来的大小比如..[详情]

html元素双击事件触发机制猜想及疑惑 - html/css语 关注热度:57

1 !DOCTYPE html2 html3 head4 style type=text css5 div{position: absolute;top: 0;left: 0;height: 50px}6 back{background-color: blue;left: 20px;width: 2..[详情]

CSS常用代码 - html/css语言栏目：html.css - 自学php 关注热度:51

按字符换行style= word-break: break-all; 按词组换行style= word-wrap: break-word; =================================================================================================..[详情]

深入CSS属性(六)：margin - html/css语言栏目：html.c 关注热度:48

一、属性介绍margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。可取 20540;：auto 浏览器计算外边距。length 规定以具体单位计的外边距 20540;，比如像素、厘米等。默认 20540;是..[详情]

深入CSS属性(三)：line-height - html/css语言栏目：h 关注热度:76

一、line-height的定义line-height(行高)，相邻文本行基线间的距离。那什么是基线呢？对于文字Benjamin-xx工程师，来说基线（base line）并不是汉字文字的下端沿，而是英文字母x的下端沿。二..[详情]

css3实现立方体，并且自转效果 - html/css语言栏目 关注热度:81

http: jsfiddle net 8Tb6x 先是HTML 一个父div包含四个绝对定位的div 1 2 3 4 首先，一个静态的立方体 face:nth-child(1) { -webkit-transform: *rot..[详情]

CSS3 Media Queries 简介 - html/css语言栏目：html.css - 关注热度:48

原文链接: Introduction to CSS3 Media Queries原文日期: 2014年2月21日翻译日期: 2014年2月26日翻译人员: 铁锚简介随着移动设备的日益普及,web开发人员需要确保他们的网站在不同的设备上都能良好..[详情]

纯CSS实现倒计时动画 - html/css语言栏目：html.css 关注热度:43

OK，CSS3演武场今天继续，我们重点来看看css3 animation实现逐帧动画，额，按照惯例，看效果点这里，下载戳这里。实现原理a 外盒子div cell，一个字的宽和高，超过不显示，确保只能显示..[详情]

css3实现反转flip效果 - html/css语言栏目：html.css 关注热度:54

http: jsfiddle net ACNzD 先是html代码，很简单 1 2 css代码 card { width: 300px; height: 300px; position: relative;}figure {display:..[详情]

纯CSS实现3D翻牌效果 - html/css语言栏目：html.css 关注热度:49

CSS3演武场继续CSS案例研究，今天来看一个纯CSS实现的3D翻牌效果。简易效果请大家狠戳这里在线体验，或下载收藏。改进效果请大家戳这里在线体验，或下载收藏。html部分我们用flip类做..[详情]

CSS基础 - html/css语言栏目：html.css - 自学php 关注热度:73

1、引入CSS的四种方式行内样式、内嵌样式、链接样式、导入样式。2、CSS选择器基本选择器：标签选择器，ID选择器，类选择器，通用选择器。通用选择器：*{css代码}。通用选择器作用：..[详情]

纯CSS实现手风琴效果 - html/css语言栏目：html.css 关注热度:63

今天来看一个使用hover触发的一个手风琴效果，鼠标hover时改变图像宽度，配合transition实现动画，效果如下图所示。大家也可以到我的codepen在线编辑、下载收藏。感谢TheCodePlayer的图片和..[详情]

CSS案例 - html/css语言栏目：html.css - 自学php 关注热度:66

1 美团网效果复制代码!DOCTYPE HTML PUBLIC - W3C DTD HTML 4 01 Transitional ENhtml head meta http-equiv=content-type content=text html; charset=UTF-8 title美团 ti..[详情]

重温CSS：Border属性 - html/css语言栏目：html.css - 自 关注热度:53

边界是众所周知的，有什么新的东西吗？好吧，我敢打赌，在这篇文章中，有很多你不看永远不知道的东西！不仅可以用CSS3来创建圆角，使用原有CSS一样可以显示自定义图形。这是正确..[详情]

CSS3之Border-radius - html/css语言栏目：html.css - 自学 关注热度:70

1、属性介绍 border-radius：none|12 3px，取 20540;不可为负数，表示边框圆角 相关属性：border-top-right-radius , border-bo..[详情]

CSS3之box-shadow - html/css语言栏目：html.css - 自学p 关注热度:59

1、属性简介 box-shadow：颜色 20540;|inset|none|!important 2、浏览器兼容性（1）IE不兼容，IE9和IE10未知；（2）火狐3 5（包含3 5）以上兼容（3）Chrome 2 0 x 兼容（4）Opera不..[详情]

CSS3之background-origin - html/css语言栏目：html.css - 自 关注热度:48

1、属性简介 background-origin：border|content|padding|!important border：从border区域开始显示背景； content：从cont..[详情]

CSS注释 - html/css语言栏目：html.css - 自学php 关注热度:42

CSS注释1、 *注释内容* *-moz-background-origin:border;-webkit-background-origin:border;-moz-background-origin:content;-moz-background-origin:padding;-webkit-background-origin:padding;-..[详情]

重温CSS：Border属性 - html/css语言栏目：html.css - 自 关注热度:45

边界是众所周知的，有什么新的东西吗？好吧，我敢打赌，在这篇文章中，有很多你不看永远不知道的东西！不仅可以用CSS3来创建圆角，使用原有CSS一样可以显示自定义图形。这是正确..[详情]

原生CSS动画回调事件 - html/css语言栏目：html.css 关注热度:45

2014年对于我的web开发生涯来说有一个难以承认的事实,那就是传统的JavaScript 工具库几乎都快死了。许多年来我们一直依赖于工具类库进行开发,但现在 JavaScript 和 CSS 本身已经提供了绝大..[详情]

html转义字符本文 - html/css语言栏目：html.css - 自学 关注热度:36

本文与 tiankonguse 的博客里同步发表今天遇到了 html 字符转义的问题，于是记录一下。问题重现 在链接中，可以添加一个 title 字段，功能是对这个链接的描述。但是，这个 title 里的字符..[详情]

纯CSS实现3D折纸效果 - html/css语言栏目：html.css 关注热度:60

今天继续来看一个纯CSS实现的3D折纸效果，效果如下图。基于上一个效果《纯CSS实现图像3D悬停效果》而开发的，没有看过的童鞋欢迎移步。本效果原理如下图所示，分别用 img， img:bef..[详情]

纯CSS实现的Loading效果 - html/css语言栏目：html.cs 关注热度:45

纯CSS实现的Loading效果，CSS3试验场重点实验CSS3的动画属性。大家可以到我的codepen看看效果。效果下载链接文章下面。先来看看实现过程，先看html文件，div container为效果容器，里面有二..[详情]