stylesheet
关注
分享
扫一扫
deng131
这个作者很懒，什么都没留下…
展开
-
HTML5标签介绍与使用
转自：http://www.cnblogs.com/weishuai/archive/2010/07/24/1784348.htmlHTML5 规范包括一系列新的语义元素，用于提供 Web 页面的各个区域或部分的意义，例如页眉、页脚、导航等等。在以前版本的 HTML 中，通常使用 元素来创建这些部分，使用 ID 或 类属性来区分它们。这样做的问题是这没有任何语义意义，因为没有定义严格的规...原创 2010-08-02 12:51:08 · 136 阅读 · 0 评论 -
IE6 png背景透明问题
相信在前端开发中大家都会遇到浏览器的兼容性问题,这个问题网上有很多种解决方法，在此记录下我在开发中也遇到问题。[color=blue]问题原因：具有透明背景的png格式图片在IE6中却不是背景透明的，透明背景部分会显示出#DBEAED的淡灰色，表现效果很糟糕，为了使用透明背景图片只有采用gif格式了，但是gif格式会出现明显的锯齿效果。办法就是使用IE Microsoft.AlphaImage...原创 2010-10-01 11:35:24 · 127 阅读 · 0 评论 -
ie6下实现position：fixed效果
由于IE下position：fixed无效，所以需要寻找一种合适的方法及实现的原理，记录下。参考：[url]http://ljj284860475.blog.163.com/blog/static/81423862009102713414312/[/url][url]http://www.jb51.net/css/32163.html[/url][url]http://www....原创 2011-05-23 17:31:21 · 139 阅读 · 0 评论 -
IE6,IE7下设置透明度opacity问题
在前端开发中经常被问到IE下这个bug问题：ie6下是因为haslayout的原因，为了触发[color=red]haslayout[/color]属性，更简单的办法就是它设置[color=red]zoom:1;[/color]即可，而且没有任何副作用。[code="java"].opacity{opacity:0.3;filter:alpha(opacity:40);zoom:1...原创 2011-05-24 09:55:29 · 326 阅读 · 0 评论 -
IE6下png格式图片透明问题
[code="java"].png{ background: url(http://www.xxx.com/images/x.png) no-repeat; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="http://www.xxx.com...原创 2011-05-24 10:26:50 · 200 阅读 · 0 评论 -
<div>页面居中显示
以前在面试中就遇到过这个问题。借用别人的解释。以下为让div显示在浏览器正中间的样式[code="java"] #centerdiv { position:absolute; top:50%; left:50%; margin:-150px 0 0 -100px; width:300px; height:200px;...原创 2010-10-17 08:58:39 · 152 阅读 · 0 评论 -
<img/>垂直居中方法
以前面试中遇到相似问题。“纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”题目的难点在于两点：垂直居中；图片是个置换元素，有些特殊的特性。至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法：[code="java"] .box { /*非IE的主流浏览器识别的垂直居中的方法*/ d...原创 2010-10-17 09:47:46 · 223 阅读 · 0 评论 -
CSS中border实现三角效果
一直关注js比较多，对css不是很熟，作为前端开发工程师而言这是不平衡和不合格的。当面试时或者时同行问道如何实现这个效果时候就萌到了，虽然也在各个博客上看到过实现文章但是一直没有自己去实践和理解其实现原理。[code="java"].clip{ border-style: solid dashed dashed; border-color: #red trans...原创 2011-05-27 21:52:18 · 118 阅读 · 0 评论 -
CSS中border实现圆角效果
重要的是其实现的原理，明白原理后就可以自由的发挥你的想象了，不用多说，直接上代码：[code="java"].clip-top{ border-style: dashed dashed solid dashed; border-color: transparent transparent red transparent ; border-width: ...原创 2011-05-27 22:42:35 · 341 阅读 · 0 评论 -
@font-face网页嵌入字体
字体使用是网页设计中不可或缺的一部分。在网页中使用某一特定字体,通过CSS的@font-face属性来实现在网页中嵌入任意字体。字体声明：@font-face {font-family: 'fontNameRegular';src: url('fontName.eot');src: local('fontName Regular'), local('fontName'),...原创 2011-02-10 10:47:04 · 191 阅读 · 0 评论 -
div,span标签title属性
[color=red]div,span标签title属性：规定元素的额外信息（可在工具提示中显示）[/color]鼠标放在这个层上面的时候会出现一个提示那就是你title的内容.类似于img的alt 。今天在实现查看图片左右区域显示上一张，下一张效果时候使用到该功能，平时很少用到，原来可以使用div或者span的title属性实现鼠标放在这个层上面的时候会出现提示信息。参考...原创 2011-06-07 21:59:07 · 8550 阅读 · 0 评论 -
CSS中ime-mode控制输入法选择
上图更好说明如何使用应用场景[img]http://pic002.cnblogs.com/images/2011/209156/2011021210473178.jpg[/img]ime-mode：语法：ime-mode : auto | active | inactive | disabled取值：auto : 默认值。不影响IME的状态。与不指定 ime-m...原创 2011-02-12 11:41:57 · 295 阅读 · 0 评论 -
IE中css属性writing-mode使用
在项目中遇到这个属性的用法设置文本的垂直显示，但是只能在ie中使用，在其他浏览器中没有很好的替代方法。语法： writing-mode : lr-tb | tb-rl 参数： lr-tb : 左-右，上-下tb-rl : 上-下，右-左 说明： 设置或检索对象的内容块固有的书写方向。西方语言是左-右，上-下的书写方式。但亚洲语言常有上-下，右-...原创 2011-09-22 21:03:23 · 786 阅读 · 0 评论 -
javascript获取元素CSS样式值
IE:element.currentStylecurrentStyle 对象返回了元素上的样式表，但是 style 对象只返回通过 style 标签属性应用到元素的内嵌样式。因此，通过 currentStyle 对象获取的样式值可能与通过 style 对象获取的样式值不同。例如，如果段落的 color 属性值通过链接或嵌入样式表设置为红色( red )，而不是内嵌的话，对象.curre...原创 2011-06-18 14:36:13 · 214 阅读 · 0 评论 -
前端使用CSS浮动16条规则
好久没来写东西了，今天补充下css方面。先要理清的是为什么要清除浮动：[color=red]在使用float后父容器（没有设置height情况时）并没有包裹住这两个层，我们只能说，父容器不知道这两个层的高度，从而使得这两个层溢出了父容器，脱离了文档流，这也就是我们为什么要在浮动之后，让父容器识别出内部元素的高度，要清除浮动的原因。[/color][quote]1.浮动元素会从文档正...原创 2012-06-18 09:40:56 · 180 阅读 · 0 评论 -
浏览器兼容 CSS Hack方法
[img]http://tid.tenpay.com/wp-content/uploads/2011/08/ie.png[/img] .element{ color:#000; /*w3c标准*/ [;color:#f00;]; /*Webkit(chrome和safari)*/ color:#666\...2012-03-01 23:11:26 · 133 阅读 · 0 评论 -
几种 css hack 方法
第一种：!important方式.DIV{ background:orange;/*ff*/ *background:green!important;/*IE7*/ *background:blue;/*IE6*/ } 第二种：样式属性前缀式.DIV{ margin:10px;/*ff*/ *margin:15px;/*IE7*/ _ma...原创 2012-10-31 22:38:09 · 248 阅读 · 0 评论 -
CSS鼠标指针cursor属性
大家都知道常用的鼠标指针样式：[code="java"] * auto: 正常鼠标 * crosshair: 十字鼠标 * default: 默认鼠标 * pointer: 点状鼠标 * move: 移动鼠标 * e-resize:改变大小 * text: 文字鼠标 * wait: 等待鼠标 ...2010-09-27 21:47:34 · 202 阅读 · 0 评论 -
清除float浮动三种方法
1：使用空标签清除浮动。我用了很久的一种方法，空标签可以是div标签，也可以是P标签。我习惯用，够简短，也有很多人用，只是需要另外为其清除边框，但理论上可以是任何标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动，并为其定义CSS代码：clear:both。此方法的弊端在于增加了无意义的结构元素。[code="java"]LeftRig...原创 2010-09-22 13:09:48 · 166 阅读 · 0 评论 -
CSS中<a>标签伪类顺序
[code="java"]a:link{color:black;}a:visited{color:blue;}a:hover{color:red;}a:active{color:green;} content [/code][color=blue]根据CSS就近原则，从底往向上顺序查找，一直找到满足条件的定义为止。[/color]A标签的4个伪类：[tabl...原创 2010-09-15 20:34:04 · 194 阅读 · 0 评论 -
IE中hasLayout属性布局问题
IE中 Internet Explorer for Windows的私有概念，有很多奇怪的渲染问题可以通过赋予其”layout”得到解决。John Gallant 和 Holly Bergevin 把这些问题归类为”尺寸臭虫(dimensional bugs)”，意思是这些臭虫可以通过赋予相应元素某个宽度或高度解决。元素是否具有”layout”可能会引发如下的一些问题：[color...原创 2010-12-13 12:11:13 · 120 阅读 · 0 评论 -
css中filter滤波器属性及语句
滤镜说明： Alpha：设置透明层次. blur：创建高速度移动效果，即模糊效果. Chroma：制作专用颜色透明. DropShadow：创建对象的固定影子. FlipH：创建水平镜像图片. FlipV：创建垂直镜像图片. glow：加光辉在附近对象的边外. gray：把图片灰度化. invert：反色. light：创建光源在对象上....原创 2010-05-20 15:18:37 · 163 阅读 · 0 评论 -
必须知道10个不常用HTML标签
网页开发人员常常希望能够了解并掌握多种语言，结果是，学习一门语言的所有内容是棘手的，但是却很容易发现你并没有完全利用那些比较特殊却很有用的标签。不幸的是我们到现在还没有涉足的那些比较不知名的HTML标记所有潜力。但它永远不会太晚重新进入领域，并开始编写代码来发掘这些未开发的标签的能量。这里是10个未被充分利用或被误解的HTML标签。或许它们不太广为人知，但是在特定情况下他们却非常有...原创 2010-05-22 14:33:51 · 181 阅读 · 0 评论 -
什么是微格式及实例
首先，请不要一厢情愿地把微格式（Microformat）理解为某种语言的简化，这是完全错误的字面理解，事实完全相反，从经典个例“hCard微格式”看出，它是把XHTML语言在Web中的应用“冗余”话了。当然初识它的人都难免会犯类似错误。什么是微格式呢？它存在的意义又是什么？本文或许会让你对Microformat有所了解，并对其蕴含的巨大潜力及广泛用途折服。什么是微格式微格式：建立在已有...原创 2010-05-22 14:46:37 · 516 阅读 · 0 评论 -
浏览器中META标签使用
转自：http://www.css88.com/archives/category/xhtmlcss/page/14META标签，是HTML语言head区的一个辅助性标签。在几乎所有的page里，我们都可以看到类似下面这段html代码：———————————————–———————————————–这就是meta标签的典型运用。meta标签有多少参数，有什么...原创 2010-05-23 22:06:58 · 259 阅读 · 0 评论 -
XHTML与HTML的差别
1.XHTML是一种XML应用XHTML是一种XML的应用，这说明不能省略结束标签、必须转移特殊字符以及属性包含值并用引号括。当然还有许多不同之处，但简单规则总结为，XHTML必须是完整良好的XML文档。最好选择一种XML编辑器。会告知用户文档是否定义良好，这通常是在用户输入时突出错误显示实现的。2。空元素在HTML中使用空元素，有事只需使用一个起始标签，如 1...原创 2010-05-23 22:12:38 · 95 阅读 · 0 评论 -
CSS属性书写顺序及命名规则
传说中的Mozilla推荐[code="java"]/* mozilla.org Base Styles * maintained by fantasai *//* Suggested order: * display * list-style * position * float * clear * width * height * margi...原创 2010-05-28 10:16:02 · 203 阅读 · 0 评论 -
960 Grid System 基本原理及使用方法
转自：http://blog.bingo929.com/960-css-framework-learn-the-basics.html[img]http://blog.bingo929.com/wp-content/uploads/2009/01/960-grid-system-092.jpg[/img]由于一些读者对于960 Grid System CSS Framework的原...原创 2010-05-31 19:59:38 · 110 阅读 · 0 评论 -
HTML 块级元素/内联元素
块级元素的分类块级元素按照其应用于结构还是内容分为三种：结构化块状元素，终端块状元素，多目标块状元素。一.结构化块状元素这类元素用于构造文档的结构，一个好的文档结构对于搜索引擎和应用其他技术（如JavaScript）都是十分有利的。它们没有语义上的含义，仅仅划分出了文档的组织方式，并没有体现文档的内容。主要的结构化块状元素 * * ...原创 2010-08-21 14:10:18 · 115 阅读 · 0 评论 -
HTM中ID和Name属性区别
面试中问到了这个问题，name主要在表单中的元素提交的时候必须设置，不设置name在服务器端将不能取得到表单元素的值，name是可以重名，在radio表单元素中就必须设置为同一个name，id属性只要是用来设置某个原始的唯一标示，在一个页面中是不允许出现同样的id属性值。总结：同一页面ID必须唯一，不可以重复，而Name是可以重复。参考：[url]http://hi.baidu...原创 2010-08-21 14:19:40 · 234 阅读 · 0 评论 -
CSS中盒子模型position定位
盒子模型定位：相对定位：[img]http://www.it86.cc/uploads/allimg/080410/120NA25D40T120.jpg[/img]绝对定位：[img]http://www.it86.cc/uploads/allimg/080410/120NA25F60b2O.jpg[/img]相对定位 + 绝对定位：[img]http://hi...原创 2010-08-26 11:16:08 · 187 阅读 · 0 评论 -
CSS中float属性使用方法
页面设计中经常使用的float属性。设置浮动：[img]http://css-tricks.com/wp-content/csstricks-uploads/web-layout.png[/img]清楚浮动：[img]http://css-tricks.com/wp-content/csstricks-uploads/unclearedfooter.png[/img][...原创 2010-08-26 11:41:33 · 236 阅读 · 0 评论 -
块级元素(block element)和内联元素(inline element)
块级元素生成一个元素框，（默认地）它会填充其父级元素的内容，旁边不能有其他元素。换句话说，他在元素框之前和之后生成了“分隔”符。我们最熟悉的HTML元素是p和div. 内联元素(inline element),也叫行内元素内联元素在一个文本行内生成元素框，而不会打断这行文本。内联元素最好的例子就是XHTML中的a元素。strong和em也属于内联元素。这些元素不会在它本身之前或...原创 2010-06-10 21:34:27 · 177 阅读 · 0 评论 -
CSS 选择器的权重优先级
a { border-bottom: 0px; color: #5DB0E6;}a:focus { outline: 1px dotted #eee;}a:active { outline: 0px;}a:hover { color: #7bc4f4;}body#jq-interior { background-image: ...原创 2010-06-11 17:14:01 · 224 阅读 · 0 评论 -
@import导入样式缺点
大家都知道在页面中加入ccs样式常用方式：[code="java"]1：最常用页面嵌入方式 。 2：导入外部样式文件方式[/code]@import也是导入外部样式文件一种方式。但是如果使用@import的话，必须要将@import放到样式代码最前面，否则它将会不起作用。而且事实证明，避免使用@import 同样对网站性能有益。这2种方法也早就有对比...2010-09-11 22:21:15 · 908 阅读 · 0 评论 -
word-break和word-wrap区别
word-break:break-all 单词内自动换行,如果一个单词很长的话。word-wrap:break-word 如果一个单词很长, 不自动换行。 word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。区别：[color=blue]1，word- break:break-all 例如div宽200px...2010-09-13 22:12:43 · 95 阅读 · 0 评论 -
css定位z-index问题
1. 某些浏览器下元素层级遮盖存在bug;2. 某个元素z-index设的太大，导致始终无法被遮盖;3. js动态计算z-index，导致元素覆盖关系部可控[img]http://www.etosun.com/content/uploadfile/201211/e06aa552c04a0d5ae8e763a36b630f6020121108050150.gif[/img] ...原创 2012-11-09 11:04:55 · 292 阅读 · 0 评论