zccst的专栏

1，处理圆角(1) webkit(2) moz 火狐border-radius : 20px;-webkit-border-radius : 20px;-moz-border-radius : 20px;2，文本阴影 text-shodawtext-shadow: x-offset y-offset blur color;例：text-shadow...

作者：zccst[b][size=large]让一个div水平、垂直居中[/size][/b]一、流式布局两个要点：1，在link中加入media2，把精确的像素改为百分比，并使用box-sizing:border-box。盒模型以border为准。解决流式布局中两个水平盒子各分50%的宽度二、在页面布局中小的点在上面...

作者：zccstCSS3是一个包含多方面的知识，主要分两大类，一类是在css2基层上改进的，另一类是完全新增的批注：这里只是提纲，具体知识点可参考：[url]http://zccst.iteye.com/blog/2192532[/url]首先是媒体查询，这个是入口@media screen and (min-width:400px)[b][size=l...

作者：zccst[b]animation , keyframes[/b].rotate { -webkit-transform-style: preserve-3d;/*保留被转换的子元素3d属性*/ -webkit-animation-name: refreshing; -webkit-animation-duration: 0.7s; -w...

作者：zccst平常相对熟悉的也就RGB色了，其他基本不清楚，即使是RGB也没弄清楚他们的变化规律。所以有必要专门用一篇文字来记录了。[b]RGB[/b][b]HSLA[/b]HSL色彩模式是工业界的一种颜色标准，是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，HSL即是代表色调，饱和度，亮度三...

作者：zccst[b]对‘display’，‘position’和‘float’之间关系的定义[/b]英文原文：[url]http://dbaron.org/css/test/sec0907[/url]影响框的生成和布局的三个属性——'display'，'position'和'float'——间的相互关系如下：1，如果'display'设置为'none'，用户端必须忽略掉'po...

使用的属性如下：同理：

作者：zccst以前loading都是一张图片，显示或隐藏。现在如果考虑移动端弱网到连图片也载入不成功，此时css3的loading就非常有用了，而且模拟了图片效果，节省空间。基本原理：1，外部一个span，固定宽高（正方形），行内块元素，相对定位，垂直对齐。2，内部12个span，相对宽高（相对外部），行内块元素，绝对定位(top,left)，颜色，背景色，动画（最重...

作者：zccst[b][size=large]3，position布局[/size][/b]#wrap { position:relative; }//相当于父元素的左上角进行定位#left { position:absolute; top:0px; left:0px; width:120px; }#middle {margin:20px 190px 20px 190p...

作者：zccst见了很多web-kit打头的css属性，但是由于这些属性比较新，不知道是什么意思，特此收集记录。很多-web-kit打头的css，还有-moz-, -o, -ms-等，但是也不是所有的都已经成为标准，所以有些情况只能写webkit。2015-05-06[b]-webkit-margin-collapse[/b]-webkit-margin...

作者：zccst[size=large][b]一、静态时间轴，仅css即可[/b][/size]HTML结构使用：ul，li。原理结构如下：1，竖轴竖轴如果使用图片，则在ul用背景竖轴如果使用css，则用ul:before写样式2，左侧时间绝对定位 left: 03，中间圆球绝对定位 left: 20%4，右侧文字不浮动 ma...

作者：zccst[size=large][b]一、单行溢出[/b][/size]1，固定宽度（非常容易）text-overflow: ellipsis;2，不固定宽度思路：想让这个区域成为块元素，然后不换行，溢出隐藏。display: block;white-space: nowrap: #设置如何处理元素内的空白。text-overflow: ellip...

作者：zccst 1，CSS/style/print.css文件 .noprint{display:none;} 在testPrint.html中使用print.css中的样式，在网页浏览的时候是看不出效果的，但是打印的时候会起作用，如下面这一段，加上noprint之后，在浏览器中仍然是现实的，但是打印的时候不显示： ...

[b]CSS基础（一）[/b]1，CSS引入的三种方式及优先级外部引用 < 页内引用 < 行内引用现在编程提倡方式：是外部引用方式。原因是可以高效，不同浏览器兼容。2，选择器（1）标签选择器单个标签多个标签父子标签（2）类选择器公共属性设置（3）ID选择器唯一属性设置3，CSS控制的内容backgroud ...

有了前面的CSS基础，如何写成漂亮的CSS代码呢？两种方式：一、自己通过复杂的实现建议图书《zen of css》（CSS之禅）二、使用模板[b]CSS模板[/b]收集网站：...

作者：zccstbackground-position属性是通过平面上的x与y坐标定位的,所以通常取两个值.必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响。默认值为： 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。如果只指定了一个值，该值将用于横...

作者：zccst在每一个领域都会诞生很多优秀的专业网站，详细地记录该领域的知识。而这些记录都比我在遇到一个具体的问题时学会的知识点系统很多。于是最好的方法是收藏起来，方便参考的时候更加系统。1，梦之都批注：好像HTML、CSS和Javascript都有http://www.dreamdu.com/css/...

作者：zccst虽然CSS代码颜色有RGB组成，看似简单，但是一直没找到其中明显的变换规律。反正都是用一些比较笨的办法在做。由于需求频繁，于是想到是否有前人的总结。现收集如下：1，CSS颜色代码大全地址：http://hi.baidu.com/%CD%E6%B5%C4%BE%CD%CA%C7%B4%B4%D2%E2/blog/item/d6709f46d26b5...

zccst转载原地址：http://www.jileiba.com随着 3G 的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在 600 像素以下；PC 的屏幕宽度，一般都在 1000 像素以上（目前主流宽度是 1366×768）...

作者：zccst1，图片与文字垂直对齐办法一、设置块元素高度，再设置图片垂直居中（vertical-align:middle）。

作者：zccst[b]情形二：外层div高度自适应，内部还有div正文。直接使用height:auto无效[/b]即： 左侧内容 右侧内容 [color=red][/color][b]情形一：[/b]How To Clear Floats Without Structural Markup.clearfix:after {...

作者：zccst2015-3-18除了常规的三角形外，还可以画出更复杂的三角箭头，倾斜箭头。但是前提是必须是单一背景色，没法做到透明。如果想让该箭头在任何场景，还需要使用png图片。参考：张鑫旭博客图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性，所以在你打开这篇文章的时候，我希望你用的...

作者：zccst2015-06-19今天这个问题上又踩坑了。说的没错，.className{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}外部结构如下是就失效了：（移动端） 范冰冰摔倒李晨"英雄救美" 事后大呼:吓死牛了(图) 5分钟前 齐鲁网星闻动态 ...

作者：zccst总结了一下，只要在CSS中定义了如下句子，可保网页不会再被撑开了。table{table-layout: fixed;}td{word-break: break-all; word-wrap:break-word;}//（1）word-break设置强行换行 break-all强制英文单词断行//（2）break-word;内容将在边界内换行。如果需要...