随笔分类 - css
摘要：cus="true"的属性即可如下:或者可以使用js+css实现:1.在area中加入onfocus="blur(this);"的属性也可以2.area多的时候可以使用:
阅读全文
摘要：在一个典型的浮动中，如下面的图片所示：灰色矩形是外部容器，绿色容器在外部容器内向左浮动，未浮动的部分包围着浮动部分。但是IE6在解析这样的浮动时，会莫名的给靠紧浮动部分的未浮动部分添加3个像素的边距。为了更加直观，让我们将Firefox和IE6中的效果做一对比（上图是Firefox中的效果，下图是IE6中的效果）：你会清晰的观察到IE6中的3像素边距Bug。为了确定到底是不是3个像素，我在Photoshop将图片放大到1600%，如下面的截图所示，的确是3个像素。如何解决这个Bug？如果这个Bug不影响你的布局，你完全可以让它随风而去。但是，如果影响了布局或者你不能容忍一点点瑕疵的话，只需要将
阅读全文
摘要：当鼠标放置于某个文字链接之上，文字或文字背景改变为其他颜色或样式的效果是我们最经常见到的鼠标悬停效果。在CSS中，这个效果靠伪元素:hover来实现，只不过在文字链接中:hover被应用在了锚点元素上。实际上，在CSS2中，:hover伪元素可以应用于任何html元素上。比如，1P :hover{background-color:#F7F7F7;}这一CSS语句就可以改变鼠标悬停在一个段落文字之上的文字背景色。而在网页设计中，:hover伪元素一个常见用法的例子是突出列表中被选中的行，通常是改变它们的背景色，这样可以防止看走行。但是，遗憾的是，IE6及其以下版本不支持除锚点元素之外的其他htm
阅读全文
摘要：青枫, 2012/07/13 18:08 ,css样式设计,评论(0),阅读(2189), Via 本站原创大|中|小当一行文字超过DIV或者Table的宽度的时候，浏览器中默认是让它换行显示的，如果不想让他换行要怎么办呢？用CSS让文字在一行内显示不换行的方法一般的文字截断(适用于内联与块)：.text-overflow{display:block; /*内联对象需加*/width:31em;word-break:keep-all; /* 不换行 */white-space:nowrap;/* 不换行 */overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */text
阅读全文
摘要：//表头固定 2013.7.4 //相关页面需在最外层用包裹，//--- //// //---////////---// //---////function tablefixed() { $(".main_right").height($("#ifrmain").height()); if ($(".tableContainer .contable").height() > ($(window).height() - $(".tableContainer").prev("table").h
阅读全文
摘要：一个页面由两部分组成：DOM：描述该页面的结构render渲染：描述 DOM 节点 (nodes) 在页面上如何呈现repaint重绘：当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 render 重新描绘相应的元素, 此过程称为 repaint。reflow回流 : 如果该次变化涉及元素布局 (如 width), 浏览器则抛弃原有属性, 重新计算并把结果传递给 render 以重新描绘页面元素, 此过程称为 reflow。最近了解了下repaint和reflow的相关知识，觉得在页面重构过程中就应该考虑前端开发（js）人员对dom进行操作，能够减轻客户浏览器的鸭梨。在
阅读全文
摘要：1. hasLayout概念说明‘Layout’ 可以被某些 CSS property（特性）不可逆的触发，而某些 HTML 元素本身就具有 layout 。‘Layout’ 在 IE 中可以通过 hasLayout 属性来判断一个元素是否拥有 layout ，如 object.currentStyle.hasLayout 。‘Layout’ 是 IE 浏览器渲染引擎的一个内部组成部分。在 IE 浏览器中，一个元素要么自己对自身的内容进行组织和计算大小， 要么依赖于包含块来计算尺寸和组织内容。为了协调这两种方式的矛盾，渲染引擎采用了 ‘hasLayout’ 属性，属性值可以为 true 或 f
阅读全文
摘要：简介CSS 即层叠样式表（Cascading Stylesheet）。Web 开发中采用 CSS 技术，可以有效地控制页面的布局、字体、颜色、背景和其它效果。只需要一些简单的修改，就可以改变网页的外观和格式。CSS3 是 CSS 的升级版本，这套新标准提供了更加丰富且实用的规范，如：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等等，目前有很多浏览器已经相继支持这项升级的规范，如：Firefox、Chrome、Safari、Opera 等等。在 Web 开发中采用 CSS3 技术将会显著的美化我们的应用程序，提高用户体验，同时也能极大的提高程序的性能。本文将重点介绍一
阅读全文
摘要：对于一个从事网页设计（也常说成DIV+CSS）的朋友来说，可能会遇到过这样的问题，就是在CSS里像这样设置某对象的字体：font-family:1.5em/1.75,’黑体’,Arial; 结果有些时候不起作用，用Firebug来查看才发现浏览器解释这个代码的时候，出现乱码了，所以不起作用。那怎么解决这个乱码问题呢，由于CSS文件基本都是UTF-8的编码模式，所以我们可以把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。比如中文字体“宋体”经过Unicode编码后为“\5b8b\4f53″，在CSS中就可以这样写：font-famil
阅读全文
摘要：CSS3新增动画属性“@-webkit-keyframes”，从字面就可以看出其含义——关键帧，这与Flash中的含义一致。利用CSS3制作动画效果其原理与Flash一样，我们需要定义关键帧处的状态效果，由CSS3来驱动产生动画效果。下面讲解一下如何利用CSS3制作淡入淡出的动画效果。具体实例可参考刚进入本站时的淡入效果。1. 定义动画，名称为fadeIn@-webkit-keyframes fadeIn {0% {opacity: 0; /*初始状态 透明度为0*/}50% {opacity: 0; /*中间状态 透明度为0*/}100% {opacity: 1; /*结尾状态 透明度为1*
阅读全文
摘要：【教程】使用CSS3实现6个酷炫的图片文字切换效果发表于2012/11/13作者jaysming—2条评论导语CSS3的强大自不必言说，在过去，想要为图片实现简单的过渡效果需要敲上一大堆JavaScript代码。而如今，CSS3让这些都变得简单起来。代码下载与效果演示本教程中涉及的图片和文字的切换效果完全由CSS3所实现。（译注：这篇教程适用于有一定CSS基础的同学）浏览器兼容性文字的动态效果依赖于变形（transform）和过渡（transition）两个属性，这是CSS3相对较新的功能。为了顺利显示效果，要注意浏览器的兼容性。下列浏览器已支持CSS3的变形和过渡效果。Internet Ex
阅读全文
只有注册用户登录后才能阅读该文。
只有注册用户登录后才能阅读该文。
摘要：参数混入就像在CSS中有函数功能一样，这些对于那些在现在的CSS工作中多余的工作非常有用。最好和最有用的例子就是我们正在经历的从CSS2到CSS3过渡过程中的很多浏览器私有前缀。Nettuts+有一篇Jeffrey Way写的很赞的视频和文章，内容是包含着由有用的参数组成的文件，他们涵盖了大部分使用各个浏览器私有前缀的CSS3属性。例如，在他们的格式中，一个简单的处理圆角的mixin是这样的：.border-radius( @radius: 3px ) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-r
阅读全文
摘要：变量如果你是个开发者，变量应该是你最好的朋友。如果你要重复的使用一个信息(本例中就是color)，将它设置为一个变量就可以。这样，你就可以保证自己的一致性并可能减少滚动代码来查找颜色值、复制、粘贴等繁琐的工作了。你甚至可以加或者减一些你需要渲染的HEX值到这些颜色上面。看下例子：@blue: #00c; @light_blue: @blue + #333; @dark_blue: @blue - #333;如果我们将这些样式应用到3个div上面，我们就可以看到由加上和减掉的HEX值形成的渐变的效果：从@light_blue到@blue到@dark_blue的渐变效果关于变量在LESS和Sass
阅读全文
摘要：原文：LESS介绍以及与Sass的差异 译自：An Introduction To LESS, And Comparison To Sass 原作者：Jeremy Hixon 请尊重版权，转载请注明来源，多谢！自从一个月前我偶然发现LESS之后我就开始坚定的使用它了。CSS本身对我来说从来不是问题，但是我很好奇使用变量来沿着一个调色盘为我的网站或模板创建一些东西的想法。拥有一个提供固定数量选项可选的色盘可以让我避免颜色太跳跃以至于从一个已定的风格中脱离。事实证明，LESS——以及Sass——功能比这个要多太多。LESS和Sass在语法上有些共性，比如下面这些：混入(Mixins)——class
阅读全文
浙公网安备 33010602011771号