CSS
文章平均质量分 90
农村的我
To the world you are the one ,but to me you are the whole world.
展开
-
经典二十个CSS技巧
1. CSS字体属性简写规则一般用CSS设定字体属性是这样做的:font-weight: bold;font-style: italic;font-varient: small-caps;font-size: 1em;line-height: 1.5em;font-family: verdana,sans-serif但也可以把它们全部写到一行上去:转载 2012-09-10 09:25:01 · 1157 阅读 · 0 评论 -
完美解决CSS网页水平居中
同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋,下面让我们先来看一下CSS中常见的几种让元素水平居中显示的方法。 CSS常见的让元素水平居中显示方法 用CSS让元素居中显示并不是件很简单的事情—同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋。让我们先来看一下CSS中常见的几种让元素水平居中显示的方法。 1.使用自动外边距实现居中 CS转载 2012-10-23 09:32:37 · 913 阅读 · 0 评论 -
我知道你不知道的负Margin
原文转自:http://www.hicss.net/i-know-you-do-not-know-the-negative-margin/现如今,负margin技术的应用可谓越来越广,任一个大型站点惊鸿一瞥之下都会有其身影所在。个人认为负margin技术是学习css路上必不可缺少的课题之一,许多高级应用及疑难杂症修复都可以使用负margin技术进行实现。负margin理论:在说明什么是转载 2012-09-19 17:10:43 · 985 阅读 · 0 评论 -
overflow知多少
最近在研究OOCSS,当打开template.css阅读第一行时,震惊了,第一眼居然没看懂。。。。。。以下就是OOCSS下的template.css第一行代码:12.body{overflow:hidden;_overflow:visible; _zoom:1;}.main{overflow:hidden;_overflow:visi转载 2012-10-24 17:53:34 · 867 阅读 · 0 评论 -
拿什么来拯救你,我的table
原文转自:http://www.hicss.net/how-to-save-you-my-table/table曾经在网页开发中占据着举重若轻的地位——布局,即使到了Web2.0我们依旧可以看到其布局的身影。然而技术是不断进步的Div+Css组合方式终究敲开了老式布局的大门刮起了新的一轮布局浪潮。之后而来的就是新仇旧恨,许许多多无论是对table有意见亦或没意见的人也开始了对table笔诛口伐转载 2012-09-19 17:20:08 · 691 阅读 · 0 评论 -
CSS模式之三权分立
原文转自:http://www.hicss.net/separation-of-powers-model-in-css-design-patterns/ 市面上我们常常会看到各种各样的设计模式书籍,Java设计模式、C#设计模式、Ruby设计模式等等。在众多的语言设计模式中我唯独找不到关于CSS设计模式的资料,即使在网上找到类似内容,细细一看之下才发觉是南辕北辙。经过浩瀚文章搜索发掘下依旧转载 2012-09-14 13:45:33 · 716 阅读 · 0 评论 -
用Margin还是用Padding
原文转自:http://www.hicss.net/use-margin-or-padding/ 用margin还是用padding这个问题是每个学习CSS进阶时的必经之路。CSS边距属性定义元素周围的空间。通过使用单独的属性,可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School边界(margin):元素周围生成额外的空白区。“转载 2012-09-14 11:21:25 · 487 阅读 · 0 评论 -
css之z-index探讨
CSS教程:彻底掌握Z-index属性大多数的CSS属性都很容易使用。常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现。而另一些CSS属性,却会有一些复杂,且只能在给定的环境下才会工作。Z-index属性便属于上面所说的后面的那一组。Z-index无疑的比其他任何属性都会频繁的导致(兼容性)上的混乱和(开发者心理上)的挫败感。但滑稽的是,一旦转载 2012-11-13 08:41:01 · 616 阅读 · 0 评论 -
网页颜色搭配技巧 文字字体、字号、字体排版等
对于做网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景,但是,浏览一下大型的商业网站,你会发现他们更多运用的是白色、蓝色、黄色等,使得网页显得典雅,大方和温馨。更重要的是,这样可以大大加快浏览者打开网页的速度。一般来说,网页的背景色应该柔和一些、素一些、淡一些,再配上深色的文字,使人看起来自然、舒畅。而为了追求醒目的视觉效果,可以为标题使用较深的颜 色。下面是我做网页和浏览别人转载 2012-12-14 16:59:11 · 3048 阅读 · 0 评论 -
网页设计师必备的10个CSS技巧
CSS是网页设计师的基础,对CSS的了解能使他们能够设计出更加美观别致的网页。使用CSS技巧来巧妙地处理CSS是非常令设计师着迷的事情。在CSS的深海世界里有很多有意思的东西,你只需要找到最适合你的就好。当然我们不可能一下子就记住所有CSS的规则和语法,但为了以后的发展我们还是应该记住那些非常有用的CSS技巧。今天我们精心准备了10条对网页设计师最有用的CSS技巧,如果你想设计出独一无二脱颖而出的转载 2013-02-07 13:37:37 · 838 阅读 · 0 评论 -
CSS透明属性详解
透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码:.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;}上面的几个属性分别是:opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持fi转载 2013-03-09 16:28:06 · 764 阅读 · 0 评论 -
解决 IE6 position:fixed 固定定位问题
就像你所遇到的问题一样, IE6 有太多的 bug 让制作网页的人头疼。这篇文章介绍的是介绍我的如何解决 IE6 不支持 position:fixed; 属性的办法。关于 position:fixed; 属性生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。转载 2013-03-12 14:11:59 · 843 阅读 · 0 评论 -
css行高line-height的深入理解及应用
一、前言前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”(http://isd.tencent.com/?p=1503),是个不错的文章,学到了不少东西,建议您看看。这里,我也要讲讲我对line-height的一些理解,所讲解的东西绝大多数与上面提到的“深入理解css 行高”是不重复的,可以说是补充或是另外一个角度的思考。另外,将结合实际,展示line-height的转载 2012-10-22 09:12:28 · 3068 阅读 · 0 评论 -
大小不固定的图片、多行文字的水平垂直居中
本文地址:http://www.zhangxinxu.com/wordpress/?p=61本文综述想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示。关于图片垂直居中显示,想必很多写css的人都研究过,或者说是搜寻过方法。淘宝团队似乎提供了一种不错的方法,用fon转载 2012-10-22 09:09:28 · 1757 阅读 · 0 评论 -
PX PT及EM
字体大小的设置单位,常用的有2种:px、pt。这两个有什么区别呢?先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点;pt就是point,是印刷行业常用单位,等于1/72英寸。这样很明白,px是一个点,它不是自然界的长度单位,谁能说出一个“点”有多长多大么?可以画的很小,也可以很大。如果点很小,那画面就清晰,我们称它为“分辨率高”,反之,就是“分辨率转载 2012-09-10 13:33:25 · 2072 阅读 · 0 评论 -
CSS技巧杂谈
1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行 2. margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上displa转载 2012-09-10 10:10:07 · 1445 阅读 · 0 评论 -
不要告诉我你懂margin
你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素、内联元素中的区别?什么时候该用padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?……写css,你少不了与margin打交道,而对于这个平时我们最常用的css属性我们并非十分了解。介于此我打算写转载 2012-09-14 13:08:07 · 602 阅读 · 0 评论 -
CSS: dl,dt,dd,ul,li,ol区别及应用
ul: unordered lists ol: ordered lists li: Listsol 有序列表:………………表现为:1……2……3……ul 无序列表,表现为li前面是大圆点而不是123:…………很多人容易忽略 dl dt dd的用法:dl 内容块dt 内容块的标题dd 内容可以这么写:转载 2012-09-13 09:55:49 · 2519 阅读 · 0 评论 -
CSS块级元素、内联元素概念
CSS文档流与块级元素(block)、内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面。看过O'Reilly的《CSS权威指南》,发现里面提到的文档流概念让我很敏感。 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提。但我觉得,这个概念实在太重要了。理解了它,一堆CSS布局的理论都变得易于理解,并且体会到CSS转载 2012-09-12 10:27:47 · 1242 阅读 · 0 评论 -
Html中CSS之去除li前面的小黑点,和ul、LI部分属性方法
对于很多人用div来做网站时,总会用到,但在显示效果时前面总是会有一个小黑点,这个令很多人头痛,但又找不到要源,其它我们可以用以下方法来清除。1、在CSS中写入代码。找到相关性的CSS,在。.li和.ul下写入list-sytle:none;当然有的会这样来写list-style-type:none, 这种写法特别是在一些CMS中最常见。2、在相关的页面找到head部分写入下面的代码转载 2012-09-13 09:44:28 · 469474 阅读 · 1 评论 -
CSS 中 position:absolute 与 z-index 对层次结构影响
1. 不使用 position 这种情况下每一层都遵循 HTML 定位规则,其中的 left,right,top,bottom 定位信息对其无效,z-index 也不会发挥作用因为没有层叠的情况出现.2. 使用 absolute 如两个绝对定位对象的 z-index 属性具有同样的值,那么将依据它们在HTML文档中声明的顺序层叠.2.1 未使用 z-in转载 2012-09-14 10:05:07 · 1247 阅读 · 0 评论 -
CSS中不为人知Zoom属性的使用介绍(IE私有属性)
点评:这里我们介绍一下CSS中的Zoom属性,这个属性一般不为人知,甚至有些CSS手册中都查询不到。实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等。Zoom的使用方法: zoom : normal | number no转载 2012-09-18 09:40:08 · 1315 阅读 · 0 评论 -
CSS 定位 (Positioning)浅析
position的四个属性值: relative 相对定位absolute 绝对定位fixed 固定定位static 静态定位下面分别讲述这四个属性。 sub1 sub21. relativerelative属性相对比较简单,我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中,sub1和sub2是同转载 2012-09-18 14:47:41 · 616 阅读 · 0 评论 -
技术分享 IE6不支持min-height的解决办法
本文和大家重点讨论一下IE6不支持min-height的解决办法,这里主要包括两种解决方案,相信本文介绍一定会让你有所收获。IE6不支持min-height的解决办法最小高度min-height是很有用的,但IE6却不支持。真烦人。有没有办法呢?第一种方法:我们可以利用IE6不识别!important来实现: height:auto!important; heig转载 2012-10-15 11:14:08 · 828 阅读 · 0 评论 -
CSS 颜色代码大全
CSS颜色代码大全 FFFFFF#DDDDDD#AAAAAA#888888#666666#444444#000000#FFB7DD#FF88C2#FF44AA #FF0088 #C10066 #A20055 #8C0044 #FFCCCC#FF8888#FF3333 #FF转载 2012-09-26 15:33:30 · 1292 阅读 · 0 评论 -
Web开发者不容错过的20段CSS代码【Mark】
摘要:共享已成为互联网的一种主流,尤其是分享一些非常实用的技术,本文收集了20段非常专业的CSS 2/CSS 3代码片段给大家,你可以把它们保存在IDE里、或者存储在CSS文档里,这些代码片段绝对会给你带来意外的惊喜。Web开发技术每年都在革新,浏览器已逐渐支持CSS3特性,并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。但仍然有一些开发者迷恋着一些CSS2代码。本转载 2013-05-27 15:29:41 · 1694 阅读 · 0 评论