2012 年 9月随笔档案 - cbwcwy

摘要：1.用float：right，ie6下会出现换行的bug2. 若含有英文，则设置了宽度之后，后面元素可能对不齐3.用position:absolute 阅读全文

posted @ 2012-09-27 19:26 cbwcwy 阅读(822) 评论(0) 推荐(0) 编辑

摘要：行内内容是说由行内元素组成的内容，行内元素大家都知道吧，比如 SPAN 元素，IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素，各个字母之间横向排列，到最右端自动折行。块级内容跟则是由块级元素构成，DIV 是最常用的块级元素，元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。块级元素和行内元素的区别是，块级元素会占一行显示，而行内元素可以在一行并排显示。1、对行内元素，需要注意如下：设置宽度width 无效。设置高度height无效，可以通过line-height来设置。设置阅读全文

posted @ 2012-09-21 11:54 cbwcwy 阅读(412) 评论(1) 推荐(0) 编辑

overflow：hidden

摘要：<!DOCTYPE html><html><head><meta charset="utf-8" /><title>By Joinli</title></head><body><h3>除了ie6浏览器之外，overflow:hidden属性具有清除浮动的效果</h3><div style="background:#ccc;overflow:hidden;"> <div style="float:left;&q 阅读全文

posted @ 2012-09-21 11:01 cbwcwy 阅读(268) 评论(0) 推荐(0) 编辑

IE9的css hack

摘要：div {background-color:red\0; /* ie 8/9*/background-color:blue\9\0; /* ie 9*/*background-color:green; /* ie 7*/_background-color:gray; /* ie 6*/}注意写csshack的顺序，其中：1.background-color:red\0;IE8和IE9都支持；2.background-color:blue\9\0; 仅IE9支持；(1)区别FF(IE8)与IE6 IE7backgorund:orange; FF和IE8背景色将为橘黄色*backgorund:re 阅读全文

posted @ 2012-09-21 10:27 cbwcwy 阅读(11315) 评论(0) 推荐(0) 编辑

ie不认识background

摘要：background: url(http://images.cnblogs.com/common/gender.png)no-repeat 48px 75px #e2f4ff;用下面代替即可： background-color:#e2f4ff; background-image:url(http://images.cnblogs.com/common/gender.png); background-position:48px 75px; background-repeat:no-repeat; 阅读全文

posted @ 2012-09-19 14:43 cbwcwy 阅读(243) 评论(0) 推荐(0) 编辑

兼容性笔记

摘要：1. IE6/7不支持display:inline-block属性2. 多个float之后的inline-block3. ie 最右边float:right 会换行倒叙写解决这个问题跟ieDOM解析相关阅读全文

posted @ 2012-09-18 15:00 cbwcwy 阅读(176) 评论(0) 推荐(0) 编辑

为什么要清除浮动

摘要：.box{border:2px solid #f00;}.box .content{float:left;height:150px;width:300px;padding:5px;background:#ddd;}/*解决方法 1 */.overflow1{overflow:hidden;zoom:1;}</style><div class="box overflow1"> <div class="content"> <strong>方法1:</strong> <br/>overfl 阅读全文

posted @ 2012-09-17 16:42 cbwcwy 阅读(2657) 评论(0) 推荐(1) 编辑

关于clearfix清除浮动

摘要：起源：.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}.clearfix { display: inline-table; }/* Hides from IE-mac \*/* html .clearfix { height: 1%; }.clearfix { display: block; }/* End hide from IE-mac */说明：*对大多数符合标准的浏览器应用第一个声明块，目的是创建一个隐形的内容为空的阅读全文

posted @ 2012-09-17 16:11 cbwcwy 阅读(811) 评论(0) 推荐(0) 编辑

div+css中clear用法

摘要：一开始用clear属性，只是跟float相对使用，今天看视频的时候还是不大明白，查了下资料原来是这样的哦，看咯。clear属性值有四个clear:both|left|right|none;作用：该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。当属性设置float（浮动）时，他所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动）,或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。clear:left;表示该元素左边不存在浮动元素；clear:right 阅读全文

posted @ 2012-09-17 14:46 cbwcwy 阅读(23839) 评论(0) 推荐(2) 编辑

Windows系统下各浏览器常用CSS hack汇总表图

摘要：Windows系统下各浏览器常用CSS HACK汇总表图1. 此汇总表中测试浏览器的版本为：微软系统自带：IE6、 IE7、IE8火狐：Firefox 3.6.6Safari：Safari 5.0谷歌浏览器：Chrome 6.0.458.1 devOpera浏览器：Opera 10.602. 其中，多数CSS hack是在selector{property:value;}基础上更改的。selector代表CSS选择器，property代表CSS特性，value代表特性的值。3. FF代表Firefox，Ch代表Chorme，Sa代表Safari，Op代表Opera4. Q代表Quirks Mo 阅读全文

posted @ 2012-09-17 14:26 cbwcwy 阅读(348) 评论(0) 推荐(0) 编辑

css hack(2)

摘要：1.区别IE和非IE浏览器CSS HACK代码#divcss5{ background:blue; /*非IE 背景藍色*/ background:red \9; /*IE6、IE7、IE8背景紅色*/ } 2.区别IE6,IE7,IE8,FF CSS HACK【区别符号】：「\9」、「*」、「_」【示例】：#divcss5{ background:blue; /*Firefox 背景变蓝色*/ background:red \9; /*IE8 背景变红色*/ ... 阅读全文

posted @ 2012-09-17 14:24 cbwcwy 阅读(401) 评论(0) 推荐(0) 编辑

css hack(1)

摘要：为了适应不同浏览器不同的版本（版本主要就ie来说），ie这朵奇葩现在我们要兼容6-9，它的10也快出来了。。。在ie下我们可以写条件注释来区分ie 和其他浏览器，以及ie的版本，这些请大家自行google。这篇文章主要讨论的是css hack。下面废话补多说了，直接上代码<!DOCTYPEhtml><html><head><title>CssHack</title><style>#test{width:300px;height:300px;background-color:blue;/*firefox*/backgrou 阅读全文

posted @ 2012-09-17 14:18 cbwcwy 阅读(239) 评论(0) 推荐(0) 编辑

元素类型

摘要：元素是文档结构的基础，在CSS中，每个元素生成了一个包含了元素内容的框（box，也译为“盒子”）。但是不同的元素显示的方式会有所不同，例如<div>和<span>就不同，而<strong>和<p>也不一样。在文档类型定义（DTD）中对不同的元素规定了不同的类型，这也是DTD对文档之所以重要的原因之一。1. 替换和不可替换元素从元素本身的特点来讲，可以分为替换和不可替换元素。a) 替换元素替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查阅读全文

posted @ 2012-09-17 14:02 cbwcwy 阅读(285) 评论(0) 推荐(0) 编辑

详解CSS选择器、优先级与匹配原理

摘要：给一个p标签增加一个类（class），可是执行后该class中的有些属性并没有起作用。通过Firebug查看，发现没有起作用的属性被覆盖了。这个时候突然意识到了CSS选择器的优先级问题，这里就CSS选择器的优先级问题做了一些总结。51CTO推荐阅读：巧妙地使用CSS选择器选择器种类严格来讲，选择器的种类可以分为三种：标签名选择器、类选择器和ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。而在标签内写入style=""的方式，应该是CSS的一种引入方式，而不是选择器，因为根本就没有用到选择器。而一般人们将上面这几种方式结合在一起，所以就有了5种阅读全文

posted @ 2012-09-06 10:30 cbwcwy 阅读(19593) 评论(1) 推荐(5) 编辑

css选择器

摘要：一、基本选择器序号选择器含义1. * 通用元素选择器，匹配任何元素2. E 标签选择器，匹配所有使用E标签的元素3. .info class选择器，匹配所有class属性中包含info的元素4. #footer id选择器，匹配所有id属性等于footer的元素实例：* { margin:0; padding:0; }p { font-size:2em; }.info { background:#ff0; }p.info { background:#ff0; }p.info.error { color:#900; font-weight:bold; }#info { background: 阅读全文

posted @ 2012-09-06 10:24 cbwcwy 阅读(410) 评论(0) 推荐(0) 编辑

鼠标样式

摘要：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS cursor 属性示例</title> <mce:sty 阅读全文

posted @ 2012-09-06 10:07 cbwcwy 阅读(1078) 评论(0) 推荐(0) 编辑

CSS样式表继承详解

摘要：什么是继承？要想了解css样式表的继承，我们先从文档树（HTML DOM）开始。文档树由HTML元素组成。文档树和家族树类似，也有祖先、后代、父亲、孩子和兄弟^_^。这很容易理解吧，笔者在这里就不一一赘述了。希望深入了解的朋友请google之。那么CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素。下面举个例子，有如下html代码片段：<p>CSS样式表<em>继承特性</em>的演示代码</p>需要注意的是em是包含在p之内的。当我们指定p的css样式时，看看em会有什么变化呢？<style>p { color:red; } 阅读全文

posted @ 2012-09-06 10:03 cbwcwy 阅读(995) 评论(0) 推荐(2) 编辑

无

摘要：无阅读全文

posted @ 2012-09-06 10:01 cbwcwy 阅读(145) 评论(0) 推荐(0) 编辑

(转)jquery中的$(this)和this

摘要：阅读全文

posted @ 2012-09-03 14:45 cbwcwy 阅读(116) 评论(0) 推荐(0) 编辑

抖动

摘要：<html><head><style type="text/css">#logo{background:url("bg.gif") no-repeat 100px 50px;}#logo a{text-indent:-9999px;display:block;height:125px;outline:none}</style></head><body><h2 id="logo" style="-webkit-transform: rotate(1d 阅读全文

posted @ 2012-09-01 21:51 cbwcwy 阅读(244) 评论(0) 推荐(0) 编辑

-webkit-transition (不支持IE) 这个属性的作用是使得变化不那么生硬，达到比较平和的过渡

摘要：<style type="text/css">div { width: 200px; }h2 { font: 400 40px/1.5 Helvetica, Verdana, sans-serif; margin: 0; padding: 0; }ul { list-style-type: none; margin: 0; padding: 0; }li { font: 200 20px/1.5 Helvetica, Verdana, sans-serif; border-bottom: 1px solid #ccc; }li:last-child { bord 阅读全文

posted @ 2012-09-01 14:15 cbwcwy 阅读(1604) 评论(0) 推荐(0) 编辑

javascript判断IE浏览器的版本

摘要：<script language="javascript">function ie(){var isIE=!!window.ActiveXObject;var isIE6=isIE&&!window.XMLHttpRequest;var isIE8=isIE&&!!document.documentMode;var isIE7=isIE&&!isIE6&&!isIE8;if (isIE){ if (isIE6){ var style = document.cr 阅读全文

posted @ 2012-09-01 14:05 cbwcwy 阅读(1664) 评论(0) 推荐(0) 编辑

css3 导航效果

摘要：<html><head><style type="text/css">ul{list-style:none;border-left:1px solid grey;padding:10px 0;margin-left:auto;margin-right:auto;width:200px;}li#yuanjiao{width:100px;height:35px;border:1px solid grey;border-left:0px solid grey;margin:6px 0px;border-radius:0px 15px 15px 阅读全文

posted @ 2012-09-01 13:56 cbwcwy 阅读(560) 评论(0) 推荐(0) 编辑

搜索

常用链接

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论